react-native-bottom-sheet | performant interactive bottom sheet | iOS library

 by   gorhom TypeScript Version: v5.0.0-alpha.2 License: MIT

kandi X-RAY | react-native-bottom-sheet Summary

kandi X-RAY | react-native-bottom-sheet Summary

react-native-bottom-sheet is a TypeScript library typically used in Mobile, iOS, React Native, React applications. react-native-bottom-sheet has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

A performant interactive bottom sheet with fully configurable options .

            kandi-support Support

              react-native-bottom-sheet has a medium active ecosystem.
              It has 4778 star(s) with 552 fork(s). There are 33 watchers for this library.
              There were 2 major release(s) in the last 6 months.
              There are 49 open issues and 919 have been closed. On average issues are closed in 45 days. There are 11 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of react-native-bottom-sheet is v5.0.0-alpha.2

            kandi-Quality Quality

              react-native-bottom-sheet has 0 bugs and 0 code smells.

            kandi-Security Security

              react-native-bottom-sheet has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              react-native-bottom-sheet code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              react-native-bottom-sheet is licensed under the MIT License. This license is Permissive.
              Permissive licenses have the least restrictions, and you can use them in most projects.

            kandi-Reuse Reuse

              react-native-bottom-sheet releases are available to install and integrate.
              Installation instructions are available. Examples and code snippets are not available.
              It has 206 lines of code, 7 functions and 173 files.
              It has medium code complexity. Code complexity directly impacts maintainability of the code.

            Top functions reviewed by kandi - BETA

            kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
            Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-native-bottom-sheet
            Get all kandi verified functions for this library.

            react-native-bottom-sheet Key Features

            No Key Features are available at this moment for react-native-bottom-sheet.

            react-native-bottom-sheet Examples and Code Snippets

            No Code Snippets are available at this moment for react-native-bottom-sheet.

            Community Discussions


            Expo app throwing errors when trying to install react-native-maps-directions after full reinstall
            Asked 2022-Mar-19 at 07:18

            I entered Debug Remote JS mode and this caused some errors with react-native-reanimated package, I found here that if I upgrade to the version 2.4.1 it would work, and so I did and it worked but I got a warning from expo that this version is incompatible and my app may not work as expected. So I Removed node_modules and renamed it in package.json from 2.4.1 back to 2.3.1.

            At first I had lots of trouble installig it again as "expo install" was throwing errors from app.config.ts because I had used dotenv there and I was unable to install it for some reason. At first npm install failed as well but after second time it kind of installed all the packages, but I am still getting errors from simulator. When I open app on a device it seems to be ok, but the simulator instantly throws



            Answered 2022-Mar-19 at 07:18

            run either npm install react-native-maps-directions --force or npm install react-native-maps-directions --legacy-peer-deps

            this will ignore the peer dependency error, and will just proceed with the main dependency, in this case react-native-maps-directions.

            this has worked for me whenever i've gotten this error



            How can I open BottomSheetModal (@gorhom/bottom-sheet) in different component, using React-Native (Expo)
            Asked 2022-Jan-21 at 17:55

            I am using

            I was wondering how can I open "BottomSheetModal" in a different file e.g Navbar Component.

            This is what my code looks like at the moment to open the Bottom Sheet inside of the same component.



            Answered 2022-Jan-21 at 17:55

            I found out to do this, incase anyone comes across this question, I'll post it here!

            So what you have to do is pass the ref to the bottom sheet component. So in the Navbar component I created the ref for the bottom sheet, and then passed it into the bottom sheet.




            React native 'BottomSheetModalInternalContext' cannot be null
            Asked 2021-Aug-16 at 16:36

            I'm using the BottomSheetModal to display a list of all countries in a bottom sheet. But I get the error message 'BottomSheetModalInternalContext' cannot be null! when navigating to the screen that includes the bottom modal.

            I assume that the error occurs because I initialize the ref (bottomSheetModalRef) with null, but I don't know how else I can create the ref without passing in null.

            Excerpt of the full error message



            Answered 2021-Aug-16 at 16:36

            confirm you surround your App.tsx file with BottomSheetModalProvider



            Not able to make corners of bottom sheet rounded in react-native-bottom-sheet
            Asked 2021-Jun-10 at 08:44

            I am trying to make the corners of the bottom sheet provided by the react-native-bottom-sheet rounded by passing the style prop to it. But the rounded corners are being overlapped by something which I don't know. How do I make the the corners rounded?





            Answered 2021-Jun-10 at 08:44

            Just added overflow: hidden to the BottomSheet's style prop and it worked.


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install react-native-bottom-sheet

            Check out the documentation website.


            To keep this library maintained and up-to-date please consider sponsoring it on GitHub. Or if you are looking for a private support or help in customizing the experience, then reach out to me on Twitter @gorhom.
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • HTTPS


          • CLI

            gh repo clone gorhom/react-native-bottom-sheet

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link