diff --git a/README.md b/README.md index a2f9d842..60a94daa 100644 --- a/README.md +++ b/README.md @@ -2,27 +2,10 @@ This project aims to expose native navigation container components to React Native. It is not designed to be used as a standalone library but rather as a depenedncy of a [full-featured navigation library](https://github.com/react-navigation/react-navigation). -## How can I take advantage of that +## How can I take advantage of that? -Screens are already integrated with the React Native's most popular navigation library [react-navigation](https://github.com/react-navigation/react-navigation) and [Expo](https://expo.io) - -## Usage in Expo with [react-navigation](https://github.com/react-navigation/react-navigation) - -Screens support is built into Expo [SDK 30](https://blog.expo.io/expo-sdk-30-0-0-is-now-available-e64d8b1db2a7) and react-navigation starting from [2.14.0](https://github.com/react-navigation/react-navigation/releases/tag/2.14.0). Make sure your app use these versions before you start. - -1. Add screens library as dependency to your project – you can skip this step when using snack as the dependency will be imported when you import it in one of the JS files -``` -yarn add react-native-screens -``` - -2. Open your App.js file and add the following snippet somewhere near the top of the file (e.g. right after import statements): -``` -import { useScreens } from 'react-native-screens'; - -useScreens(); -``` - -3. That's all 🎉 – enojy faster navigation in your Expo app. Keep in mind screens are in pretty early phase so please report if you discover some issues. +Screens are already integrated with the React Native's most popular navigation library [react-navigation](https://github.com/react-navigation/react-navigation) and [Expo](https://expo.io). +Read usage guide depending on if you are [using Expo](#usage-in-expo-with-react-navigation) or [not](#usage-with-react-navigation-without-expo). ## Usage with [react-navigation](https://github.com/react-navigation/react-navigation) (without Expo) @@ -55,6 +38,24 @@ Note that the above code need to execute before first render of a navigation scr 5. You are all set 🎉 – when screens are enabled in your application code react-navigation will automatically use them instead of relying on plain React Native Views. +## Usage in Expo with [react-navigation](https://github.com/react-navigation/react-navigation) + +Screens support is built into Expo [SDK 30](https://blog.expo.io/expo-sdk-30-0-0-is-now-available-e64d8b1db2a7) and react-navigation starting from [2.14.0](https://github.com/react-navigation/react-navigation/releases/tag/2.14.0). Make sure your app use these versions before you start. + +1. Add screens library as dependency to your project – you can skip this step when using snack as the dependency will be imported when you import it in one of the JS files +``` +yarn add react-native-screens +``` + +2. Open your App.js file and add the following snippet somewhere near the top of the file (e.g. right after import statements): +``` +import { useScreens } from 'react-native-screens'; + +useScreens(); +``` + +3. That's all 🎉 – enojy faster navigation in your Expo app. Keep in mind screens are in pretty early phase so please report if you discover some issues. + ## Guide for navigation library authors If you are building navigation library you may want to use react-native-screens to have a control which parts of the react component tree are attached to the native view hierarchy.