Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hoaphantn7604/react-native-vertical-swipe-view
React Native Vertical Swipe View
https://github.com/hoaphantn7604/react-native-vertical-swipe-view
components elements react-native swipe vertical
Last synced: 3 months ago
JSON representation
React Native Vertical Swipe View
- Host: GitHub
- URL: https://github.com/hoaphantn7604/react-native-vertical-swipe-view
- Owner: hoaphantn7604
- License: mit
- Created: 2021-06-24T06:42:56.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-12-02T04:21:21.000Z (about 2 years ago)
- Last Synced: 2024-11-10T02:52:25.314Z (3 months ago)
- Topics: components, elements, react-native, swipe, vertical
- Language: TypeScript
- Homepage:
- Size: 445 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-native-vertical-swipe-view
React Native Vertical Swipe View.
## Getting started
```js
npm install react-native-vertical-swipe-view --save
```
or
```js
yarn add react-native-vertical-swipe-view
```
### Demo
#### 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 | |
## Usage
```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 (
);
};
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',
},
});
```