Skip to content

Commit

Permalink
feat: Add panResponderThreshold to props (#469) (#526)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aryk
Aryk committed Apr 10, 2021
1 parent 1c4c0f7 commit 6145c5b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 28 deletions.
55 changes: 28 additions & 27 deletions README.md
View file
Expand Up @@ -46,12 +46,12 @@ function WrapperComponent() {
return (
<View>
<Modal>
<View style={{ flex: 1 }}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
);
}
```

Expand All @@ -62,12 +62,12 @@ function WrapperComponent() {
return (
<View>
<Modal isVisible={true}>
<View style={{ flex: 1 }}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
</View>
</Modal>
</View>
)
);
}
```

Expand All @@ -87,24 +87,24 @@ import Modal from 'react-native-modal';

function ModalTester() {
const [isModalVisible, setModalVisible] = useState(false);

const toggleModal = () => {
setModalVisible(!isModalVisible);
};

return (
<View style={{flex: 1}}>
<Button title="Show modal" onPress={toggleModal} />
return (
<View style={{flex: 1}}>
<Button title="Show modal" onPress={toggleModal} />

<Modal isVisible={isModalVisible}>
<View style={{flex: 1}}>
<Text>Hello!</Text>
<Modal isVisible={isModalVisible}>
<View style={{flex: 1}}>
<Text>Hello!</Text>

<Button title="Hide modal" onPress={toggleModal} />
</View>
</Modal>
</View>
);
<Button title="Hide modal" onPress={toggleModal} />
</View>
</Modal>
</View>
);
}

export default ModalTester;
Expand Down Expand Up @@ -142,6 +142,7 @@ For a more complex example take a look at the `/example` directory.
| onSwipeMove | func | (percentageShown) => null | Called on each swipe event |
| onSwipeComplete | func | ({ swipingDirection }) => null | Called when the `swipeThreshold` has been reached |
| onSwipeCancel | func | () => null | Called when the `swipeThreshold` has not been reached |
| panResponderThreshold | number | 4 | The threshold for when the panResponder should pick up swipe events |
| scrollOffset | number | 0 | When > 0, disables swipe-to-close, in order to implement scrollable content |
| scrollOffsetMax | number | 0 | Used to implement overscroll feel when content is scrollable. See `/example` directory |
| scrollTo | func | null | Used to implement scrollable modal. See `/example` directory for reference on how to use it |
Expand All @@ -168,10 +169,13 @@ If you're experiencing this issue, you'll need to install [`react-native-extra-d
Then, provide the real window height (obtained from `react-native-extra-dimensions-android`) to the modal:

```javascript
const deviceWidth = Dimensions.get("window").width;
const deviceHeight = Platform.OS === "ios"
? Dimensions.get("window").height
: require("react-native-extra-dimensions-android").get("REAL_WINDOW_HEIGHT");
const deviceWidth = Dimensions.get('window').width;
const deviceHeight =
Platform.OS === 'ios'
? Dimensions.get('window').height
: require('react-native-extra-dimensions-android').get(
'REAL_WINDOW_HEIGHT',
);

function WrapperComponent() {
const [isModalVisible, setModalVisible] = useState(true);
Expand All @@ -180,13 +184,12 @@ function WrapperComponent() {
<Modal
isVisible={isModalVisible}
deviceWidth={deviceWidth}
deviceHeight={deviceHeight}
>
<View style={{ flex: 1 }}>
deviceHeight={deviceHeight}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
</View>
</Modal>
)
);
}
```

Expand Down Expand Up @@ -283,9 +286,7 @@ Also, some users have noticed that setting backdropTransitionOutTiming={0} can f
You need to specify the size of your custom backdrop component. You can also make it expand to fill the entire screen by adding a `flex: 1` to its style:

```javascript
<Modal
isVisible={isModalVisible}
customBackdrop={<View style={{flex: 1}} />}>
<Modal isVisible={isModalVisible} customBackdrop={<View style={{flex: 1}} />}>
<View style={{flex: 1}}>
<Text>I am the modal content!</Text>
</View>
Expand Down
8 changes: 7 additions & 1 deletion src/modal.tsx
View file
Expand Up @@ -98,6 +98,7 @@ export interface ModalProps extends ViewProps {
onModalWillHide: () => void;
onBackButtonPress: () => void;
onBackdropPress: () => void;
panResponderThreshold: number;
swipeThreshold: number;
scrollTo: OrNull<(e: any) => void>;
scrollOffset: number;
Expand Down Expand Up @@ -138,6 +139,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
onModalWillHide: PropTypes.func,
onBackButtonPress: PropTypes.func,
onBackdropPress: PropTypes.func,
panResponderThreshold: PropTypes.number,
onSwipeStart: PropTypes.func,
onSwipeMove: PropTypes.func,
onSwipeComplete: PropTypes.func,
Expand Down Expand Up @@ -190,6 +192,7 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
onModalWillHide: () => null,
onBackdropPress: () => null,
onBackButtonPress: () => null,
panResponderThreshold: 4,
swipeThreshold: 100,

scrollTo: null,
Expand Down Expand Up @@ -332,10 +335,13 @@ export class ReactNativeModal extends React.Component<ModalProps, State> {
if (!this.props.propagateSwipe) {
// The number "4" is just a good tradeoff to make the panResponder
// work correctly even when the modal has touchable buttons.
// However, if you want to overwrite this and choose for yourself,
// set panResponderThreshold in the props.
// For reference:
// https://github.com/react-native-community/react-native-modal/pull/197
const shouldSetPanResponder =
Math.abs(gestureState.dx) >= 4 || Math.abs(gestureState.dy) >= 4;
Math.abs(gestureState.dx) >= this.props.panResponderThreshold ||
Math.abs(gestureState.dy) >= this.props.panResponderThreshold;
if (shouldSetPanResponder && this.props.onSwipeStart) {
this.props.onSwipeStart(gestureState);
}
Expand Down

0 comments on commit 6145c5b

Please sign in to comment.