iamchiwon / reactnativeprojectbase

Project Base of react-native with typescript, swift and kotlin

Project base : react-native

react-native project with typescript, swift and kotlin.

react-native

• https://reactnative.dev/
• Setting up the development environment

Creation template

• https://github.com/demchenkoalex/react-native-better-template

npx react-native init {AppName} --template react-native-better-template

• Customized
  • MainApplication.kt -> MainApplication.java
    : react-native link not works with kotlin file.
  • [android] Use custom font as default
    : android default fonts are sucks.
  • Pre-built components included
    : every project would use them.

Components

Native Base

- https://nativebase.io/

yarn add native-base react-native-svg styled-components styled-system react-native-safe-area-context
npx pod-install ios

App.tsx

import { NativeBaseProvider } from 'native-base'

const App = () => {
  return (
    <NativeBaseProvider>
      ...
    </NativeBaseProvider>
  )
}

React Navigation

• https://reactnavigation.org/

yarn add @react-navigation/native
yarn add react-native-screens react-native-safe-area-context
yarn add @react-navigation/native-stack
yarn add react-native-gesture-handler
npx pod-install ios

MainActivity.kt

import android.os.Bundle

...

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(null)
}

App.tsx

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
        <Stack.Navigator>
            <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
    </NavigationContainer>
  );
}

Vector Icons

• https://github.com/oblador/react-native-vector-icons

yarn add react-native-vector-icons
npx pod-install ios
npx react-native link react-native-vector-icons

Reanimated

• https://docs.swmansion.com/react-native-reanimated/

yarn add react-native-reanimated@next
npx pod-install ios

babel.config.js

module.exports = {
    ...
    plugins: [
        ...
        'react-native-reanimated/plugin',
    ],
};

⚠️
Reanimated plugin has to be listed last.
v2.3.x not support react-native v0.65.x

android/app/build.gradle

project.ext.react = [
  enableHermes: true
]

MainApplication.kt

override fun getJSIModulePackage(): JSIModulePackage? {
    return ReanimatedJSIModulePackage()
}

androdi/proguard-rules.pro

-keep class com.facebook.react.turbomodule.** { *; }

Custom Font (Android)

• Pretendard
• Use as default font for android. (There are no variable weights for the default Korean font)

Fast Image

• https://github.com/DylanVann/react-native-fast-image

yarn add react-native-fast-image
npx pod-install ios

androdi/proguard-rules.pro

-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

Splash Screen

• SplashScreen

yarn add react-native-splash-screen
npx pod-install ios

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    SplashScreen.show(this);
    super.onCreate(null)
}

Better-Bridging-Header.h

...
#import "RNSplashScreen.h"

AppDelegate.swift

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    initializeFlipper(with: application)

    ...

    RNSplashScreen.show()
    return true
  }