rn-initapp-typescript-template
v0.0.8
Published
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
Downloads
385
Maintainers
Readme
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
- Go to
android/app/src/main/res/drawable
, put splash image (.png) in this directory and named it aslaunch_screen
( Refer below Image ).
- Change code in
android/app/src/main/res/layout/launch_screen.xml
file.
IOS
- Open XCode, Under your Project, Select
Images
and Selectsplash_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 ).
- To change Background Color, Select
LaunchScreen
SelectView
underView
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 ).