- Clone this repository
git clone https://github.com/Alex-DG/react-native-learning-demo.git - Open your terminal, type
yarnin the project root folder to install all the dependencies
- On iOS, to complete the linking of
react-navigation, make sure you have Cocoapods installed. Then run:
cd ios
pod install
cd ..
- On Android, it shouldn't need any more steps.
- Type
yarn startto start the bundler - In a separate terminal window type
yarn iosoryarn androidto start this app.
/!\ If you have any problems with react-navigation dependencies, have a look to Getting starting with react-navigation > React Native 0.60 and higher
npx react-native init myAppName --template react-native-template-typescript
See React-Native official documentation for more information Getting Started or go to their Github repository.
If you want to know more about npx: What is npx?.
-
What is TS and why using it in your project?
TypeScript is a superset of the JavaScript language that has a single open-source compiler and is developed mainly by a single vendor: Microsoft. The goal of TypeScript is to help catch mistakes early through a type system and to make JavaScript development more efficient.source: Stackoverflow - Lodewijk's answer. -
How to configure TS? See doc: Using TypeScript with React-Native.
- Common pattern is to pass a style through the style props of each of you react-native component and using React-Native StyleSheet
- Alternative: Styled-component
- Why I like using styled-components in react-native apps?
The most popular choice for handling navigation in a React Native app.
I've shown you a very basic first approach about how to structure your react-native app. There is no universal rules here an alternative organisation of your files which goes further if you are interested by learning more about this topic: