🚀 All-in-one React Native Typescript Boilerplate, Ready to Start 🥳

Home Page: https://freakycoder.com

JavaScript 11.64% Ruby 6.51% Objective-C 6.85% TypeScript 64.35% Objective-C++ 2.42% Shell 0.50% Kotlin 7.72%

react-native react javascript boilerplate front-end development mobile app application

react-native-typescript-boilerplate's Introduction

🥳 Version 4.0.0 is here 😍

We're proudly announce that Version 4.0.0 is here!

Better built-in theming support with React Navigation
Native Splash Screen
New React Native Architecture Ready (RN 0.73+) 🍻
Awesome Theme Support for both Light / Dark Mode 🌙
Latest React and React Native Dependencies 🌟
All Dependencies are Upgraded
New GIF with the Project Example for Theming
Much Better Documentation
Detailed Roadmap

🐶 What's Included?

Typescript
Flipper Ready
Navigation System
- React Navigation 6
- React Navigation Helpers
- Ready to use Stack and Tab Screens with navigation
NEW: Built-in Theme System with Hooks
- ☀️ Light Theme Support
- 🌙 Dark Theme Support
- Dynamic Color Palette System
- Custom Font Support
- Built-in Better Text Component
Ready to use React Native Reanimated 2 Integration
Native Splash Screen Integration
- React Native Splash Screen
Awesome React Native Helpers Integration
- Noth Detection Support
- Better Dimension Helper (Ex: ScreenWidth, ScreenHeight)
- Cool Text Helpers
React Native Vector Icons
- React Native Vector Icons
- React Native Dynamic Vector Icons
Localization (Multi-Language Support)
HTTP Network Management
- Axios
- Axios Hooks
- API Service with Usage Examples
Built-in EventEmitter
- EventBus
Babel Plugin Module Resolver
- Fixing the relative path problem
- Visit .babelrc to ready to use and more customization
Pre-commit Husky Integration
- Ready to command husky setup with npm run husky:setup
- commitlint Integration for better commit linter
- Auto prettier on pre-commit
- Awesome ESLint Integration
Built-in Custom Font Implementation
- All you need to do is copy-paste the .tff files into assets/fonts folder
- Run npx react-native-asset command
More and more! :)

🚀 Getting Started

Quick Start

To create a new project using the barebone boilerplate:

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

🎯 Step By Step Guide

Clean-Up & Simple Run

Clean up the files from the example repository and do not forget to install the dependencies There is a good example by default on HomeScreen. You can delete the all screens.

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

rm -rf .git README.md
rm -rf ./assets
npm i
npm run husky:setup
npx pod-install (iOS Only)
react-native run-ios/android

Husky Integration

Before doing anything else, please simply run the command to initalize the husky. If you do not run clean-up part you should run the husky setup by yourself

npm run husky:setup

husky:setup will handle the initialization, installation and ready to use commitlint, prettier and eslint.

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

MacOS / Linux

Replace your machine name instead of username

sdk.dir=/Users/username/Library/Android/sdk

Windows

Replace your machine name instead of username

sdk.dir=/Users/username/Library/Android/sdk

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

📃 Documentations

🔮 Roadmap

Credits

Photo by Shifaaz shamoon on Unsplash

Photo by Jamie Street on Unsplash

Author

FreakyCoder, [email protected]

License

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

react-native-typescript-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

kojongdev nikitakulish girish54321 jckw afrknchld vindru kylenelson94 elencho emmanuel-umeh dpdog infano2100 sedind py-foundation-group-sa pyfundation parrot1999 zmedalex eddyso05 bharathnallamothu dsigitoff celebitolga symmacoin hknakn react-native-awesom codeddave hanif-ibadurrahman florisherman ohmygaugh-crypto riki1200 statnyk evelyngyx robertflan roy-buhay nishadthajudeen001 vjdroider atologistdipak imavipatel ne18070 sunnyshoukat shayanea jerfranco-deloitte medredha longhai97 ox18 ohgoonyoung bony1820 dheerendra94140 gizemkayarr wesleysaraujo hocsinhyeukem hellintonklein tidalcreek istanbulbekle wa34992 curatesome ilyaatrakhimenok vaporjawn jojojoseph11 supermanboss araujrafael peercoinfinance stantoxt shan0396 manikangkan xyztlp code-dio ozgurabd ammar-knowledge nitinsinghelegant junaid-shirur anhunghezo uygnis ahsanmunyr taetaeo sheldonfernandes linuxul nico-martinucci larajihed prowlee sosotess93 luizhgodoy david-lafontant sajalbasak

react-native-typescript-boilerplate's Issues

whenever run npx react-native run-android show error in mainActivity

                 Error: AppData\Local\Android\Sdk\emulator\emulator\platform-tools\adb shell am start -n 
                          com.rntypescriptboilerplate/com.rntypescriptboilerplate.MainActivity
                          at makeError (E:\Project\React-native\react-native-typescript-boilerplate\node_modules\execa\index.js:174:9)

I have to open the app manually.

Why not react 18?

Sir, i think your boilerplate is out of date. you should switch react 18 and react native 0.69

Error: Unable to resolve module ./index.android

Error: Unable to resolve module ./index.android when run yarn android in V3

dyld: Library not loaded: /usr/lib/swift/libswiftWebKit.dylib

When I run app with iOS 13, app crash

error while building android

Hi I get the following error when I npm run android:

Where:
Script 'D:\dev\users\amirhf\projects\test2\node_modules@react-native-community\cli-platform-android\native_modules.gradle' line: 450
What went wrong:
A problem occurred evaluating script.

Calling [node, D:\dev\users\amirhf\projects\test2\node_modules\@react-native-community\cli\build\bin.js, config] finished with an exception. Error message: groovy.json.JsonException: Unable to determine the current character, it is not a string, number, array, or object

The current character read is 'i' with an int value of 105
Unable to determine the current character, it is not a string, number, array, or object
line number 1
index number 0
info Run CLI with --verbose flag for more details.
^. Output: info Run CLI with --verbose flag for more details.

I have tried the solutions here: https://infinitbility.medium.com/unable-to-determine-the-current-character-it-is-not-a-string-number-array-or-object-in-react-f34c80d96e8e but none of them work!

I am running this on Windows

Problems with installing from fresh with node v16.15.1

Hi, as mentioned in topic header I have problems installing the node modules with a fresh install using node version 16.15.1.
There is also no node version specified in package.json. Is there a specific version you have to use:)?

Error log:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @react-native-community/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!   peer react@">= 16.x.x" from @freakycoder/[email protected]
npm ERR!   node_modules/@freakycoder/react-native-bounceable
npm ERR!     @freakycoder/react-native-bounceable@"^0.2.5" from the root project
npm ERR!   19 more (@freakycoder/react-native-helpers, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from @react-native-community/[email protected]
npm ERR! node_modules/@react-native-community/async-storage
npm ERR!   @react-native-community/async-storage@"^1.12.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8" from @react-native-community/[email protected]
npm ERR!   node_modules/@react-native-community/async-storage
npm ERR!     @react-native-community/async-storage@"^1.12.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/MadsFrost/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MadsFrost/.npm/_logs/2022-06-30T08_49_18_854Z-debug-0.log

Custom fonts do not seem to load in production build

Hi, I have added my custom fonts like this

added them to the theme like this

and use them like this (example)

While this seems to work in dev mode, release android builds are not showing them properly and its using the default font

Running npx react-native-asset makes no difference.

Am I missing something ?

fail to install react-native-mmkv-storage

I got the following error message:

no toolchains found in the ndk toolchains folder for abi with prefix: arm-linux-androideabi

I solved this problem like this:

change NDK from 23.1.xxxx to 20.1.5948944

Update the react-native-vector-icons

Hi,
Thanks for the boilerplate
but i saw the problem with icon in android that icons are not showing so i removed the react-native-vector-icons and added the newest version and updated the android/app/build.gradle file and removed all refs in settings.gradle

i got the error java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7
solved by updating distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip

Need help for how to use events emitter

Hello @WrathChaos Thanks for this amazing typescript boilerplate.

i have a one question , i want to emit events , in this project you use events library can you please provide me a working example.
i try to emit events as you already created event file but it's not working.

Thanks in advance

tests SyntaxError: Cannot use import statement outside a module

this is what I'm struggling with in my project and seems to be happening in yours as well - running yarn test:

    import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      3 |  */
      4 |
    > 5 | import 'react-native';
        | ^
      6 | import React from 'react';
      7 | import App from '../App';
      8 |

      at Runtime.createScriptFromCode (../../../../.config/yarn/global/node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (__tests__/App-test.tsx:5:1)

I have tried all the jest config setups from SO and RN issues list and nothing seems to work. Do the tests run for you?

React dependency error while installation

I tried to use your template but I am getting errors.
Please refer attached screenshot

Thansk

Can not run on windows 10

Just cloned repo and can't start with step by step guide.
Getting "error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting project.android.sourceDir option to point to a new location."

Error while Pod Install

Hi, I just cloned the project, then did

npm I
npm run clean-up
npm i && npx pod-install

On the 3rd step I'm getting an error.

When I disable flipper by commenting out this line on the pod file, it works.

use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')

react-native run-android not working

Please see the error login attached image

Problems with installing from fresh with node v16.15.1

Hi @WrathChaos, great template, as mentioned in topic header I have problems installing the node modules with a fresh install using node version 16.15.1.
There is also no node version specified in package.json. Is there a specific version you have to use:)?

Error log:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @react-native-community/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR!   peer react@">= 16.x.x" from @freakycoder/[email protected]
npm ERR!   node_modules/@freakycoder/react-native-bounceable
npm ERR!     @freakycoder/react-native-bounceable@"^0.2.5" from the root project
npm ERR!   19 more (@freakycoder/react-native-helpers, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8" from @react-native-community/[email protected]
npm ERR! node_modules/@react-native-community/async-storage
npm ERR!   @react-native-community/async-storage@"^1.12.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR!   peer react@"^16.8" from @react-native-community/[email protected]
npm ERR!   node_modules/@react-native-community/async-storage
npm ERR!     @react-native-community/async-storage@"^1.12.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/MadsFrost/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/MadsFrost/.npm/_logs/2022-06-30T08_49_18_854Z-debug-0.log

Run android "cannot find symbol"

I just setup andoid-studio and the android sdk on my machine. And when running yarn android get this error

 error: cannot find symbol
        protected JSIModulePackage getJSIModulePackage() {
                  ^
  symbol: class JSIModulePackage

Any idea what is wrong?

Need help about which one navigator i have to use.

Hello
@WrathChaos i confused about which navigator i have to use native-stack or stack navigator.

i am creating an app which have lots of animation and gesture also like button slide.

can you please help me out? it would be great help.
Thanks

crash on Android

allow the step by step

npx react-native run-android

2022-04-30 00:35:07.143 25471-25471/com.rntypescriptboilerplate E/SoLoader: couldn't find DSO to load: libjscexecutor.so caused by: dlopen failed: library "libjsc.so" not found: needed by /data/app/~~GG6jzUDtVeutqC52waW0qw==/com.rntypescriptboilerplate-7kULpfl29FuwmzBUbx509Q==/lib/arm64/libjscexecutor.so in namespace classloader-namespace result: 0
2022-04-30 00:35:07.227 25471-25510/com.rntypescriptboilerplate A/libc: Fatal signal 6 (SIGABRT), code -1 (SI_QUEUE) in tid 25510 (FlipperEventBas), pid 25471 (riptboilerplate)
2022-04-30 00:35:07.228 25471-25528/com.rntypescriptboilerplate E/QT: [QT]file does not exist
2022-04-30 00:35:07.238 25471-25528/com.rntypescriptboilerplate E/QT: [QT]file does not exist
2022-04-30 00:35:07.394 25471-25525/com.rntypescriptboilerplate E/OpenGLRenderer: fbcNotifyFrameComplete error: undefined symbol: fbcNotifyFrameComplete
2022-04-30 00:35:07.394 25471-25525/com.rntypescriptboilerplate E/OpenGLRenderer: fbcNotifyNoRender error: undefined symbol: fbcNotifyNoRender

wrathchaos / react-native-typescript-boilerplate Goto Github PK