uncleyee / expo-starter Goto Github PK

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

For more information, check out Why section.

> npx cli-rn new App

In order to change app's name, please make necessary changes in app.json.

See it with Expo Web or Expo Go.

> git clone https://github.com/kanzitelli/expo-starter.git App && cd App

> rm -rf .git

> yarn

> yarn start

• Expo SDK - a set of tools and services built around React Native and native platforms.
• React Navigation (v6) - routing and navigation for React Native apps.
• RN UI lib - amazing Design System, UI toolset & components library for React Native. Dark Mode is implemented using this library.
• Reanimated 2 - React Native's Animated library reimplemented.
• MobX - simple, scalable state management, with mobx-persist-store for persisting your stores.
• AsyncStorage MMKV - efficient, small mobile key-value storage framework developed by WeChat. ~30x faster than AsyncStorage! Available only within Expo dev clients. Instructions on installation could be found here.

• React Native Gesture Handler - native touches and gesture system for React Native.
• ESLint + Prettier - keep your code neat and structured.
• Release It - automate versioning and publishing of your app.
• Typescript - strict syntactical superset of JavaScript.

• 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 easy integration of localization for an app by using i18n-js and react-native-localize. 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.

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',
    }),
  },
  // ...
}

Stack Navigator:

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

Tab Navigator:

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

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

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

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

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

• Passing props to a screen example
• Constants: add Dimensions
• AsyncStorage stores persisting example
• Expo Web support
• Simple Auth example
• Shared transitions — IjzerenHein/react-navigation-shared-element

Feel free to open an issue for suggestions.

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

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

• Wallpapers App - Twitter, App Store
• Rabbit App. Lite Reddit client - Github, App Store, Google Play
• Trip Music Radio - App Store, Google Play
• App for VK - App Store
• Messenger for VK - App Store
• Christmas Market - App Store

...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.

This project is MIT licensed