Fling animation Make fling animator customizable

Xin Chen xch@fb.com continued his work on improving and fixing edge cases with the Fling animation in the scroll views. This is related to last week’s work where he fixed some edges cases with the scroll fling animation that came up in VR.

66243271a7a Refactor predictFinalScrollPosition method to the helper class
1c1945569fd Fix mis-use of the post animated value when predict fling distance
ead7b979445 Fix fling and snap in recycler viewgroup where children views not fill up all the scrollable space
fe6277a30d3 Support override predict final scroll position with custom fling animator

Custom name for codegen components

Sota Ogo sota@fb.com extended the codegen script to support custom names which is useful for when the target name and component name are different.

Relanded ScrollView `automaticallyAdjustKeyboardInsets`

Marc Rousavy marcrousavy@hotmail.com had introduced automaticallyAdjustKeyboardInsets and made some fixes to the content inset, however it got reverted because it broke something internally in Facebook and finally this week it was re-introduced. See the PR full description.

Fixed find-node.sh to respect .nvmrc

With this fix, when you build with Xcode you can expect it to correctly pick up the Node version set in .nvmrc of your project, previously it was using the default environment node version..

Introduce TextInput.onKeyPressSync

This is an experimental API. Commit

Note from Samuel Susla samuelsusla@fb.com:

Introduce a way to execute onKeyPress synchronously. This feature is experimental and will be changed in the future. It is not decided if marking native events as “sync” is going to be path forward with synchronous access.

Fire `AnimatedValue.stopAnimation` callback with correct native value

The Animated value’s stopAnimation takes a callback that returns the current value of the animation. Turns out this might not always be in sync with the actual native value according to Eric Rozell ericroz@fb.com. This commit fixes this issue.

  const anim = new Animated.Value(0);
  Animated.timing(anim, {
    duration: 1000,
    useNativeDriver: true,
  }).start();

  const tag = anim.__getNativeTag();

  let currentValue = 0;
  anim.stopAnimation(value => (currentValue = value));

📚 The New Architecture Playbook

The React Native Website should be getting new documentation about the new architecture soon. See the PR here.

Community

Expo SDK 44 will contain Reanimated v2.3 tweet
Jamon’s notes on his interview with Kevin Gozali (RN Core)
Catalin’s posted another cool video doing an animation with Moti
Callstack is releasing the talks from React Native Europe in their Youtube channel.
1 hr tutorial creating a Tesla charger diary with Supabase and React Native

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

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.

React Native Weekly - W50 2021