Package Exports
- react-native-swipe-down-modal
- react-native-swipe-down-modal/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-swipe-down-modal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-swipe-down-modal
Swipable bottom drawer component like Instagram's comment component.
- Easy to use
- Easy to customize
- Smooth animation
- No dependency
- Works perfect with scrollview and flatlist
- Swipable and unswipable modes
Originated to this package: react-native-swipe-modal-up-down
Getting Started
$ npm install react-native-swipe-down-modalUsage
import SwipeDownModal from 'react-native-swipe-down-modal';
const SwipeDownTestScreen = () => {
const [visible, setVisible] = useState(false)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<SwipeDownModal
visible={visible}
onClose={() => setVisible(false)}
>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}}>
<Text>Hello world</Text>
</View>
</SwipeDownModal>
<Button
title='Press to open'
onPress={() => setVisible(true)}
/>
</View>
)
}
export default SwipeDownTestScreen;Using customized header, customized style and closing programmatically
const SwipeDownTestScreen = () => {
const [visible, setVisible] = useState(false)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<SwipeDownModal
visible={visible}
onClose={() => setVisible(false)}
backgroundColor={'rgba(0,0,0,.5)'}
drawerBackgroundColor={'green'}
borderTopRadius={20}
swipeDisabled={true}
marginTop={Dimensions.get("screen").height - 500}
customHeader={
<View
style={{
height: 70,
padding: 10,
borderBottomColor: 'yellow',
borderBottomWidth: 3,
alignItems: 'center',
justifyContent: 'center'
}}>
<Text>Foo</Text>
<TouchableOpacity
style={{
width: 32,
height: 32,
borderRadius: 16,
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
right: 20,
top: 20,
position: 'absolute'
}}
onPress={() => setVisible(false)}
>
<Text style={{ color: 'wheat' }}>X</Text>
</TouchableOpacity>
</View>
}
>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1
}}>
<Text>Hello world</Text>
</View>
</SwipeDownModal>
<Button
title='Press to open'
onPress={() => setVisible(true)}
/>
</View>
)
}
export default SwipeDownTestScreen
Detailed styling and customizing
const SwipeDownTestScreen = () => {
const [visible, setVisible] = useState(false)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<SwipeDownModal
visible={visible}
onClose={() => setVisible(false)}
backgroundColor={'rgba(0,0,0,.5)'}
borderTopRadius={20}
marginTop={Dimensions.get("screen").height - 600}
drawerBackgroundColor='transparent'
customHeader={
<View
style={{
height: 60,
margin: 20,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 5,
borderTopRightRadius: 15,
borderBottomLeftRadius: 15,
overflow: 'hidden'
}}>
<Text style={{ fontSize: 30, color: 'red' }}>Title</Text>
<TouchableOpacity
style={{
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
right: 0,
position: 'absolute',
width: 50,
height: '100%',
borderBottomLeftRadius: 15,
}}
onPress={() => setVisible(false)}
>
<Text style={{ color: 'wheat', fontSize: 20 }}>X</Text>
</TouchableOpacity>
</View>
}
>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
flex: 1,
margin: 20,
marginTop: 30,
marginBottom: 50,
borderRadius: 20,
backgroundColor: 'wheat'
}}>
<Text style={{ fontSize: 30 }}>Hello world</Text>
</View>
</SwipeDownModal>
<Button
title='Press to open'
onPress={() => setVisible(true)}
/>
</View>
)
}
export default SwipeDownTestScreen
props
| Prop | Type | Default | Description |
|---|---|---|---|
| duration | number | 200 | Duration of swipe animation in milliseconds |
| onClose | func | () => null | The function will be called after the modal closed |
| customHeader | react element | null | Custom header element |
| visible | boolean | false | Modal visibility |
| swipeThreshold | number | 15 | Minimum dy value to trigger swipe animation |
| marginTop | number | 71 | Margin to top of the screen. See image description. If you want to give certain height you can calculate it like this: marginTop={Dimensions.get("screen").height - yourHeight} |
| swipableHeight | number | height of header component | Height of the area capturing the swipe. Outside of this area will not capture finger moves. See image description |
| backgroundColor | color string | 'rgba(0, 0, 0, .9)' | Color of the empty area between the modal body and the top of the screen |
| headerHeight | number | 40 | Height of the default header. This prop will take effect only if customHeader prop is null |
| borderTopRadius | number | 38 | Border top right and left radius of drawer section |
| drawerBackgroundColor | color string | '#ffffff' | Background color of drawer section |
| swipeDisabled | boolean | false | When true, finger moves will not be captured |
Image description
