React Native Vertical Swipe View
npm install react-native-vertical-swipe-view``js`
npm install react-native-vertical-swipe-view --save
or
`js`
yarn add react-native-vertical-swipe-view

#### Props
| Props | Params | isRequire | Description |
| --------------- | ----------------- | --------- | ----------- |
| visible | Boolean | No | |
| style | ViewStyle | No | |
| headerStyle | ViewStyle | No | |
| backgroundColor | String | No | |
| maxHeight | Number | Yes | |
| position | 'top' or 'bottom' | No | |
| renderHeader | () => JSX.Element | No | |
| onRequestShow | ()=> void | No | |
| onRequestClose | ()=> void | No | |
`javascript
import React from 'react';
import { StyleSheet, View, SafeAreaView } from 'react-native';
import SwipeView from 'react-native-vertical-swipe-view';
const SwipeViewScreen = (_props) => {
const _renderHeaderTop = () => {
return (
);
};
const _renderHeaderBottom = () => {
return (
);
};
return (
style={styles.curtainView}
maxHeight={300}
headerStyle={{ backgroundColor: 'transparent' }}
renderHeader={_renderHeaderTop}
>
style={styles.curtainView}
maxHeight={200}
headerStyle={{ backgroundColor: 'transparent' }}
renderHeader={_renderHeaderBottom}
>
);
};
export default SwipeViewScreen;
const styles = StyleSheet.create({
container: {
flex: 1,
},
curtainView: {
width: '100%',
},
curtainContainer: {
flex: 1,
backgroundColor: 'gray',
},
row: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
padding: 20,
},
headerTop: {
flex: 1,
backgroundColor: 'transparent',
justifyContent: 'center',
alignItems: 'center',
},
headerBottom: {
flex: 1,
backgroundColor: 'black',
borderTopLeftRadius: 22,
borderTopRightRadius: 22,
justifyContent: 'center',
alignItems: 'center',
},
lineTop: {
width: 40,
height: 6,
backgroundColor: 'gray',
},
lineBottom: {
width: 40,
height: 6,
backgroundColor: 'white',
},
});
``