Skip to content

Commit e2b85ef

Browse files
authored
Update README.md
1 parent c85aa66 commit e2b85ef

File tree

1 file changed

+22
-0
lines changed

1 file changed

+22
-0
lines changed

‎README.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,28 @@ Show Page
4343
### Technology Details
4444
This mobile app iOS application will be rooted in React Native, which will allow us to build a rich and interactive UI. We will utilize the Google API to pull information and organize their itinerary.
4545

46+
### Challenges and Solutions
47+
One of our many challenges while learning React Native was figuring out how to handle guesture responses. One of the biggest challenges of which came up in our form submission. We wanted to create a form that would be able to be submitted upon a swipe. Rose ended up create a reusable component that could be wrapped around any component to give it a different gesture response upon swiping left ot right.
48+
```javascript
49+
export class SwipeableCard extends React.Component {
50+
translateX = new Animated.Value(0);
51+
_panResponder = PanResponder.create({
52+
onMoveShouldSetResponderCapture: () => true,
53+
onMoveShouldSetPanResponderCapture: () => true,
54+
onPanResponderMove: Animated.event([null, {dx: this.translateX}]),
55+
onPanResponderRelease: (e, {vx, dx}) => {
56+
const screenWidth = Dimensions.get("window").width;
57+
if (vx >= 0.003 && Math.abs(dx) >= 0.5 * screenWidth) {
58+
this.props.swipeBack();
59+
} else if (Math.abs(dx) >= 0.5 * screenWidth) {
60+
this.props.onSwipe();
61+
}
62+
}
63+
});
64+
}
65+
```
66+
67+
4668
### Group Members and Work Breakdown
4769
Our group consist of four members: Alexandra Savramis, Brie McNally, Rose Koron, and Todd Bergman.
4870

0 commit comments

Comments
 (0)