leotm / react-native-template-new-architecture

React Native 0.71.12 ⚡ M1, Ubuntu 💻 Hermes ⚙️ Fabric 🚅 Turbo Modules 💨 TypeScript 5 ✅ Gradle 7.6, JDK 19, NDK 25 🍎 Xcode 15b, Sonoma 14b, Ruby 3 💎 Bison 2.3 🦬 ccache ♻️ Yarn 4rc 📦 ESLint 🧹 Prettier ✨ SES, LavaMoat, Buck2 🚧 Babel 🗼 GitHub Actions ✔️ Node 19 ⬢ Storybook 6.5rc 📓 libs 📚 for curious early adopters :suspect: #RNEU #APPJS

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

react-native-template-new-architecture/src/index.tsx

Line 132 in 01f1c98

export default App // Or StorybookUIRoot

Old v5 setup

react-native-template-new-architecture/metro.config.js

Line 16 in 01f1c98

inlineRequires: true

• 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

---