https://github.com/ashirbadgudu/react-native-typescript-stater
A react native typescript stater project with with all the types of navigation with proper types and folder structure
https://github.com/ashirbadgudu/react-native-typescript-stater
bottom-navigation drawer-navigation hacktoberfest2022 native-base react-native react-navigation react-navigation-v6 typescript
Last synced: 6 months ago
JSON representation
A react native typescript stater project with with all the types of navigation with proper types and folder structure
- Host: GitHub
- URL: https://github.com/ashirbadgudu/react-native-typescript-stater
- Owner: AshirbadGudu
- Created: 2022-05-22T16:38:04.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-02T15:00:36.000Z (over 1 year ago)
- Last Synced: 2024-04-19T07:35:07.541Z (about 1 year ago)
- Topics: bottom-navigation, drawer-navigation, hacktoberfest2022, native-base, react-native, react-navigation, react-navigation-v6, typescript
- Language: TypeScript
- Homepage:
- Size: 3.84 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Typescript Setup
## Setup Navigation
### Install Navigation Packages
```bash
yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
```
### Install Pod for above dependencies
```bash
cd ios && arch -x86_64 pod install
```
### Set up `react-native-screens` by updating `android/app/src/main/java//MainActivity.java` file
```java
import android.os.Bundle;
public class MainActivity extends ReactActivity {
// ...
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(null);
}
// ...
}
```
### Install stack navigation
```bash
yarn add @react-navigation/native-stack
```
### Wrap the navigation with navigation container
```tsx
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
export default function App() {
return (
{/* Rest of your app code */}
);
}
```
### Install Drawer Navigation package & other dependencies
```bash
yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated
cd ios && arch -x86_64 pod install
```
### Setup `react-native-gesture-handler` in `index.js`
```js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import 'react-native-gesture-handler'; // this line add
AppRegistry.registerComponent(appName, () => App);
```
### Settings up `react-native-reanimated/plugin`
```js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'], // this line add
};
```
### Reset the server cache
```bash
yarn start --reset-cache
```
### Install Bottom Navigation package
```bash
yarn add @react-navigation/bottom-tabs
```
### Setup absolute imports
#### Install `babel-plugin-module-resolver`
```bash
yarn add -D babel-plugin-module-resolver
```
#### Update the `babel.config.js` file
```js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src'],
alias: {
'~/assets': './src/assets',
'~/components': './src/components',
'~/components/core': './src/components/core',
'~/components/containers': './src/components/containers',
'~/components/shared': './src/components/shared',
'~/configs': './src/configs',
'~/constant': './src/constant',
'~/hooks': './src/hooks',
'~/routes': './src/routes',
'~/screens': './src/screens',
'~/styles': './src/styles',
'~/types': './src/types',
},
},
],
],
};
```
#### Update `tsconfig.json` file
```json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"~/*": ["*"]
}
}
}
```
### Install lottie animation library
```bash
yarn add lottie-react-native [email protected]
```
### Install Image Picker library
#### Install `react-native-image-crop-picker` library
```bash
yarn add react-native-image-crop-picker
```
#### Update permissions in `AndroidManifest.xml` file for android
```xml
```
#### Update permission in `info.plist` for ios
```plist
NSPhotoLibraryUsageDescription
This app uses the gallery to update photo of your profile
NSCameraUsageDescription
This app uses the camera to take pictures for updating profile photo
```
### Add Custom Font Family To Your Application
#### Create a file named `react-native.config.js`
```js
module.exports = {
project: {
ios: {},
android: {},
},
assets: ['./src/assets/fonts'], // path to the fonts directory
};
```
#### Run the following command to add all the assets to both the platforms
```bash
npx react-native-asset
```
### Install vector icons
#### Install `react-native-vector-icons` and its types
```bash
yarn add react-native-vector-icons
yarn add -D @types/react-native-vector-icons
```
#### For android open `android/app/build.gradle` and add following
```gradle
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
```
#### Update following in `info.plist` for ios
```plist
UIAppFonts
AntDesign.ttf
Entypo.ttf
EvilIcons.ttf
Feather.ttf
FontAwesome.ttf
FontAwesome5_Brands.ttf
FontAwesome5_Regular.ttf
FontAwesome5_Solid.ttf
Foundation.ttf
Ionicons.ttf
MaterialIcons.ttf
MaterialCommunityIcons.ttf
SimpleLineIcons.ttf
Octicons.ttf
Zocial.ttf
Fontisto.ttf
```
#### Install Pod
```bash
cd ios && arch -x86_64 pod install --repo-update && cd ..
```