rn-initapp-typescript-template v0.0.8

rn-initapp-typescript-template

React Native Project using Typescript. This Template includes SplashScreen Setup, Custom Statusbar Setup, Custom Header, Custom TextBox , Custom Font Family Setup, Redux Setup, Axios Call Setup, Reanimated for Animations, SVG Setup, Stack navigations, Tab and Custom Drawer Navigations Setup.

In-Built Packages

1. react-native-splash-screen

2. react-native-svg

3. react-native-svg-transformer

4. react-redux

5. redux

6. axios

7. react-native-reanimated

8. react-native-gesture-handler

9. @react-navigation/native

10. react-native-screens

11. react-native-safe-area-context

12. @react-navigation/native-stack

13. @react-navigation/drawer

14. @react-navigation/bottom-tabs

Installation

From NPM

npx react-native init ProjectName --template rn-initapp-typescript-template

From Github

npx react-native init ProjectName --template https://github.com/senthalan2/rn-initapp-typescript-template.git

Steps after Project Initialization

1. Set SplashScreen Image

Android

1. Go to android/app/src/main/res/drawable, put splash image (.png) in this directory and named it as launch_screen ( Refer below Image ).

   

2. Change code in android/app/src/main/res/layout/launch_screen.xml file.

   

   IOS

3. Open XCode, Under your Project, Select Images and Select splash_image. Create three different sizes of your image (@1x, @2x, @3x) and add the images by dragging them into the slots for 1x, 2x, 3x ( shown in below image ).

   

4. To change Background Color, Select LaunchScreen Select View under View and choose background Color ( shown in below image).

   

   2. Set Custom Fonts

   Drop the custom font family files (.ttf) into the assets/fonts directory under your project root directory ( shown in below image ).

   

   After the above step, run the below command to link the assets with android and ios.

   npx react-native link

   Custom Fonts Setup Completed. Run your project.

   Usage of Custom Font Families

   Add the Font family name in Src/Utilities/GlobalFonts.js ( Refer below image ).

   

   Import and Use the fonts wherever you want. ( Refer below image ).