by The WuuD Teamยฎ
React Native TypeScript Boilerplate
๐ 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
- All you need to do is copy-paste the .tff file and run
๐ 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.