React Native TypeScript Boilerplate
by The WuuD Team®

🚀 Installation

You can simply clone the project and start with your new awesome project

git clone git@github.com:WuuD-Team/RedhaBoilerplate.git my-app-name

Android local.properties

• Go to Android -> local.properties
• Change the your local android sdk and cmake path

🎁 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

├── App.tsx
├── LICENSE
├── README.md
├── __tests__
|  └── App-test.tsx
├── android
|  ├── app
|  ├── build.gradle
|  ├── gradle
|  ├── gradle.properties
|  ├── gradlew
|  ├── gradlew.bat
|  ├── link-assets-manifest.json
|  ├── local.properties
|  └── settings.gradle
├── app.json
├── babel.config.js
├── index.js
├── ios
|  ├── Podfile
|  ├── Podfile.lock
|  ├── Pods
|  ├── RedhaBoilerplate
|  ├── RedhaBoilerplate-tvOS
|  ├── RedhaBoilerplate-tvOSTests
|  ├── RedhaBoilerplate.xcodeproj
|  ├── RedhaBoilerplate.xcworkspace
|  ├── RedhaBoilerplateTests
|  └── link-assets-manifest.json
├── logbox.js
├── metro.config.js
├── package-lock.json
├── package.json
├── react-native.config.js
├── src
|  ├── assets
|  ├── screens
|  ├── services
|  ├── shared
|  └── utils
└── yarn.lock

🗃 Components

🎨 Styles

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

🚢 Imports

import colors from "@colors";

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

import fonts from "@fonts";

<Text 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
• git init
• yarn || npm i
• npx pod-install (iOS Only)
• yarn start
• yarn ios || yarn android

OR

• npm i && npx pod-install
• yarn start
• yarn ios || yarn 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)

• yarn || npm i
• cd ios && pod install
• yarn start
• yarn ios || yarn android

🤖 Android local.properties (Android Only)

• yarn || 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 .. && yarn start && yarn android

💪 Dev Team

Moh Badjah Lead Backend Developer

Nassim Amokrane Lead Web Developer

Med Redha Lead Mobile Developer

👨‍⚖️ License

The code is available under the MIT license.

Made with 💖 by the WuuD Team® - In Code We Trust -