1- <img alt =" React Native Pure Boilerplate " src =" https://github.com/WrathChaos/react-native-pure -boilerplate/blob/master/assets/logo.png " width =" 1050 " />
1+ <img alt =" React Native Typescript Boilerplate " src =" https://github.com/WrathChaos/react-native-typescript -boilerplate/blob/master/assets/logo.png " width =" 1050 " />
22
3- [ ![ React Native Pure BoilerPlate ] ( https://img.shields.io/badge/-React%20Native%20pure%20Boilerplate-lightgrey?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-pure -boilerplate )
3+ [ ![ React Native Typescript Boilerplate ] ( https://img.shields.io/badge/-React%20Native%20pure%20Boilerplate-lightgrey?style=for-the-badge )] ( https://github.com/WrathChaos/react-native-typescript -boilerplate )
44
5- [ ![ npm version] ( https://img.shields.io/npm/v/react-native-pure -boilerplate.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/react-native-pure -boilerplate )
6- [ ![ npm] ( https://img.shields.io/npm/dt/react-native-pure -boilerplate.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/react-native-pure -boilerplate )
5+ [ ![ npm version] ( https://img.shields.io/npm/v/react-native-typescript -boilerplate.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/react-native-typescript -boilerplate )
6+ [ ![ npm] ( https://img.shields.io/npm/dt/react-native-typescript -boilerplate.svg?style=for-the-badge )] ( https://www.npmjs.com/package/@freakycoder/react-native-typescript -boilerplate )
77![ Platform - Android and iOS] ( https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge )
88[ ![ License: MIT] ( https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge )] ( https://opensource.org/licenses/MIT )
99[ ![ styled with prettier] ( https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge )] ( https://github.com/prettier/prettier )
1010
1111<p align =" center " >
12- <img alt="React Native Pure Boilerplate"
13- src="assets/RN-Pure -Boilerplate.gif" height="650 " />
12+ <img alt="React Native Typescript Boilerplate"
13+ src="assets/RN-Typescript -Boilerplate.gif" />
1414</p >
1515
1616# Installation
1717
1818You can simply clone the project and start with your barebone project
1919
2020``` sh
21- git clone
[email protected] :WrathChaos/react-native-
pure -boilerplate.git my-app-name
21+ git clone
[email protected] :WrathChaos/react-native-
typescript -boilerplate.git my-app-name
2222```
2323
2424### Clean-Up & Simple Run
2525
2626Clean up the files from the example repository and do not forget to install the dependencies
2727
28- ``` sh
29- rm -rf .git README.md
30- npm i
31- react-native run-ios/android
32- ```
28+ - ` rm -rf .git README.md `
29+ - ` npm i `
30+ - ` npx pod-install ` (iOS Only)
31+ - ` react-native run-ios/android `
3332
3433# What's Included?
3534
36- - React Navigation V5
37- - API Usage Service
38- - Ready to use Styles
39- - Built-in Theme System
40- - Build-in Animated Splash Screen
41- - Local Storage Utils Functions
42- - HTTP Network Management (Axios)
43- - Built-in EventEmitter (EventBus)
44- - Ready to see Stack and Tab Screens with navigation
45- - Babel Plugin Module Resolver to fix the relative path problem (visit .babelrc)
35+ - ** Navigation System**
36+ - React Navigation V5
37+ - React Navigation Helpers
38+ - Ready to use Stack and Tab Screens with navigation
39+ - ** Built-in Theme System**
40+ - Colors
41+ - Fonts
42+ - Built-in TextWrapper for better Custom Text usage
43+ - ** Built-in Animated Splash Screen**
44+ - ** Local Storage Ready to Use Util Functions**
45+ - ** HTTP Network Management**
46+ - Axios
47+ - API Service with Usage Examples
48+ - ** Built-in EventEmitter**
49+ - EventBus
50+ - ** Babel Plugin Module Resolver**
51+ - Fixing the relative path problem
52+ - Visit ` .babelrc ` to ready to use and more customization
53+ - ** Built-in Custom Font Implementation**
54+ - All you need to do is copy-paste the .tff file and run ` npx react-native-asset ` command
4655
4756# Step By Step Guide
4857
@@ -60,15 +69,15 @@ npx react-native-rename <your-project-name> -b <bundleIdentifier>
6069
6170### Install Pods (iOS Only)
6271
63- - npm i
64- - cd ios && pod install
65- - cd .. && react-native run-ios/android
72+ - ` npm i `
73+ - ` cd ios && pod install `
74+ - ` cd .. && react-native run-ios/android `
6675
6776### Android local.properties (Android Only)
6877
69- - npm i
70- - cd android && mkdir local.properties
71- - nano local.properties
78+ - ` npm i `
79+ - ` cd android && mkdir local.properties `
80+ - ` nano local.properties `
7281
7382#### Example of MacOS Android SDK Path
7483
@@ -79,25 +88,45 @@ ndk.dir=/Users/your-name/Library/Android/sdk/ndk-bundle
7988sdk.dir=/Users/your-name/Library/Android/sdk
8089```
8190
82- - cd .. & react-native run-ios/android
91+ - ` cd .. & react-native run-ios/android `
8392
8493# Components
8594
8695## Styles
8796
88- - colors
89- - fonts
90- - theme
91- - font-size
97+ - ** TextWrapper** over default Text component
98+ - Colors
99+ - Fonts
100+ - Theme
101+ - Tont-size
92102
93103## Imports
94104
105+ Predefined ** ` h ` ** tags are usable with TextWrapper
106+
107+ ``` jsx
108+ import Text from " @shared-components/TextWrapper/Text" ;
109+
110+ // ? Advanced Usage Example
111+ < Text h3 bold right color= " #913400" numberOfLines= {1 } style= {{ margin: 16 }}>
112+ Heading 3 Bold Right Sided Custom Text
113+ < / Text > ;
114+ ```
115+
95116``` jsx
96117import colors from " @colors" ;
118+
119+ < Text h1 color= {colors .light .primary }>
120+ Heading 1 with custom color from theme
121+ < / Text > ;
97122```
98123
99124``` jsx
100125import fonts from " @fonts" ;
126+
127+ < Text h5 fontFamily= {fonts .helvetica .regular }>
128+ Heading 1 with custom font usage
129+ < / Text > ;
101130```
102131
103132``` jsx
130159
131160## License
132161
133- React Native Pure Boilerplate is available under the MIT license. See the LICENSE file for more info.
162+ React Native Typescript Boilerplate is available under the MIT license. See the LICENSE file for more info.
0 commit comments