Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork27
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
License
numandev1/react-native-bottomsheet-reanimated
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Highly configurable component imitatingnative bottom sheet behavior, with fully native 60 FPS animations!
Built from scratch withreact-native-interactable-reanimated andreact-native-reanimated.
Usable with Expo with no extra native dependencies!
 |  |  |
|---|
Open a Terminal in the project root and run:
yarn add react-native-bottomsheet-reanimated react-native-interactable-reanimated
or if you usenpm:
npm install react-native-bottomsheet-reanimated
If you are using Expo, you are done.
If you don't use Expo, install and linkreact-native-gesture-handler andreact-native-reanimated.
importBottomSheetfrom'react-native-bottomsheet-reanimated';classExampleextendsReact.Component{render(){return(<Viewstyle={styles.container}><BottomSheetkeyboardAwarebottomSheerColor="#FFFFFF"ref="BottomSheet"initialPosition={'50%'}//200, 300snapPoints={['50%','100%']}isBackDrop={true}isBackDropDismissByPress={true}isRoundBorderWithTipHeader={true}// backDropColor="red"// isModal// containerStyle={{backgroundColor:"red"}}// tipStyle={{backgroundColor:"red"}}// headerStyle={{backgroundColor:"red"}}// bodyStyle={{backgroundColor:"red",flex:1}}header={<View><Textstyle={styles.text}>Header</Text></View>}body={<Viewstyle={styles.body}><Textstyle={styles.text}>Body</Text></View>}/></View>);}}
| name | required | default | description |
|---|---|---|---|
| keyboardAware | no | false | true will avoid current snap when keyboard will open. |
| overDrag | no | true | false will disable overdrag of last snap,false will also disablebounce' andisModal`. |
| keyboardAwareExtraSnapHeight | no | 0 | whenkeyboardAware=true and this is for adding extra space in snap when keyboard open |
| keyboardAwareDrag | no | false | whenkeyboardAware=true and this is used for enable or disable drag when keyboard open |
| onChangeKeyboardAwareSnap | no | whenkeyboardAware=true then it give keyboard awareview snap. onChangeKeyboardAwareSnap: (previousSnap: number,nextSnap: number,keyboardHeight: number) => void; | |
| snapPoints | yes | E.g.[300, 200, 0]. Points for snapping of bottom sheet coomponent. They define distance from bottom of the screen. Might be number or percent (as string e.g.'20%') for points or percents of screen height from bottom. Note: Array values must be in descending order. | |
| initialPosition | no | 0 | Determines initial position point of bottom sheet. The value outside of snap points. |
| body | no | Method for rendering scrollable content of bottom sheet. | |
| header | no | Method for rendering non-scrollable header of bottom sheet. | |
| isBackDrop | no | false | for show backdrop behind the bottom sheet. |
| isBackDropDismissByPress | no | false | enable to move bottomsheet to first snappoint by pressing backdrop. |
| isRoundBorderWithTipHeader | no | false | give round with tip header style to bottomsheet. |
| isModal | no | false | to make bottom sheet like modal. |
| bounce | no | 0.5 | for increase or decrease bounce effect |
| isAnimatedYFromParent | no | Iftrue then give animated value toanimatedValueY props. | |
| animatedValueY | no | If isAnimatedYFromParent will betrue then it will give animtedY value toanimatedValueY props. | |
| bottomSheerColor | no | #ffffff | for background color of bottom sheet. |
| tipStyle | no | for change style of tip. it is dependted onisRoundBorderWithTipHeader. | |
| headerStyle | no | for change style of header. | |
| bodyStyle | no | for change style of body. | |
| dragEnabled | no | true | for enable/disable drag |
| tipHeaderRadius | no | 12 | for tip header border radius |
| onClose | no | Method call when bottomsheet close | |
| containerStyle | no | for change style of container | |
| bodyContainerStyle | no | for change style of body container | |
| onChangeSnap | no | Method call when change any snap |
Imperative method on for snapping to snap point in given index. E.g.
// Snap to the snap point at index 0 (e.g. 450 in [450, 300, 0])this.refs.BottomSheet.current.snapTo(0);
Herethis.refs.BottomSheet refersto theref passed to theBottomSheet component.
More complex examples can be found in theExample folder. To view the examples in theExpo app, open a Terminal and run:
yarncd Exampleyarnexpo startThanks goes to these wonderful people (emoji key):
Numan 🚇💻 |
About
React Native bottom sheet with fully native 60 FPS animations and awesome user experience
Topics
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.