CodeBunny786/react-native-typeScript-foodApp

Installation

You can simply clone the project and start with your barebone project

git clone git@github.com:WrathChaos/react-native-typescript-boilerplate.git my-app-name

What's Included?

• Navigation System
  • React Navigation V5
  • React Navigation Helpers
  • Ready to use Stack and Tab Screens with navigation
• Built-in Theme System
  • Colors
  • Fonts
  • Built-in TextWrapper for better Custom Text usage
• Built-in Animated Splash Screen
• Built-in Localization (Multi-Language Support)
• HTTP Network Management
  • Axios
  • API Service with Usage Examples
• Built-in EventEmitter
  • EventBus
• Built-in Local Storage asa MMKV Storage
  • LocalStorage (Instead of AsyncStorage)
• Local Storage Ready to Use Util Functions
• Babel Plugin Module Resolver
  • Fixing the relative path problem
  • Visit .babelrc to ready to use and more customization
• Built-in Custom Font Implementation
  • All you need to do is copy-paste the .tff file and run npx react-native-asset command

Project Structure

├───android
├───ios
├───src
│   ├───screens
│   │   ├───detail
│   │   │   ├───DetailScreen.style.ts
│   │   │   └───DetailScreen.tsx
│   │   ├───home
│   │   │   ├───HomeScreen.style.ts
│   │   │   └───HomeScreen.tsx
│   │   └───search
│   │       ├───SearchScreen.style.ts
│   │       └───SearchScreen.tsx
│   ├───services
│   │   ├───api
│   │   │   ├───api.constant.ts
│   │   │   └───index.ts
│   │   ├───event-emitter
│   │   │   └───index.ts
│   │   ├───models
│   │   │   └───index.ts
│   │   └───navigation
│   │       └───index.tsx
│   ├───shared
│   │   ├───components
│   │   │   └───text-wrapper
│   │   ├───constants
│   │   │   └───index.ts
│   │   ├───localization
│   │   │   └───index.ts
│   │   └───theme
│   │       ├───fonts
│   │       ├───colors.ts
│   │       ├───font-size.ts
│   │       ├───index.ts
│   │       └───theme.ts
│   └───utils
│       ├───local-storage
│       │   └───index.ts
│       └───index.ts
├───.babelrc
├───.buckconfig
├───.eslintrc.js
├───.gitattributes
├───.gitignore
├───.npmignore
├───.prettierrc.js
├───.watchmanconfig
├───App.tsx
├───README.md
├───app.json
├───index.js
├───metro.config.js
├───package-lock.json
├───package.json
├───react-native.config.js
├───tsconfig.json

Components

Styles

• TextWrapper over default Text component
• Colors
• Fonts
• Theme
• Font Size

Imports

Predefined h tags are usable with TextWrapper

import Text from "@shared-components/text-wrapper/Text";

// ? Advanced Usage Example
<Text h3 bold right color="#913400" numberOfLines={1} style={{ margin: 16 }}>
  Heading 3 Bold Right Sided Custom Text
</Text>;

import colors from "@colors";

<Text h1 color={colors.light.primary}>
  Heading 1 with custom color from theme
</Text>;

import fonts from "@fonts";

<Text h5 fontFamily={fonts.helvetica.regular}>
  Heading 1 with custom font usage
</Text>;

import fontSize from "@font-size";

import theme from "@theme";

if you want to call them all at once

import { theme, fonts, colors, spacing, fontSize } from "@shared-styles/index";

Step By Step Guide

Clean-Up & Simple Run

Clean up the files from the example repository and do not forget to install the dependencies

• rm -rf .git README.md
• rm -rf ./assets/RN-Typescript-Boilerplate.gif ./assets/logo.png
• git init
• npm i
• npx pod-install (iOS Only)
• react-native run-ios/android

OR

• npm run clean-up
• npm i && npx pod-install
• react-native run-ios/android

Rename the project: (Thanks to react-native-name)

npx react-native-rename <your-project-name>

With custom Bundle Identifier (Android only. For iOS, please use Xcode)

npx react-native-rename <your-project-name> -b <bundleIdentifier>

Install Pods (iOS Only)

• npm i
• cd ios && pod install
• cd .. && react-native run-ios/android

Android local.properties (Android Only)

• npm i
• cd android && mkdir local.properties
• nano local.properties

Example of MacOS Android SDK Path

Make sure that set your right path of Android SDK

ndk.dir=/Users/your-name/Library/Android/sdk/ndk-bundle
sdk.dir=/Users/your-name/Library/Android/sdk

• cd .. & react-native run-ios/android

Future Plans

• LICENSE
• Better and separated documentation
• MobX State Tree Fork Version
• Write an article about the lib on Medium

Credits

Photo by Lucas Benjamin on Unsplash

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Typescript Boilerplate is available under the MIT license. See the LICENSE file for more info.