react native sheet presentation

DEV Community

Posted on Aug 24, 2023

Implementing Attractive Bottom Sheets in React Native with `react-native-bottom-sheet`

What is a bottom sheet.

A bottom sheet is a UI design pattern in mobile applications, representing a layer of content that slides up from the bottom of the screen. It serves as a method to provide additional information or actions to the user. Bottom sheets can be used for various purposes, such as menu options, navigation, or detailed information.

Features of React Native Bottom Sheet

react-native-bottom-sheet offers features like:

• Modal presentation view, Bottom Sheet Modal.
• Smooth gesture interactions and snapping animations.
• Seamless keyboard handling for both iOS and Android.
• Support for scrolling interactions in FlatList, SectionList, ScrollView, and View.
• Compatibility with Expo.
• Written in TypeScript.

Installation Guide

Dependencies:

For those using Expo:

Basic Usage

Here's a basic example of implementing a bottom sheet:

Using react-native-bottom-sheet , you can easily add attractive bottom sheets to your React Native applications. Leverage the rich features and straightforward implementation of this library to enhance user experience!

If you found this article helpful, please give it a thumbs up or leave a comment. Any questions or feedback are also welcome! 🚀

Top comments (1)

Templates let you quickly answer FAQs or store snippets for re-use.

• Joined Feb 27, 2024

useless wish i could have read this comment

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

An introduction to rust for the typescript developer

Rhl - Aug 27

Tutorial: How to Integrate Passkeys into Angular

vdelitz - Aug 27

Building a simple load balancer in Go

Vivek Alhat - Sep 7

The Solar System in CSS

Mads Stoumann - Aug 25

We're a place where coders share, stay up-to-date and grow their careers.

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

Creating and styling a modal bottom sheet in React Native

The modal bottom sheet is a component that we’ve likely all seen before. It’s an element that slides up from the bottom of a screen to display extra content or longer descriptions within a mobile application. You’ve probably seen it in some of today’s most popular applications, such as Twitter, Instagram, and the Apple AppStore.

The modal bottom sheet pops up whenever an event is triggered by the user. You can see an example of this below in trying to install an app on my phone:

In this tutorial, we will be creating a basic realtor application with a modal bottom sheet feature. We’ll go over how to set up the app layout, fetch data from an API, implement the modal bottom sheet, pass data to it, and style it.

Setting up the app and installing dependencies

Creating our app layout, fetching data from the api.

• Implementing the modal bottom sheet in our React Native app

Passing data to the modal bottom sheet

Styling the modal bottom sheet.

The basic idea of our app is to display a list of properties available to rent. When a user decides which one they want or to learn more about, they can click on the View Details button and the modal bottom sheet will slide up to display additional information about that property.

We will be using the react-native-bottom-sheet package for the modal bottom sheet implementation. We’ll also use the Bayut API, which you can access by signing up here and can preview the API here , as well as Axios to make requests to the needed API endpoint.

First, we’ll be using Expo to build our React Native app. We will initialize our project by typing the command npx create-expo-app react-native-bottom-sheet in our CLI to get started.

We will also install our needed dependencies:

For the app’s folder structure, we will create utils and components folders. Inside the components folder, we will have the Homes and BottomSheetModalComponent components.

The Homes component will be used to render the list of properties and the BottomSheetModalComponent will be used to display the modal bottom sheet.

In the utils folder, we will create a homesApi file to create the function that fetches data from the API endpoint we mentioned earlier.

In the Homes.js component, we will initialize the component by adding the following to the file:

Then, we’ll import this component into the App.js file like this:

We should have this in our simulator:

N.B., Since the modal bottom sheet needs the react-native-reanimated dependency installed before using it, you’ll need to add the following code to your babel.config.js file (or else you’ll get an error):

The file will look like this now:

As previously mentioned, we will be fetching the list of properties from the API. Inside the homesApi file, we will create the function to fetch the data from the API endpoint:

Then, in App.js , we will call this function and make the API call using the useEffect hook.

First, we create a  homes state which will initially be an empty array (before it gets populated by the data from the API). Then, we will use the useEffect hook to fetch the data once the component renders and set the homes state to the data that is returned.

We’ll then wrap our entire app in a SafeAreaView component to the rendered content within the safe area boundaries of the device. FlatList will be used to map over the array of data returned from the API and the Homes component will be rendered.

Also, since the process of fetching the data is asynchronous and will take time to complete, we can initialize a loading state to display a loading text to the user before the data is rendered.

As you will notice above, after mapping over the items in the array that are returned to us from the API, we have an object for each property. We are spreading the object using a spread operator on the Homes component. We can destructure the needed values and use them to build the Homes component.

Over 200k developers use LogRocket to create better digital experiences

Here, we are only using the coverPhoto and title props while building our call to action button to trigger the modal bottom sheet. Now, we should have this in our simulator:

Implementing the modal bottom sheet into our React Native app

To start the modal bottom sheet implementation, we will import BottomSheetModal and BottomSheetModalProvider from the library and wrap the whole app with the BottomSheetModalProvider . Then, we will call the BottomSheetModal component from the library and pass in the following props: snapPoints , index , and ref .

snapPoints are the points for the bottom sheet to snap to, which should be sorted from the bottom to the top. This prop takes in an array of numbers.

index is the initial snap index.

After we pass in the props, we will pass a simple View component inside the BottomSheetModal and see what it looks like.

To make the pop-up modal work when we click View Details, we will pass an onPress prop to the Homes component that’ll take in an openModal function. The onPress prop will then be destructured in the Homes component and passed to the View Details button, so when the button is clicked, the modal bottom sheet slides up.

Now let’s see what we have:

We can see our modal bottom sheet coming up once we trigger the View Details function!

N.B. , for the snap points, you can snap them to your preference. Here, we used 50% so it won’t go past more than half of the screen. If you want it to snap to the very top, you can pass ["50%", "100%"] into the array.

Now that the modal bottom sheet works, we will render the BottomSheetModalComponent we initially created and find a way to pass the API data into this component. When the modal bottom sheet slides in, this will allow us to see additional information about each property.

To do that, we will create a new state called houseDataModal and set the initial value to null . Since we have the item object in the Homes component where we are mapping over the homes data array, we can pass the item to the openModal function and setHouseDataModal to the item passed to the openModal function.

Then, in the BottomSheetModalComponent , we can spread the item object like this:

Lastly, we can destructure all the values we need from the returned API data and render them in the modal bottom sheet:

Now, we can style our bottom sheet to suit our preference as follows:

Great! We’ve applied the styles to our modal bottom sheet so they can be displayed in a more presentable way. We can see our title, property image, icons, and other details properly arranged.

We can take a look at what we have in our modal bottom sheet when we click on the View Details button:

There we have it — we have successfully implemented a modal bottom sheet in a React Native application. We fetch the data from an API to render a list of properties and display this modal bottom sheet when the View Details button is triggered.

Our modal bottom sheet is ready! In this tutorial, we learned how we can use the @gorhom/bottom-sheet library to create a modal bottom sheet in our React Native applications.

We also learned how to share data between the rendered component and the modal bottom sheet for specific use cases, i.e., where we need to display more data to the user when the modal bottom sheet pops up.

If you’d like, you can integrate and modify this example in your own React Native project. You can find the full code in my repository here .

LogRocket : Instantly recreate issues in your React Native apps

LogRocket is a React Native monitoring solution that helps you reproduce issues instantly, prioritize bugs, and understand performance in your React Native apps.

LogRocket also helps you increase conversion rates and product usage by showing you exactly how users are interacting with your app. LogRocket's product analytics features surface the reasons why users don't complete a particular flow or don't adopt a new feature.

Start proactively monitoring your React Native apps — try LogRocket for free .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)
• #react native

Hey there, want to help make our blog better?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Stop guessing about your digital experience with LogRocket

Recent posts:.

How to display notification badges on PWAs using the Badging API

Ding! You got a notification, but does it cause a little bump of dopamine or a slow drag of cortisol? […]

JWT authentication: Best practices and when to use it

A guide for using JWT authentication to prevent basic security issues while understanding the shortcomings of JWTs.

Auth.js adoption guide: Overview, examples, and alternatives

Auth.js makes adding authentication to web apps easier and more secure. Let’s discuss why you should use it in your projects.

Lucia Auth: An Auth.js alternative for Next.js authentication

Compare Auth.js and Lucia Auth for Next.js authentication, exploring their features, session management differences, and design paradigms.

2 Replies to "Creating and styling a modal bottom sheet in React Native"

Hello Taofiq, great content. However, with regard to passing data to the bottom sheet modal, you kind of passed the props statically which will make it impossible to use the same bottom sheet modal component for another purpose. Personally, to make the bottom sheet modal reusable, I will pass the data as children.

Hey David, Do you mean the ‘BottomSheetModal’ or the BottomSheetModalComponent’? And also, can you help with the sample of the statically passed data? Because if you were to reuse this BottomSheet Component in another place, you will have to pass the new data you want to render when the modal opens to the BottomSheetModalComponent

Leave a Reply Cancel reply

The Modal component is a basic way to present content above an enclosing view.

View Props ​

Inherits View Props .

Deprecated. Use the animationType prop instead.

animationType ​

The animationType prop controls how the modal animates.

Possible values:

• slide slides in from the bottom,
• fade fades into view,
• none appears without an animation.

hardwareAccelerated Android ​

The hardwareAccelerated prop controls whether to force hardware acceleration for the underlying window.

onDismiss iOS ​

The onDismiss prop allows passing a function that will be called once the modal has been dismissed.

onOrientationChange iOS ​

The onOrientationChange callback is called when the orientation changes while the modal is being displayed. The orientation provided is only 'portrait' or 'landscape'. This callback is also called on initial render, regardless of the current orientation.

onRequestClose ​

The onRequestClose callback is called when the user taps the hardware back button on Android or the menu button on Apple TV. Because of this required prop, be aware that BackHandler events will not be emitted as long as the modal is open. On iOS, this callback is called when a Modal is being dismissed using a drag gesture when presentationStyle is pageSheet or formSheet

The onShow prop allows passing a function that will be called once the modal has been shown.

presentationStyle iOS ​

The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones). See https://developer.apple.com/reference/uikit/uimodalpresentationstyle for details.

• fullScreen covers the screen completely
• pageSheet covers portrait-width view centered (only on larger devices)
• formSheet covers narrow-width view centered (only on larger devices)
• overFullScreen covers the screen completely, but allows transparency

statusBarTranslucent Android ​

The statusBarTranslucent prop determines whether your modal should go under the system statusbar.

supportedOrientations iOS ​

The supportedOrientations prop allows the modal to be rotated to any of the specified orientations. On iOS, the modal is still restricted by what's specified in your app's Info.plist's UISupportedInterfaceOrientations field.

When using presentationStyle of pageSheet or formSheet , this property will be ignored by iOS.

transparent ​

The transparent prop determines whether your modal will fill the entire view. Setting this to true will render the modal over a transparent background.

The visible prop determines whether your modal is visible.

• animationType
• hardwareAccelerated Android
• onDismiss iOS
• onOrientationChange iOS
• onRequestClose
• presentationStyle iOS
• statusBarTranslucent Android
• supportedOrientations iOS
• transparent

How to Present a React Native Bottom Sheet

Table of contents.

• Installing the Bottom Sheet library
• Creating a Simple Bottom Sheet with React Native
• Controlling the React Native Bottom Sheet
• Handling Text Input within the Bottom Sheet
• Creating a Shared Bottom Sheet Component
• Bottom Sheet as Modal

© 2024 Galaxies.dev. All rights reserved.

• v4 (Reanimated v2)
• v2 (Reanimated v1)

Bottom Sheet Modal inherits all Bottom Sheet props except for animateOnMount & containerHeight and also it introduces its own props:

Configuration ​

Modal name to help identify the modal for later on.

stackBehavior ​

Available only on v3, for now.

Defines the stack behavior when modal mounts.

• push it will mount the modal on top of current modal.
• replace it will minimize the current modal then mount the modal.

enableDismissOnClose ​

Dismiss the modal when it is closed, this will unmount the modal.

Callbacks ​

Ondismiss ​.

Callback when the modal dismissed (unmounted).

Components ​

Containercomponent ​.

Component to be placed as a bottom sheet container, this is to place the bottom sheet at the very top layer of your application when using FullWindowOverlay from React Native Screens . read more

• stackBehavior
• enableDismissOnClose
• containerComponent

Opening a modal

A modal displays content that temporarily blocks interactions with the main view.

A modal is like a popup — it usually has a different transition animation, and is intended to focus on one particular interaction or piece of content.

Creating a stack with modal screens ​

Here, we are creating 2 groups of screens using the RootStack.Group component. The first group is for our regular screens, and the second group is for our modal screens. For the modal group, we have specified presentation: 'modal' in screenOptions . This will apply this option to all the screens inside the group. This option will change the animation for the screens to animate from bottom-to-top rather than right to left. The presentation option for stack navigator can be either card (default) or modal . The modal behavior slides the screen in from the bottom and allows the user to swipe down from the top to dismiss it on iOS.

Instead of specifying this option for a group, it's also possible to specify it for a single screen using the options prop on RootStack.Screen .

• To change the type of transition on a stack navigator you can use the presentation option.
• When presentation is set to modal , the screens behave like a modal, i.e. they have a bottom to top transition and may show part of the previous screen in the background.
• Setting presentation: 'modal' on a group makes all the screens in the group modals, so to use non-modal transitions on other screens, we add another group with the default configuration.

Best practices ​

Since modals are intended to be on top of other content, there are a couple of things to keep in mind when using modals:

• Avoid nesting them inside other navigators like tab or drawer. Modal screens should be defined as part of the root stack.
• Modal screens should be the last in the stack - avoid pushing regular screens on top of modals.
• The first screen in a stack appears as a regular screen even if configured as a modal, since there is no screen before it to show behind. So always make sure that modal screens are pushed on top of a regular screen or another modal screen.
• Creating a stack with modal screens
• Best practices

Edit this page

Learn how to use modals in Expo Router.

Modals are a common user interface pattern in mobile apps. They are used to present content on top of the existing screen and is used for different purposes, such as displaying confirmation alerts or standalone forms. You can create modals in your app using the following methods:

• Use Expo Router's special file-based syntax to create a modal screen within the app's navigation system.

Each approach has its specific use case. Understanding when to use each method is important for creating a positive user experience.

React Native's Modal component

• Standalone interactions, such as self-contained tasks that don't need to be part of the navigation system.
• Temporary alerts or confirmation dialogs that are ideal for quick interactions.

Modal screen using Expo Router

Below is an example of how a modal screen works on different platforms:

Modal presentation and dismiss behavior

A modal loses its previous context when it is the current screen in the navigator and is presented as a standalone screen. Its presentation and dismissal behavior are different on each platform:

• On Android, the modal slides on top of the current screen. To dismiss it, use the back button to navigate back to the previous screen.
• On iOS, the modal slides from the bottom of the current screen. To dismiss it, swipe it down from the top.

Change status bar appearance on iOS

Additional information, presentation options.

Sheets on the Go with React Native

React Native is a mobile app framework. It builds iOS and Android apps that use JavaScript for describing layouts and events.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses React Native and SheetJS to process and generate spreadsheets. We'll explore how to load SheetJS in a React Native app in a few ways:

• "Fetching Remote Data" uses the built-in fetch to download and parse remote workbook files.
• "Local Files" uses native libraries to read and write files on the device.

The "Local Files" example creates an app that looks like the screenshots below:

Before testing this demo, follow the official React Native CLI Guide! 1

Follow the instructions for iOS (requires macOS) and for Android. They will cover installation and system configuration. You should be able to build and run a sample app in the Android and the iOS (if applicable) simulators.

Integration Details ​

The SheetJS NodeJS Module can be imported from any component or script in the app.

Internal State ​

For simplicity, this demo uses an "Array of Arrays" 2 as the internal state.

Each array within the structure corresponds to one row.

This demo also keeps track of the column widths as a single array of numbers. The widths are used by the display component.

Complete State

The complete state is initialized with the following snippet:

Updating State ​

Starting from a SheetJS worksheet object, sheet_to_json 3 with the header option can generate an array of arrays:

Calculating Column Widths

Column widths can be calculated by walking each column and calculating the max data width. Using the array of arrays:

Exporting State ​

aoa_to_sheet 4 builds a SheetJS worksheet object from the array of arrays:

Displaying Data ​

The demos uses react-native-table-component to display the first worksheet.

The demos use components similar to the example below:

data.slice(1) in the Rows component returns data starting from the second row. This neatly skips the first header row.

Fetching Remote Data ​

React Native versions starting from 0.72.0 5 support binary data in fetch .

This snippet downloads and parses https://docs.sheetjs.com/pres.xlsx :

Fetch Demo ​

This demo was tested in the following environments:

Real Devices

• Install React Native dependencies

On the Steam Deck, JDK17 was installed using pacman :

The Android Studio tarball was downloaded and extracted. After extracting:

In Android Studio, select "SDK Manager" and switch to the "SDK Tools" tab. Check "Show Package Details" and install "Android SDK Command-line Tools (latest)".

When this demo was last tested, the following environment variables were used:

• Create project:
• Install shared dependencies:
• Download App.tsx and replace:

Android Testing

Install or switch to Java 17 6

• Start the Android emulator:

On Linux, the command may silently stall. It is strongly recommended to launch the interactive CLI tool:

Once the dev server is ready, the terminal will display a few options. Press a to run on Android.

If the initial launch fails with an error referencing the emulator, manually start the emulator from Android Studio and try again.

Gradle errors typically stem from a Java version mismatch:

This error can be resolved by installing and switching to the requested version.

When this demo was last tested on Linux, the process failed to launch the emulator:

warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.

This is a known bug in React Native!

If an emulator is installed, run the following command:

Under Android , there will be one error:

Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device.

Press f and a list of available emulators will be shown. Select the emulator (typically the last line) and press Enter.

✔ Select the device / emulator you want to use › Emulator Pixel_3a_API_34_extension_level_7_x86_64 (disconnected)

The text in green is the name of the virtual device ( Pixel_3a_API_34_extension_level_7_x86_64 in this example). Run the following command to manually start the emulator:

(replace Pixel_3a_API_34_extension_level_7_x86_64 with the name of the virtual device)

To confirm React Native detects the emulator, run the following command again:

• When opened, the app should look like the "Before" screenshot below. After tapping "Import data from a spreadsheet", verify that the app shows new data:

iOS Testing

iOS testing can only be performed on Apple hardware running macOS!

Xcode and iOS simulators are not available on Windows or Linux.

• Refresh iOS project by running pod install from the ios subfolder:
• Start the iOS emulator:

Android Device Testing

• Connect an Android device using a USB cable.

If the device asks to allow USB debugging, tap "Allow".

Close any Android / iOS emulators.

• Build APK and run on device:

iOS Device Testing

• Connect an iOS device using a USB cable.

If the device asks to trust the computer, tap "Trust" and enter the passcode.

Enable developer code signing certificates 7 .

These instructions were verified against Xcode 15.3.

A) Open the included iOS workspace in Xcode:

B) Select "SheetJSRNFetch" in the Project Navigator:

C) Select "Signing & Capabilities" in the main view.

D) Select "All" in the lower bar and ensure a Team is selected in the dropdown:

Install ios-deploy through Homebrew:

• Run on device:

In some tests, the app failed to run on the device due to "Untrusted Developer":

These instructions were verified against iOS 15.1.

A) Open the Settings app and select "General" > "VPN & Device Management".

B) Select the Apple Development certificate under "Developer App".

In the new screen, the name "SheetJSRNFetch" will be displayed in the Apps list.

C) Tap "Trust ..." and tap "Trust" in the popup.

D) Close the Settings app on the device.

E) Close the Metro window on the computer.

F) Run npx react-native run-ios again.

In some tests, the build failed with the following error:

This was due to an error in the react-native package. The script node_modules/react-native/scripts/react-native-xcode.sh must be edited.

Near the top of the script, there will be a set statement:

The -e argument must be removed:

In some test runs, the error mentioned a development team:

Code signing must be enabled in the project!

By default, React Native generates applications that exclusively target iPhone. On a physical iPad, a pixellated iPhone app will be run.

The "targeted device families" setting must be changed to support iPad:

A) Open the Xcode workspace:

B) Select the project in the left sidebar:

C) Select the "SheetJSRNFetch" target in the sidebar.

D) Select the "Build Settings" tab in the main area.

E) In the search bar below "Build Settings", type "tar"

F) In the "Targeted Device Families" row, change the value to "iPhone, iPad".

In some test runs, the build failed with a Provisioning message:

This was resolved by manually selecting the target device:

C) In the top bar, next to the project name, there will be a gray device icon. Click on the icon and select the real device from the list.

Local Files ​

React Native does not provide a native file picker or a method for reading and writing data from documents on the devices. A third-party library must be used.

Since React Native internals change between releases, libraries may only work with specific versions of React Native. Project documentation should be consulted before picking a library.

The following table lists tested file plugins. "OS" lists tested platforms ("A" for Android and "I" for iOS).

App Configuration ​

Due to privacy concerns, apps must request file access. There are special APIs for accessing data and are subject to change in future platform versions.

iOS applications typically require two special settings in Info.plist :

UIFileSharingEnabled 8 allows users to use files written by the app. A special folder will appear in the "Files" app.

LSSupportsOpeningDocumentsInPlace 9 allows the app to open files without creating a local copy.

Both settings must be set to true :

Once the options are set, generated files are visible to users and can be shared with other apps including "Mail", "Messages", and "Numbers".

Permissions and APIs have evolved over time. For broadest compatibility, the following permissions must be enabled in AndroidManifest.xml :

READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE allow apps to access files outside of the app scope. These are required for scoped storage access.

android:requestLegacyExternalStorage="true" enabled legacy behavior in some older releases.

The manifest is saved to android/app/src/main/AndroidManifest.xml :

Depending on the Android API level, there are three strategies for writing files:

In "legacy" mode (supported in API levels up to 29), files can be written to the user Downloads or Documents folder directly.

Using the MediaStore API, files should be copied to a visible location.

Using the "Storage Access Framework", the user grants access to a folder and the app uses SAF APIs to create files and write data.

RN File Picker ​

The "File Picker" library handles two platform-specific steps:

Show a view that allows users to select a file from their device

Copy the selected file to a location that can be read by the application

The following libraries have been tested:

react-native-document-picker ​

react-native-document-picker provides a pickSingle method for users to select one file.

The file plugins generally require the copyTo: "cachesDirectory" option:

expo-document-picker ​

expo-document-picker is a picker that works with other modules in the Expo ecosystem.

The getDocumentAsync method allows users to select a file. The Expo file plugin requires the copyToCacheDirectory option:

RN File Plugins ​

React-native-blob-util ​.

react-native-blob-util is the continuation of other libraries that date back to 2016.

The ascii type returns an array of numbers corresponding to the raw bytes. A Uint8Array from the data is compatible with the buffer type.

Reading Data

On iOS, the URI from react-native-document-picker must be massaged:

Writing Data

Sharing Files in Android

copyToMediaStore uses the MediaStore API to share files.

The file must be written to the device before using the MediaStore API!

react-native-file-access ​

react-native-file-access is a filesystem API that uses modern iOS and Android development patterns.

The base64 encoding returns strings compatible with the base64 type:

cpExternal uses the MediaStore API to share files.

expo-file-system ​

expo-file-system is a filesystem API that works with other modules in the Expo ecosystem.

Some Expo APIs return URI that cannot be read with expo-file-system . This will manifest as an error:

Unsupported scheme for location '...'

The expo-document-picker snippet makes a local copy.

The EncodingType.Base64 encoding is compatible with base64 type.

Calling FileSystem.readAsStringAsync with FileSystem.EncodingType.Base64 encoding returns a promise resolving to a string compatible with base64 type:

The FileSystem.EncodingType.Base64 encoding accepts Base64 strings:

StorageAccessFramework uses the "Storage Access Framework" to share files.

SAF API methods must be used to request permissions, make files and write data:

There are many moving parts and pitfalls with React Native apps. It is strongly recommended to follow the official React Native tutorials for iOS and Android before approaching this demo. 10 Details including Android Virtual Device configuration are not covered here.

This example tries to separate the library-specific functions.

Project Setup

On macOS, if prompted to install CocoaPods , press y .

• Download index.js and replace:

The app should look like the following screenshot:

When this demo was last tested on Windows, the build failed with an error:

Java 17 must be installed 11 and the JAVA_HOME environment variable must point to the Java 17 location.

Stop the dev server and close the React Native Metro NodeJS window.

File Integration

• Pick a filesystem library for integration:

Install react-native-blob-util dependency:

Add the highlighted lines to index.js :

Install react-native-file-access dependency:

Install expo-file-system and expo-document-picker dependencies:

In the most recent test, the installation asked a few questions.

If prompted to change iOS deployment target, choose Yes.

If prompted to install Expo CLI integration, choose No.

• Restart the Android development process:

The following app will be shown:

When this demo was last tested on macOS, the process failed to launch the emulator:

✔ Select the device / emulator you want to use › Emulator Pixel_3a_API_34 (disconnected)

The text in green is the name of the virtual device ( Pixel_3a_API_34 in this example). Run the following command to manually start the emulator:

(replace Pixel_3a_API_34 with the name of the virtual device)

Download https://docs.sheetjs.com/pres.numbers and open the Downloads folder.

Click and drag pres.numbers from the Downloads folder into the simulator.

Click "Import data" and look for pres.numbers .

If the file is not displayed, click the ≡ icon and click "Downloads".

• Select pres.numbers .

The screen should refresh with new contents:

• Click "Export data".

expo-file-system on Android will prompt to grant access to a folder.

Tap the ≡ icon and tap the "Documents" folder with the download icon.

Tap the 'ALLOW ACCESS TO "DOCUMENTS"' button.

In the "Allow access" pop, tap "ALLOW".

An alert will display the location to the file:

• Pull the file from the simulator and verify the contents:

PowerShell mangles binary data in the redirect.

On Windows, the following commands must be run in the Command Prompt:

Scroll down to "Android Device Testing" for device tests.

• Start the iOS development process:

In the simulator, click the Home icon to return to the home screen.

Click on the "Files" icon to open the app.

Make sure "On My iPhone" is highlighted and select "Save".

Click the Home icon again then select the SheetJSRN app.

Click "Import data" and select pres :

Once selected, the screen should refresh with new contents:

• Find the file and verify the contents are correct:

Once testing is complete, stop the simulator and the development process.

• Add the highlighted lines to android/app/src/main/AndroidManifest.xml :

There will be two new uses-permission tags within the parent manifest tag. The attribute android:requestLegacyExternalStorage="true" must be added to the application tag.

• Close any Android / iOS simulators.

Download https://docs.sheetjs.com/pres.numbers on the device.

Switch back to the "SheetJSRN" app.

Tap "Import data" and tap pres.numbers .

If the file is not displayed, tap the ≡ icon and tap "Downloads".

The table will refresh with data from the file.

• Tap "Export Data".

Tap "OK" in the exportFile popup.

• Switch to the Files app and navigate to the Downloads folder.

When testing expo-file-system , select "Documents".

There will be a new file sheetjsw.xlsx .

Close and reopen the "SheetJSRN" app. The data will reset.

Tap "Import data" and tap sheetjsw.xlsx .

The table will refresh with the data from the exported file.

Enable file sharing and make the documents folder visible in the iOS app. Add the following lines to ios/SheetJSRN/Info.plist :

(The root element of the document is plist and it contains one dict child)

Enable developer code signing certificates. More details are covered in the "iOS Device Testing" part of the Fetch Demo (step 15).

If the build fails, some troubleshooting notes are included in the "iOS Device Testing" part of the Fetch Demo (step 17).

Tap "Import data" and tap pres from the Recents list.

Tap "Export Data" and tap "OK" in the exportFile popup.

Install the "Numbers" app from the iOS App Store.

Open the "Files" app. Repeatedly tap the < button in the top-left corner to return to the "Browse" view.

Tap "On My iPhone" or "On My iPad". Tap "SheetJSRN" in the list.

The sheetjsw entry in this folder is the generated file.

Hold down the sheetjsw item until the menu appears. Select "Share".

In the sharing menu, below a list of contacts, there will be a row of app icons. Swipe left until the "Numbers" app icon appears and tap the app icon.

The Numbers app will load the spreadsheet, confirming that the file is valid.

Footnotes ​

Follow the "React Native CLI Quickstart" and select the appropriate "Development OS". ↩

See "Array of Arrays" in the API reference ↩

See "Array Output" in "Utility Functions" ↩

See "Array of Arrays Input" in "Utility Functions" ↩

React-Native commit 5b597b5 added the final piece required for fetch support. It is available in official releases starting from 0.72.0 . ↩

When the demo was last tested, the Temurin distribution of Java 17 was installed through the macOS Brew package manager by running brew install temurin17 . Direct downloads are available at adoptium.net ↩

See "Running On Device" in the React Native documentation ↩

See UIFileSharingEnabled in the Apple Developer Documentation. ↩

See LSSupportsOpeningDocumentsInPlace in the Apple Developer Documentation. ↩

Follow the "React Native CLI Quickstart" for Android (and iOS, if applicable) ↩

See the JDK Archive for Java 17 JDK download links. ↩

• Internal State
• Displaying Data
• App Configuration
• RN File Picker
• RN File Plugins

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IOS Modal Presentation Style. #1226

arunabhverma commented Dec 12, 2022 • edited Loading

• 👍 1 reaction

github-actions bot commented Dec 12, 2022

Sorry, something went wrong.

nrwinner commented Dec 21, 2022

• 👍 2 reactions

github-actions bot commented Jan 21, 2023

github-actions bot commented Jan 26, 2023

arunabhverma commented Feb 1, 2023 • edited Loading

nrwinner commented Feb 1, 2023

• ❤️ 1 reaction

No branches or pull requests

react-native-actions-sheet

• 0 Dependencies
• 51 Dependents
• 113 Versions

Installation

Check out the installation section of our docs for the detailed installation instructions.

Documentation

Check out our dedicated documentation page for info about this library, it's features, API reference and more: https://rnas.vercel.app

Migrating from v0.7.0

The new version of ActionSheet introduces some breaking changes . Please read through the migration guide and take the necessary steps.

The source code for the example (showcase) app is under the example/ directory. If you want to play with the ActionSheet but don't feel like trying it on a real app, you can run the example snack .

Documentation for v0.7.0 & older

You can find the docs in v0.7.0 branch

Consider supporting with a ⭐️ star on GitHub

If you are using the library in one of your projects, consider supporting with a star. It takes a lot of time and effort to keep this maintained and address issues and bugs. Thank you.

MIT Licensed

• bottom-animated
• react-native
• actionsheet
• action-sheet
• bottom-sheet
• bottom-drawer
• raw-bottom-sheet
• bottom-app-bar
• react-native-action-sheet

Package Sidebar

npm i react-native-actions-sheet

Git github.com/ammarahm-ed/react-native-actions-sheet

github.com/ammarahm-ed/react-native-actions-sheet

Downloads Weekly Downloads

Unpacked size, total files, last publish.

a month ago

Collaborators

Introduction to React Native

Print Cheatsheet

Expo provides a CLI tool as the primary interface for developers to start writing code for a project.

“Expo Go” is a development client for Android and iOS that can load the JS part of the project. This allows you to preview your app in development.

Uses of React Native

React Native is an open-source framework for building Android and iOS applications. You can use JavaScript to access your app platform’s APIs as well as to describe the UI using React components.

Native Components

Native components are platform-backed components. These components are invoked with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views.

React Native and Expo

In React Native, the provided framework requires a basic knowledge of Xcode and Android Studio to build apps. Expo is a framework of tools and services for React Native that focuses on letting you build apps without Xcode and Android Studio.

JS and UI Threads

The JS thread executes the bundled JavaScript code, which then sends actions or requests to the UI thread .

Core vs. Native Components

Each core component is implemented using its respective native component counterpart. Because native components are platform-specific, they could look different when rendered on different platforms.

Entry Point

All functionality of the React Native app must be included in a single React component, exported as default from the entry point file.

You can import different packages to gain access to different native APIs or functionality.

The Expo SDK is a collection of packages that allows access to some of the most-used APIs for all apps.

“Expo Snack” is a web-based playground that allows you to write and run React Native apps in the browser.

Benefits and Drawbacks

Expo and React Native are ideal tools when you need (i) to run an app on multiple platforms, (ii) direct access to native functionality, and/or (iii) only have basic web development and native platform understanding.

Expo and React Native aren’t ideal tools when you need (i) absolute performance, (ii) cutting edge features which are just released by the platform, and/or (iii) complex and big applications.

Native Code

“Native code” are instructions for how to operate the React Native framework on each platform, such as iOS and Android.

Learn More on Codecademy

Learn react native.

• Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers
• Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand
• OverflowAI GenAI features for Teams
• OverflowAPI Train & fine-tune LLMs
• Labs The future of collective knowledge sharing
• About the company Visit the blog

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Get early access and see previews of new features.

Is there a way to have a screen with snap points(presentation: "modal") in react native navigation?

I want to have a scrollable (with snap points) react native navigation stack screen(presentation: "modal") in my app. I don't want anything like "react-native-modal" library or official Modal from react native library. I want an actual screen with modal behaviour and I can achieve that with presentation: "modal" property but I want it to have snap points. Perfect example would be the iOS fitness app. So this is the screen when you initially press upload button. As you can see it takes maybe 40% - 50% height of the screen

If you scroll down height expands and it acts as ordinary screen with presentation: "modal"

And lastly if you scroll back up it springs back to its original position and it acts as a modal(no gap at the top of the screen as in second image) That is the behaviour I am looking for. If it is possible I would like to get similar behaviour on android as well.

I tried to implement that behaviour with "react-native-modal" and official Modal from "react-native" components but I want to have it as a separate screen. I also want it to feel "native like" and with these stuff it doesn't feel that way.

• react-native
• react-native-navigation
• react-native-modal

You may try this library react-native-simple-bottom-sheet

• Thanks for the answer, for now I am already using bottom sheet but that is going to be my last option since that still doesn't have the behaviour Im looking for. –  mmorosavljevic Commented Nov 21, 2022 at 13:08
• You can use sliderMinHeight and sliderMaxHeight prop. –  Asmeeta Rathod Commented Nov 21, 2022 at 13:19
• I know but it still doesn't act as a screen and it also doesn't feel native like regular screen with presentation: "modal" does. I need seperate screen because I want to forward some props to it and then afterwards render some stuff after the screen is opened. As far as I know with any kind of modal components that is not possible. I would like the exact same behaviour as in pictures I posted. –  mmorosavljevic Commented Nov 21, 2022 at 17:03
• You can make custom component and pass the props from the outside, You can try this library link It has snapPoints also. –  Asmeeta Rathod Commented Nov 22, 2022 at 4:44
• I know I am doing that currently, but that is not the behaviour I am looking for. It is still not separate screen, it does not feel native and doesn't matter that it is custom component it still renders at the same time as when the parent component does. –  mmorosavljevic Commented Nov 22, 2022 at 8:27

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Sign up or log in

Post as a guest.

Required, but never shown

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy .

Not the answer you're looking for? Browse other questions tagged react-native expo react-native-navigation react-native-modal or ask your own question .

• The Overflow Blog
• One of the best ways to get value for AI coding tools: generating tests
• The world’s largest open-source business has plans for enhancing LLMs
• Featured on Meta
• User activation: Learnings and opportunities
• Site maintenance - Mon, Sept 16 2024, 21:00 UTC to Tue, Sept 17 2024, 2:00...
• What does a new user need in a homepage experience on Stack Overflow?
• Announcing the new Staging Ground Reviewer Stats Widget

Hot Network Questions

• Why does counterattacking lead to a more drawish and less dynamic position than defending？
• How did people know that the war against the mimics was over?
• How frequently is random number generated when plotting function containing RandomReal?
• How did NASA figure out when and where the Apollo capsule would touch down on the ocean?
• How to prevent a bash script from running repeatedly at the start of the terminal
• Place with signs in Chinese & Arabic
• What is the oldest open math problem outside of number theory?
• How to deal with coauthors who just do a lot of unnecessary work and exploration to be seen as hard-working and grab authorship?
• Why does a capacitor act as an open circuit under a DC circuit?
• security concerns of executing mariadb-dump with password over ssh
• Is a thing just a class with only one member?
• Fast leap year check
• Сhanging borders of shared polygon shapefile features in QGIS
• How to avoid bringing paper silverfish home from a vacation place?
• For a bike with "Forged alloy crank with 44T compact disc chainring", can the chainring be removed?
• When I use \llap to overlap words, the space between the overlapped words and the rest of the text is too much: how do I fix it?
• What makes amplifiers so expensive?
• Stuck as a solo dev
• Why did early ASCII have ← and ↑ but not ↓ or →?
• Does SpaceX Starship have significant methane emissions?
• Can landlords require HVAC maintenance in New Mexico?
• In Photoshop, when saving as PNG, why is the size of my output file bigger when I have more invisible layers in the original file?
• Is it really a "space walk" (EVA proper) if you don't get your feet wet (in space)?
• Whom did Jesus' followers accompany -- a soldier or a civilian?