Socket
Socket
Sign inDemoInstall

rn-initapp-typescript-template

Package Overview
Dependencies
0
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

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


Version published
Maintainers
1
Weekly downloads
138
increased by17.95%

Weekly downloads

Readme

Source

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 ).

Screenshot Android 1

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

Screenshot Android 2

IOS
  1. 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 ).

Screenshot 1

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

Screenshot 2

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 ).

Screenshot 3

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 ).

Screenshot 4

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

Screenshot 5

Keywords

FAQs

Last updated on 26 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc