search

kanzitelli / rnn-starter

๐Ÿคน React Native Starter - Powered by cli-rn, React Native Navigation, Expo Modules, RNN Screens, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Splash Screen, Localization, Notifications, Permissions, and much more.
https://starters.dev
MIT License
549 stars 72 forks source link
android expo expo-modules ios mobx mobx-react react-native react-native-gesture-handler react-native-navigation react-native-navigation-starter react-native-splash-screen react-native-starter react-native-vector-icons react-navigation rnn-screens typescript

readme

React Native React Native Navigation Expo

This starter is a collection of libraries and approaches needed for fast start and productive maintainance of React Native App.

RNN Starter is a part of starters.dev collection.

Getting Started

Quick start with cli-rn

npx cli-rn new App -t rnn

As cli-rn uses react-native-rename script for renaming under the hood, please refer to Rename section to apply necessary changes to Android part.

If you have any troubles running the app with yarn ios or yarn android, open XCode or Android Studio and run the project from there.

Manual setup 1. Clone the repo ```bash npx degit kanzitelli/rnn-starter app ``` 2. Install packages and pods ```bash cd app && yarn && yarn ios:pods ``` 3. Run it Open XCode or Android Studio to run the project (recommended) or do ```bash yarn ios yarn android ```

Rename

If you need to rename the app, do the following (based on react-native-rename):

yarn rename "NewApp" -b com.yourcompany.newapp
yarn ios:pods

โš ๏ธ Troubleshooting on Android. You can see that after running rename script, it doesn't change package name and imports for files under newarchitecture folder.

You will need do these steps manually 1. Open all `.java` files under `android/app/src/main/java/your/bundle/newarchitecture/` folder. 2. Open `MainApplication.java`. 3. Find all packages and imports which contain `com.rnnstarter` and change them to yours.

What's inside

Extra helpful libraries

Useful services/methods

Splash Screen ๐ŸŽ‰

Starting from v16.0.0, we have added a Splash Screen that works great on pair with React Native Navigation and can be hidden at any moment in your app! Thanks to @FawadMahmood!

Current approach relies on LaunchImage on iOS that is marked as deprecated by Apple. However, people still use it and that's the only way to make it work with React Native Navigation.

At some point of the app development, you'll probably want to replace existing splash screen (with starters.dev icon). Below, you can find some tutorials/advices on how to replace the splash screen images.

Splash Screen replacement If you already have some images ready for Splash Screen, you can just drag and drop them instead of existing `Images/LaunchImage` in XCode. If you'd like to generate new images, then follow the steps below. We are going to use [rn-toolbox](https://github.com/bamlab/generator-rn-toolbox) to achieve that. You can use any other tool or website. 1. Follow the [requirements and installation](https://github.com/bamlab/generator-rn-toolbox/blob/master/generators/assets/README.md#requirements) steps for rn-toolbox. 2. Prepare `splashscreen.psd` with the design of your splash screen. 3. Run `yarn splash:gen`. Now, splash screens for iOS and Android must be generated and you should manually add them to the following folders. > Note for Android: discard any changes of `styles.xml` if it was accidentally overwritten by the script. > Note for iOS: key `UILaunchStoryboardName` must be removed from `Info.plist` file and `LaunchImage` value must be set for "Asset Catalog Launch Image" in Build Settings.

Splash Screen hides loading state of the app bundle when launching the app in debug mode.

Design System

This starter is using RN UI lib as a design system, UI toolset and a source of ready-to-go components.

DesignSystem - a class where all settings for an app's design system is taking place. You can customize colors, schemes, typegraphy, spacings, etc. Located at src/utils/designSystem.tsx.

https://user-images.githubusercontent.com/4402166/197052859-d7eef80a-a923-4a9b-86df-b9dbc32a075b.mov

Advantages

Describe app screens in one place

All setup for your screens takes place in one file src/screens/index.ts:

import {generateRNNScreens} from 'rnn-screens';

import {Main} from './main';
import {Settings} from './settings';

export const screens = generateRNNScreens(
  {
    Main: {
      component: Main,
      options: {
        topBar: {
          ...withTitle('Main'),
          ...withRightButtons('inc', 'dec'),
        },
      },
    },
    Settings: {
      component: Settings,
      options: {
        topBar: {
          ...withTitle('Settings'),
        },
      },
    },
    // ...
  },
  [withGestureHandler, withSS, withAppearance],
);

Navigate with predictability

import {screens} from '.';

const SomeScreen = ({componentId}) => {
  return (
    <View>
      <Button
        label="Open screen"
        onPress={() => {
          // IDE will autocomplete with registered screens
          screens.push(componentId, 'AnotherScreen');
        }}
      />
    </View>
  );
};

Build root component with ease

// single screen app
const App = () => Root(Screen(screens.get('Main')));

// tab based app
const TabsApp = () =>
  Root(
    BottomTabs([
      Screen(screens.get('Main')),
      Screen(screens.get('Playground')),
      Screen(screens.get('Settings')),
    ]),
  );

Dark mode support

You can define modes in utils/designSystem.tsx.

Samples for new screens, services, stores and components.

So you have one structure within the project. You can find them in corresponding folders. Just copy&paste it and make the necessary changes.

Enhancements

There are still some things I would like to add to the starter:

Feel free to open an issue for suggestions.

Known issues

Worth checking

Other starters

Originally bootstrapped from starters-dev/rnn-with-expo.

Articles

Why

...do we need yet another starter/boilerplate? Well, I work with React Native for more than 4 years and during the time I started having my own project structure which was a good fit for almost all of the delivered apps. Also, I have come up with some custom useful services/methods which simplify usage of React Native Navigation and other libraries. Check out Advantages section.

License

This project is MIT licensed