Welcome to the 39th edition of React Native Weekly!
This is week 51 2021: December 13th to 19th. Yo the year is almost gone now.
RCTAppSetupUtils helper
Sota Ogo sota@fb.com refactored the iOS template by moving the initial set up for iOS in AppDelegate to a helper class.
The RCTAppSetupUtils.mm will make it easier to setup the new architecture.
Sota also renamed AppDelegate.m to AppDelegate.mm on this other commit. mm is the extension for Objective-C++ which allows for direct interoping with C and C++.
Fixed Mac M1 postinstall failure
Simon Farshid Yonom@users.noreply.github.com and William Bell williambell9708@outlook.com fixed the issue where the postinstall workaround script failed on the Mac M1 if didn’t set the IPHONEOS_DEPLOYMENT_TARGET
Trigger codegen discovery when building
Sota Ogo sota@fb.com made two changes to react_native_pods.rb related to the codegen discovery script, it finds where the codegen module are. Since it runs on Pod install, to avoid having to call pod install every time we build Sota added a trigger for calling this script on build.
He also modified it to only trigger the codegen discovery script for in-app library changes, if you need to make a temporary change to a library within node_modules you can call USE_CODEGEN_DISCOVERY=1 pod install to update the source.
ad9eabe0337 Trigger codegen discovery script when building an app. bfb8f63c18c Fix bugs when running with USE_CODEGEN_DISCOVERY
New architecture support for template app
Sota Ogo sota@fb.com made a few commits to update the template app in the React Native repo to support the new architecture for iOS. With these changes, on the iOS template app you will able to enable the new architecture by running RCT_NEW_ARCH_ENABLE=1 pod install.
I’m not entirely sure if the react-native-community/cli points to the react-native/template but you can just download the template folder in react-native repo and run it with the new architecture enabled to test it.
There were a few commits related to this work:
2e9a376c848 Add fabric option to the default app template. 8ec0e6919c5 Add turbo module support in the default app template (#32752) 41cad354e5e Fix the default template when RCT_NEW_ARCH_ENABLE=1 (#32775) 6a046fb9f0d Fix build issue for the new app template (#32772) 1cd8f05ee82 Refactor app template setup util functions
Kevin Gozali Podcast Interview with Infinite Red
It was cool to learn that the new renderer, turbo mobules, and codegen are done. He explained how the work was broken down into three phases and only the last one the initializer work is left to be done
The initializer work will lazy load native modules instead of loading them up front. This work started and is planned to finish in the first half of 2022.
Another insight from the conversation is how codegen was created to give native modules type safety. Previously the native layer would tell the JavaScript layer what modules where available and their methods, with codegen this is turned around and the JavaScript layer will generate the bindings and type declarations that the native modules need to abide to, as a result the native modules will need to have equal interfaces for all platforms.
Expo SDK 44
Release blogpost. Evan highlighted expo-system-ui module that allows you to set the root native background color of the app by doing:
SystemUI.setBackgroundColorAsync("white");
react-native-skia
William and Christian open sourced react-native-skia sponsored by Shopify. The release video made by William was amazing and he went over many capabilities that the library enables.
As I tweeted on Saturday, react-native-svg can change how we do SVG, graphs/charts, and complex animation rendering in React Native.
For example, react-native-svg implements SVG rendering manually using Core Graphis on iOS and Graphics on Android and since react-native-skia supports SVG path rendering you could just use it instead which might be more performant given that react-native-skia is already using JSI and Skia’s rendering engine is likely to have a better implementation of the SVG protocol than the one done by react-native-svg.
Community
- React Native Monorepo with Nx guide
- React Native Monorepo with TurboRepo (monorepo tooling war lol)
- How would you debug a memory leak?
Done
Happy holidays and I’ll see you next week. If you want to see more checkout the previous week’s posts here. Subscribe to get notified when new posts are out = )
Partners
- TypeScript Weekly: The best TypeScript links every week, right in your inbox.
- This Week In React: the best of React & React Native news. Sebastien filters the noise, and you save time!
- ES.next News: learn about the latest in JavaScript and cross-platform tools.
- Tailwind Weekly: all things Tailwind CSS, new issue every Saturday.