Why not use the Animated API? about react-native-keyboard-accessory-view

[SudoPlz]

Interesting, I'm not aware of LayoutAnimation but it looks it's just gradually changing the keyboardEndPositionY value.

That being said, since that's a value that get's changed on the JS side I think there would be a performance benefit from making that property an Animated.Value and turning this code:

<View style={StyleSheet.flatten([container, style])} testID='container'>

to something like:

<Animated.View style={StyleSheet.flatten([container, style])} testID='container'>

and the container style object:

container: {
      position: 'absolute',
      transform: [{
            translateY: newKeyboardValue,
      }],
      left: 0,
      right: 0,
    },

newKeyboardValue should be an Animated.Value object created from the equivalent Animated method code (example) resulting from this.

I have a very hard time with hooks, so I don't feel confident making those changes myself. :/

Thanks for your quick response and the work you've put into this library.

[SudoPlz]

Wow, greaaaat work @demchenkoalex kudos my friend!!

[demchenkoalex]

Hi @SudoPlz!

I have spent some time yesterday and come up with something, you can see the changes here. (feature/animated branch)

Basically, main differences are:

• usePanResponder which returns an Animated value

const panResponder = React.useRef(
  PanResponder.create({
    onPanResponderMove: Animated.event([null, { moveY: positionY }], {
      useNativeDriver: false,
    }),
    onPanResponderEnd: () =>
      Animated.timing(positionY, {
        duration: 0,
        toValue: 0,
        useNativeDriver: false,
      }).start(),
  })
).current

• some calculations in the KeyboardAccessoryView

const deltaY = Animated.subtract(
  panResponderPositionY ?? new Animated.Value(0),
  keyboardEndPositionY
)
...
<Animated.View
  style={StyleSheet.flatten([
    {
      bottom: keyboardHeight,
      transform: [
        {
          translateY: deltaY.interpolate({
            inputRange: [0, Number.MAX_VALUE],
            outputRange: [0, Number.MAX_VALUE],
            extrapolate: 'clamp',
          }),
        },
      ],
    },
    container,
    style,
  ])}
  testID='container'
>

As you can see, I left a bottom property with a keyboardHeight value, so we only animate the pan gesture, no need to make useKeyboardDimensions to return Animated, because it works perfectly and on Android there is no animation whatsoever + contentBottomInset is calculated based on the keyboard and accessory view sizes and it is better to be a number, not Animated.

This solution works, but there is one problem I can't solve which looks like this

This is because this piece of code makes an animation when keyboard hides, starting from the previous state, bottom position, which is changed between 0 and keyboardHeight

if (duration && easing) {
  // We have to pass the duration equal to minimal accepted duration defined here: RCTLayoutAnimation.m
  const animationDuration = Math.max(duration, 10)

  LayoutAnimation.configureNext({
    duration: animationDuration,
    update: {
      duration: animationDuration,
      type: LayoutAnimation.Types[easing],
    },
  })
}

and previously, in the onPanResponderEnd function, simple delay was enough setTimeout(() => setPositionY(0), 10), but it is not the case with the Animated value.

I'd rather have less performant version, but without artefacts, what do you think? I will also try change some things here and there, but I am not sure I will able to resolve this problem.

UPD: No luck. Tried Animated.setValue, with and without setTimeout, Animated.timing with and without delay, duration, LayoutAnimation, everything is the same or worse 😕

[demchenkoalex]

Hi, thanks for the comment. I am using LayoutAnimation to animate the transition, and that chunk of code is taken from the React Native. During the interactive dismiss I have the Y position so it was straightforward to me to just place it as a bottom for the view, so I have never really considered Animated API.

Regarding the performance, some optimisations were added (like useCallback) and I did verify performance penalty using Profiler in Flipper, and saw mostly green updates.

How would you see Animated API implemented here? I will just drive it's value using PanResponder and apply it to the translate transformation or something?

Thanks

[demchenkoalex]

Thanks for the suggestions and I will look into it, hopefully making this even faster :)

[demchenkoalex]

#3 Resolved by driving bottom value, not translateY. Saw a performance boost. Thanks @SudoPlz once again 👍

[SudoPlz]

That being said, why did you turn useNativeDriver to false?
Can you enable that to make sure those animations run on the main thread?
When it's set to false, they still run on the js thread.

[demchenkoalex]

@SudoPlz it is crashing with true ;) says something about PanResponder not working with useNativeDriver