rn-initapp-javascript-template
This Template includes SplashScreen, Custom Statusbar, Custom Header, Custom Text Box, Custom Font Family, Redux, Axios, Reanimated for Animations, SVG Setup, Intro Screens Setup, Stack navigations, Tab and Custom Drawer Navigations Setup. Typescript is installed in this template ( optional ).
In-Built Packages
react-native-bootsplash
1.react-native-svg
2.react-native-svg-transformer
3.react-redux
4.redux
5.axios
6.react-native-reanimated
7.react-native-gesture-handler
8.@react-navigation/native
9.react-native-screens
10.react-native-safe-area-context
11.@react-navigation/native-stack
12.@react-navigation/drawer
13.@react-navigation/bottom-tabs
14.Installation
From NPM
npx react-native init ProjectName --template rn-initapp-javascript-template
From Github
npx react-native init ProjectName --template https://github.com/senthalan2/rn-initapp-javascript-template.git
Steps after Project Initialization
1. Set SplashScreen Image
Run Following react-native-bootsplash
Command to generate Splash Image.
npx react-native generate-bootsplash <logoPath> --logo-width=<width> --background-color=<BackgroundColor>
(e.g) npx react-native generate-bootsplash Src/Assets/splash_image.png --logo-width=150 --background-color=FFFFFF
note:background color is optional. Default Background Color is #FFFFFF. We can also run the above command without background-color
.
Refer react-native-bootsplash
Android
In Android, Bootsplash Command generated the all assets required for splashscreen, and this template have bootsplash setup for android. So, No additional steps needed for Android.
IOS
In IOS, needed some additional steps,
- Bootsplash command generated three different sizes (@1x, @2x, @3x) of the Splash Image ( shown in below image ).
- Now Open XCode, Under your Project, select
LaunchScreen
and selectBootSplashLogo
( Splash Image ). In the right panel chooseAttributes Inspector -> View -> Content Mode -> Aspect Fit
. ( Refer Below Image )
-
Go to
Size Inspector
and choose a width and a height that looks good (this will scale to other screen sizes). -
Drag your image into the center of the screen until you see both a horizontal and vertical blue line.
-
After that, under
Autoresizing
change the window with the arrows, make sure, it looks like in the below Image. All outer arrows should be deselected and all inner arrows selected. ( Refer Below Image for Step 3, Step 4 and Step 5 ).
- To change Background Color, select
LaunchScreen
selectView
underView
and choose background Color ( shown in below image).
note: Edit the LaunchScreen as per your need. After edited the LaunchScreen, make sure that the above steps are solved
.
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 ).