/rn-starter

🦄 React Native Starter - Powered by cli-rn, React Navigation (v6), Expo Modules, RN UI lib, MMKV, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.

Primary LanguageTypeScriptMIT LicenseMIT

This starter is a collection of libraries and approaches from my personal experience. No hard judgements ✌️

For more information, check out Why section.

Getting Started

Quick start with cli-rn

> npx cli-rn new App -t rn

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
> git clone https://github.com/kanzitelli/rn-starter.git App && cd App
  1. Remove .git file (if not planning to contribute)
> rm -rf .git
  1. Install packages and pods
> yarn && yarn ios:pods
  1. Run it!

Open XCode or Android Studio to run the project (recommended) or do

> yarn ios
> yarn android

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

> yarn rename NewAppName
> yarn ios:pods

What's inside

Extra helpful libraries

Useful services/methods

  • navigation - a service where all navigation configuration takes place in. It simplifies and abstracts the process of registering screens, layouts, etc.
  • translate - a service that brings an easy integration of localization for an app by using i18n-js and expo-localization. You can see an example of en and ru localizations in Example screen.
  • onStart - a service where you can write your own logic when app is launched. For example, you can increment number of appLaunches there.
  • configureDesignSystem() - a method where all settings for an app's design system is taking place. You can customize there colors, schemes, typegraphy, spacings, etc.
RPReplay_Final1641615508.MP4

Advantages

Describe app screens in one place

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

type Screen = 'Main' | 'Example' | 'Settings';
type Tabs = 'Main' | 'WIP' | 'Settings';

const screens: ScreenLayouts = {
  Main: {
    name: 'Main',
    component: Main,
    options: () => ({
      title: 'Home',
    }),
  },
  // ...
}

const tabs: TabScreenLayouts = {
  Main: {
    name: 'MainNavigator',
    component: HomeStack,
    options: () => ({
      title: 'Home',
    }),
  },
  // ...
}

Build layouts with ease

Stack Navigator:

const HomeStack = () =>
  genStackNavigator([
    screens.Main,
    screens.Example,
  ]);

Tab Navigator:

const TabNavigator = () =>
  genTabNavigator([
    tabs.Main,
    tabs.WIP,
    tabs.Settings,
  ]);

Navigate to other screens with predictability

const Screen = ({componentId}) => {
  const {nav} = useServices();

  return (
    <View>
      <Button
        label="Open Settings"
        onPress={() => nav.push('Settings')}
      />
    </View>
  )
}

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:

General

Production

Feel free to open an issue for suggestions.

Known issues (warnings)

  • Large title is not shown on 2nd+ tab. This issue exists. So you can find the patch file for fixing that in patches/react-native+0.65.1.patch. It will be autorun when you do yarn add/remove/etc.
  • Over-The-Air Updates. They have been removed from the current version as I had some problems publishing one of the apps to AppStore. Check out my tweet and be aware of the issue if you'd like to use them anyways.

Worth checking

Other starters

  • expo-starter - 🦥 Production-ready starter for Expo (React Native) App! Powered by cli-rn, React Navigation (v6), RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, and much more.
  • rnn-starter - 🤹 Production-ready starter for your next React Native App! Powered by cli-rn, React Native Navigation, RN UI lib, Mobx, Reanimated 2, Dark Mode, Localization, Notifications, Permissions, and much more.

Articles

  • Expo + React Native Navigation? Yes! - Medium, Dev.to
  • cli-rn — making RN app developing experience as smooth as possible - Medium, Dev.to

Apps in production

Why

...do we need yet another starter/boilerplate? Well, I work with React Native for more than 3 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 Navigation and other libraries. Check out Advantages section. If you'd like to use React Native Navigation by Wix, check out rnn-starter.

License

This project is MIT licensed