svbutko / react-native-template-strong

Quick, opinionated, documented and strong beginning for your next project. Template made with react-native-navigation, TypeScript and Redux.

React Native Template Strong

Quick, opinionated, documented and strong beginning for your next project.

Check out docs to get started

Build primarily with

• React Native 0.74.1
• React Native Navigation 7.39.2
• Redux Toolkit 2.2.3
• TypeScript 5.4.5

Includes next components:

• Date time picker 8.0.0
• Localization 2.3.2
• Orientation locker 1.7.0
• Permissions 4.1.5
• Config 1.5.1
• Image crop picker 0.41.0
• Reanimated carousel 3.5.1
• Vector icons 10.1.0
• SF Symbols 1.2.1
• In-app review 4.3.3
• Size matters 0.4.2
• Mask input 1.2.3
• DayJS 1.11.11
• Net info 11.3.1
• Share 10.2.0
• Reanimated 3.10.0
• Menu 1.0.2

Testing made with:

• Jest 29.7.0
• Detox 20.20.3
• Storybook 7.6.18

Code quality covered with:

• ESLint 8.57.0
• ESLint Config React Strong 2.4.0
• Husky 9.0.11
• Prettier 3.2.5
• Lint staged 15.2.2

And many other day-to-day useful dependencies.

react-native-template-strong's Issues

[FEATURE] CodePush

https://github.com/microsoft/react-native-code-push

[FEATURE] Local and push notifications

Local and push notifications support.

Currently thinking about:
https://github.com/invertase/notifee

[FEATURE] Accessibility enhancements

Add accessibility enhancements

[FEATURE] Add GitHub Actions CI

[BUG] Failed on Mac with RN red screen after start

Describe the bug

E  ./index.js 

error: node_modules/react-native-gesture-handler/src/handlers/gestures/pinchGesture.ts: /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/react-native-gesture-handler/src/handlers/gestures/pinchGesture.ts: Cannot find module '@babel/plugin-transform-shorthand-properties'
Require stack:
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/@babel/core/lib/config/files/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/@babel/core/lib/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/react-native-reanimated/plugin.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/config/files/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-react-native-babel-transformer/node_modules/@babel/core/lib/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-react-native-babel-transformer/src/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro-transform-worker/src/index.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/sytolk/IdeaProjects/MyTemplateApp/MyTemplateApp/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js

To Reproduce
Steps to reproduce the behavior:

1. npx react-native init MyApp --template react-native-template-strong
2. npm install --force
3. npx pod-install
4. start-reset-cache
5. npm run-script ios:run

Desktop (please complete the following information):

• OS:
  ProductName: macOS
  ProductVersion: 12.1
  BuildVersion: 21C52
• Template Version [e.g. 1.0.0] latest

[FEATURE] Fastlane usage

Fastlane usage

[QUESTION] Unexpectedly getting this error

Unexpectedly getting this error, I also tried remove cache and reinstall node modules but nothing happened:
Error
error: src\navigation\navigators\mainStackNavigator.ts: [BABEL] C:\Users\CYRUS\Documents\work\ux-labs\MyApp\src\navigation\navigators\mainStackNavigator.ts: Unexpected token ',' (While processing: "C:\\Users\\CYRUS\\Documents\\work\\ux-labs\\MyApp\\node_modules\\nativewind\\babel.js")

mainStackNavigator.ts File:
`import {Navigation} from "react-native-navigation";
import {Pages} from "../pages";
import {reduxProvider} from "../../core/store/store";
import {PlatformColorsAndroid, PlatformColorsIOS} from "../../core/theme/colors";
import {platformNativeColor} from "../../common/helpers/colorHelpers";
import SplashScreen from "../../modules/screens/SplashScreen";
import AuthScreen from "../../modules/screens/AuthScreen";
import SignInScreen from "../../modules/screens/SignInScreen";
import SignUpScreen from "../../modules/screens/SignupScreen";
import TwoFAScreen from "../../modules/screens/TwoFAScreen";
import VerifySMSScreen from "../../modules/screens/VerifySMSScreen";
import SignupSuccessScreen from "../../modules/screens/SignupSuccessScreen";

export function setDefaultOptions() {
Navigation.setDefaultOptions({
animations: {
setRoot: {
waitForRender: true,
},
setStackRoot: {
waitForRender: true,
},
},
layout: {
componentBackgroundColor: platformNativeColor(PlatformColorsIOS.secondarySystemBackground, PlatformColorsAndroid.background),
},
statusBar: {
backgroundColor: platformNativeColor(undefined, PlatformColorsAndroid.statusbar),
visible: true,
},
});
}

export function registerComponents() {
Navigation.registerComponent(Pages.splash.name, () => reduxProvider(SplashScreen));
Navigation.registerComponent(Pages.auth.name, () => reduxProvider(AuthScreen));
Navigation.registerComponent(Pages.signIn.name, () => reduxProvider(SignInScreen));
Navigation.registerComponent(Pages.twoFA.name, () => reduxProvider(TwoFAScreen));
Navigation.registerComponent(Pages.signUp.name, () => reduxProvider(SignUpScreen));
Navigation.registerComponent(Pages.verifySMS.name, () => reduxProvider(VerifySMSScreen));
Navigation.registerComponent(Pages.signUpSuccess.name, () => reduxProvider(SignupSuccessScreen));
}
`

[BUG] won't run if you have yarn installed

Describe the bug
Why lock yarn out? There should be no need to
The problem ends up that if you do have installed you get the error about using rpm instead even when you run with npm/npx

To Reproduce
Steps to reproduce the behavior:
Have yarn installed, try to run the app

Expected behavior
should work

Proposed solutionr
Remove the yarn from the engines key on package.json

[QUESTION] Tailwind (Nativewind) not working

Tailwind (Nativewind) Css not working with this template, Need Help!

[FEATURE] Bottom sheet component

Add bottom sheet component:
https://gorhom.github.io/react-native-bottom-sheet/

[BUG] PlatformColor doesn't seem to be working correctly with `Views` & `Text` but works perfectly with the navigation ?

PlatformColor doesn't seem to be working correctly on android as it does on ios.
it requires app reload.

pc-template.mp4

To Reproduce

• add this code & toggle dark/light mode in your app

      <Text
        style={{
          color: platformNativeColor(PlatformColorsIOS.label, PlatformColorsAndroid.primaryText),
          fontSize: 30,
        }}
      >
        here we goo
      </Text>

Expected behavior
android should work, same as IOS.

Screenshots
check the video above.

Additional context
this could be & most likely is an issue with react native it self.
but I'm wondering why does it work perfectly with navigation constructs and not with react native's elements.

[FEATURE] Share bottom sheet

https://github.com/react-native-share/react-native-share

[QUESTION] React-native-paper Provider

I'm getting this warning:

Require cycle: node_modules\react-native-paper\src\components\Appbar\Appbar.tsx -> node_modules\react-native-paper\src\components\Appbar\AppbarHeader.tsx -> node_modules\react-native-paper\src\components\Appbar\Appbar.tsx

I think it's provider issue, but don't know how to wrap the screens in this provider.

Error while run npm install

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-native
npm ERR! react-native@"0.66.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@"^0.64" from [email protected]
npm ERR! node_modules/react-native-localization
npm ERR! react-native-localization@"2.1.7" 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.

[FEATURE] Move away from moment.js

Is your feature request related to a problem? Please describe.
Moment.js is now in legacy mode. The maintainers recommend we move to other projects.

Describe the solution you'd like
Move from Moment.js to Day.js

[FEATURE] Testing Library

https://github.com/callstack/react-native-testing-library

[QUESTION]

hi @svbutko , amazing work you have done, can you please create an example project to show how to use all the features.
and when will you complete the pending issues you have opened. thanks

[BUG] AppEnvironment does not exist

Describe the bug
AppEnvironment from react-native-config does not exist

To Reproduce
Steps to reproduce the behavior:

1. import {AppEnvironment} from "../types/react-native-config.types";
2. if (AppEnvironment.development == Config.ENVIRONMENT) {
3. See error

[FEATURE] Search in documentation

[FEATURE] Skeleton component

Add a skeleton component.

[FEATURE] Action menu

https://github.com/react-native-menu/menu

[FEATURE] macOS 11 support

macOS 11 support through Catalyst

[FEATURE] Base fetch for API

Add base fetch for API integration

[FEATURE] Analytics integration

Add analytics integration

[FEATURE] Create an example project

It must include all the aspects of the template, also would be nice to make a video with comments.

[FEATURE] Add reanimated V2