Welcome to the 15th edition of React Native Weekly = )

Update Moving Box Example

Just an update to the example that refactors a class component into a function component. I highlight the usage of x.current.resetAnimation to reset instead of setting the value back to the initial value.

...
  const x = React.useRef(new Animated.Value(0));
  const [boxVisible, setBoxVisible] = React.useState(true);

  const moveTo = (pos: number) => {
    Animated.timing(x.current, {
      toValue: pos,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  const toggleVisibility = () => {
    setBoxVisible(!boxVisible);
  };
  const toggleText = boxVisible ? 'Hide' : 'Show';
  const onReset = () => {
    x.current.resetAnimation();
  };
  ...

Picker/PickerIOS officially removed

Part of the Clean Core efforts which surprisingly has not finished. Remove Picker/PickerIOS export from react-native and delete JS related code

Move RuntimeScheduler initialisation to the start of the runtime

While this change is just a implementation detail, I thought it was interesting to highlight how React Native is being tested in Facebook’s production apps.

Reland of D29131766s which had to reverted because it caused binary size regression in instagram.

So far I have seen commits mention Instragram, Marketplace, FB Dating, and Messenger Kids.

This certainly bulletproofs React Native for large production apps. For example, this week the core team reverted the “Avoid re-econding images when uploading local files” commit that went in last week because it was causing an uploading error in their FB Dating app.

If Facebook was not running React Native in their production apps these bugs would leak into the larger users of the codebase.

Allow PlatformColor to work with RCTView border colors

Commit from Danilo Bürger info@danilobuerger.de

Using PlatformColor with border colors doesn’t work currently when switching dark mode as the information is lost when converting to CGColor. This change keeps the border colors around as UIColor so switching to dark mode works.

<View
  style={{
    borderColor: DynamicColorIOS({ dark: "yellow", light: "red" }),
    borderWidth: 1,
  }}
>
...
</View>

Is a refactor of the `VirtualizedList` coming our way?

It’s what this commit indicates. Nick Gerleman ngerlem@microsoft.com added CellRenderMask module that will help track regions of cells/spacers within a list to render.

The implementation keeps this region list internally, splitting or merging regions when cells are added. This output will be used by the render function of a refactored VirtualizedList.

Liquid Swipe - Can it be done in React Native?

William Candillon never stops to impress me, this liquid swipe animation is just mind-blowing.

Source code

It amazes me he was able to do that animation with 456 lines of code spread in 6 files.

rnn-starter kit

I ran across this tweet on rnn-starter’s recent upgrade to latest Hermes and other libraries, I checked it out and it looks like a cool starter scaffold. See repo

That Is It!

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 = )

React Native Weekly - W26 2021