Andrei Calazans

React Native Weekly - W39 2021

☕️ 3 min read

Welcome to the 27th edition of React Native Weekly!

This is week 39 of 2021: September 20th to 26th.

Don’t hard-code CocoaPods’s sandbox path

This commit by Jakob Krigovsky jakob@krigovsky.com, now allows you to call pod install --project-directory=ios from the root of the project, or anywhere you specify the project directory to be. Previously, this would fail.

Add cancelButtonTintColor props to ActionSheetIOS

Muhammad Numan muhammadnuman70@gmail.com updated the ActionSheetIOS on this commit

I was surprised to see changes to the ActionSheetIOS make it to the core since Expo started maintaining a separate version of it since the Lean Core initiative. I recommend you use Expo’s version of it instead.

| | | |

Updates to Android’s Build System

For the past three weeks or so, Nicola Corti ncor@fb.com has been doing a lot of work around Android’s build system. He made several improvements by refactoring, breaking things up into invidual tasks, and more.

The stuff he did last week:

Next time I have a Gradlew build issue I might just ping him 😅

Ensure elevated views are behind sticky header in FlatList [Android][Fix]

This commit uses enableZ trick to ensure that renderer doesn’t try to reorder the views based on elevation.

Circle CI: Package a release on every commit

Héctor Ramos hramos@fb.com extended the Circle CI config to include a per-commit release build that does not get published to NPM.

Introduce RCTComputeScreenScale

Phillip Pan phillippan@fb.com exposed the [UIScreen mainScreen].scale for Apple devices as a temporary solution to dealing with different screen sizes.

How to disable Fabric on RNTester

Commit

diff --git a/packages/rn-tester/README.md b/packages/rn-tester/README.md
index 8b0ea4becc9..087f0cf3587 100644
--- a/packages/rn-tester/README.md
+++ b/packages/rn-tester/README.md
@@ -12,6 +12,12 @@ Before running the app, make sure you ran:
 
 ### Running on iOS
 
+If you are testing non-fabric component, modify [the fabric_enabled flag in RNTester's Podfile](https://github.com/facebook/react-native/blob/main/packages/rn-tester/Podfile#L21).
+
+```ruby
+fabric_enabled = false
+```
+

ScrollView automaticallyAdjustKeyboardInsets prop iOS

Commit by our infamous Marc Rousavy marcrousavy@hotmail.com

The following is taken from the commit summary written by Marc Rousavy marcrousavy@hotmail.com.

The automaticallyAdjustKeyboardInsets prop automatically animates contentInset, scrollIndicatorInsets and contentOffset (scroll Y) to avoid the Keyboard. (respecting absolute position on screen and safe-areas)

He also included a fix for the contentInset not respected when animating new items with autoScrollToTopThreshold.

BeforeAfter

Why not just use <KeyboardAvoidingView>?

with KeyboardAvoidingViewwith automaticallyAdjustKeyboardInsets

Also notice how the <KeyboardAvoidingView> does not match the animation curve of the Keyboard

Community

Done

That’s it for this week. If you want to see more checkout the previous week’s posts here. Subscribe to get notified when new posts are out = )