Last active
December 16, 2021 22:54
-
-
Save AlexLMCode/b7c25c2d7c8d48250a722b8deb41dd09 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
npx react-native init AwesomeTSProject --template react-native-template-typescript | |
npm install @react-navigation/native | |
npm install react-native-screens react-native-safe-area-context | |
Edit MainActivity.java file which is located in android/app/src/main/java/<your package name>/MainActivity.java. | |
@Override | |
protected void onCreate(Bundle savedInstanceState) { | |
super.onCreate(null); | |
} | |
and make sure to add an import statement at the top of this file: | |
import android.os.Bundle; | |
Then install the gesture handler: | |
npm install react-native-gesture-handler | |
Add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js: | |
import 'react-native-gesture-handler'; | |
Optionally, you can also install @react-native-masked-view/masked-view. This is needed if you want to use UIKit style animations for the header (HeaderStyleInterpolators.forUIKit). | |
npm install @react-native-masked-view/masked-view | |
Now, we need to wrap the whole app in NavigationContainer. Usually you'd do this in your entry file, such as index.js or App.js: | |
import * as React from 'react'; | |
import { NavigationContainer } from '@react-navigation/native'; | |
export default function App() { | |
return ( | |
<NavigationContainer>{/* Rest of your app code */}</NavigationContainer> | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment