Sax-Yusuph / react-native-template

new architecture support for react native

React Native Template / Boilerplate

Bleeding 🔪 Edge 🌉 Nightlymare 🌃 Edition

““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(*▽*)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““

IDKFA

Android	iOS

Setup

Fresh M1/M2

Yarn v4

Upgrading from v1 classic or v3 latest / berry / stable

cd ~
yarn set version canary

Clear generated files

Install

yarn # 🍺 version

yarn setup # 🤖 versioned version

• 🚀 Breaking changes for Yarn 4
• 🤖 Why versioned

Start

yarn start

Silicon (M1/M2) Macs

iOS (arm64)

cd ios
pod install
..
yarn ios

Old Rosetta 2 Intel x86_64 way

Android

NDK

Old manual setup

Building-from-source#prerequisites, but with NDK 25.0.8775105

# android/local.properties
sdk.dir=/Users/<user>/Library/Android/sdk
ndk.dir=/Users/<user>/Library/Android/sdk/ndk/25.0.8775105

Strip: rcX suffix / (trailing) spaces / final final linebreak - otherwise fcntl(): Bad file descriptor

Fat M1 components: ndk-build, LLVM, CMake, Make, Python, Ninja, shader-tools, simpleperf - yasm remaining

Android Studio

Old manual setup

Open Android Studio - Preview release - Canary build

• Open Project, set the JDK
• SDK Manager > SDK Tools > NDK > ⬇️ 25.0.8775105
• Build all 4 default ABIs first with other libraries
• Open an arm64 AVD e.g. Pixel_3a_API_31_arm64-v8a Initial Preview v3: Google APIs System Image
• Make Project

Run

yarn android

Troubleshooting

• New Architecture - Troubleshooting
• Apple Silicon (M1) troubleshooting guide (RN 0.64/0.65/0.66)
• react-native-community/upgrade-support

Storybook v6

Add stories to src/components/**/*.stories.(ts|tsx)

Keep in sync with .storybook and storybook_server /main.js

yarn get-stories

yarn storybook-server # optional

https://github.com/leotm/react-native-template-new-architecture/blob/01f1c9864f55367004effbe26d3f33590784704b/src/index.tsx#L132

Old v5 setup

https://github.com/leotm/react-native-template-new-architecture/blob/01f1c9864f55367004effbe26d3f33590784704b/metro.config.js#L16

• facebook/hermes#135
• facebook/react-native#31969

# @storybook/react-native-server v5
yarn storybook

yarn <android/ios>

Node

With ts-node and curveball

yarn server

Deno

brew install deno

yarn deno

---