kylefang/react-native-bottom-sheet
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-bottom-sheet.git synced 2026-01-13 09:29:34 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
master
react-native-bottom-sheet/website/docs/react-naigation.md
Mo Gorhom 34c90396b4 docs: added documentation website (#90) 
* chore: added docusaurus

* chore: updated styling

* docs: added current docs WIP

* docs: added current docs WIP

* docs: added current docs WIP

* docs: updated custom handle & background docs

* chore: update eslint

* chore: updated website url

* chore: updated library homepage url

* chore: added google search console file

* chore: added expo badge

* docs: added troubleshooting page

* docs: added faq page

* chore: added backdrop prop

* chore: added modal documents

* chore: updated stack example

* chore: added usage pages

* fix: revert demo styling

* fix: fixed features link on modal page

* docs: updated root readme, and deleted old docs

* docs: updated version 2 alpha 5

* fix: video player on mobile

* chore: updated v2 alpha version

* chore: compressed gifs

* chore: updated video component

* chore: updated custom handle, background & backdrop

* chore: updated getting started page

* docs: updated readme file
2020-12-16 22:11:38 +01:00

1.1 KiB
Raw Permalink Blame History

id, title, slug, hide_table_of_contents
id title slug hide_table_of_contents
react-navigation-integration React Navigation Integration /react-navigation-integration true

One of the main goal of this library, is to allow user to fully integrate a navigator in the bottom sheet. This integration allow lots of opportunities for a native-like experience in your app 😇

However, there are some tricks has to be follow to enable both libraries to work together seamlessly.

  • You need to override safeAreaInsets, by default React Navigation add the safe area insets to all its navigators, but since your navigator will properly won't cover full screen, you will need to override it and set it to 0.
  • You need to override headerLeft, due to bottom sheet wrapping the content with TapGestureHandler & PanGestureHandler, you will need to wrap the header left button with TouchableOpacity that this library provide to allow it working.

For more details regarding the implementation, please have a look at the Navigator Example.