React Native Template With NativeBase
Usage
npx react-native init SomeApp --template https://github.com/anirudh-antino/RNTemplate.git
Note on the legacy CLI
There seems to be quite some confusion about the legacy CLI. This template only works with the new CLI. Make sure you have uninstalled the legacy react-native-cli
first (npm uninstall -g react-native-cli
), for the below command to work. If you wish to not use npx
, you can also install the new CLI globally (npm i -g @react-native-community/cli
or yarn global add @react-native-community/cli
).
Further information can be found here: https://github.com/react-native-community/cli#about
What's inside
- UI/UX Design components from NativeBase
- Redux, Redux Toolkit for state management
- React Navigation for simple navigation also includes custom bottom tab
- Performant, flexible and extensible forms with easy-to-use validation using React Hook Form
- Yup to build schema for value parsing and validation
- Includes example screens. On Boarding, Authentication with mobile / otp and a Form screen.
- Includes Vector Icons. Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project.
How to customize theme
- Just navigate to
PROJECT-DIRECTORY/src/theme/customeTheme.js
and make the desired changes.example file - You can change colors, fonts, initial color mode(dark/light) etc.
- see more theme options
How to add fonts
- Download font family from here
- Navigate to
PROJECT-DIRECTORY/src/assets/fonts
and unzip all fonts here - Then navigate to
PROJECT-DIRECTORY/src/theme/customeTheme.js
and add/change fonts and fontConfig.
fonts: {
heading: 'Inter',
body: 'Inter',
mono: 'Inter',
},
fontConfig: {
Inter: {
100: {
normal: 'Inter-Thin',
},
200: {
normal: 'Inter-ExtraLight',
},
300: {
normal: 'Inter-Light',
},
400: {
normal: 'Inter-Regular',
},
500: {
normal: 'Inter-Medium',
},
600: {
normal: 'Inter-SemiBold',
},
700: {
normal: 'Inter-Bold',
},
800: {
normal: 'Inter-ExtraBold',
},
900: {
normal: 'Inter-Black',
},
},
}
- Then run
npx react-native link
oryarn react-native link
- Refer here for more