Yeroshenko/iMoney

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.

Design: https://excalidraw.com/#room=6bc07c036306ae9f5713,SQ9jKKWHdXgSggQaXUDzcA

What's inside

• React Navigation (v6) - routing and navigation for React Native apps. If you'd like to use React Native Navigation by Wix, check out rnn-starter.
• Expo Modules - libraries and modules from Expo ecosystem.
• 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!

Extra helpful libraries

• React Native Gesture Handler - native touches and gesture system for React Native.
• Hermes Engine - a JavaScript engine optimized for running React Native apps.
• ESLint + Prettier - keep your code neat and structured.
• Patch Package - useful for fixing node modules instantly.
• Release It - automate versioning and publishing of your app.
• Typescript - strict syntactical superset of JavaScript.

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.

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>
  )
}