Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

useReanimatedKeyboardAnimation is not animating the progress value

See original GitHub issue

Describe the bug The progress shared value returned from useReanimatedKeyboardAnimation does not progress the value from 0 to 1

Code snippet

const Example = () => {
  const {progress, height} = useReanimatedKeyboardAnimation();

  const rStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: 'gray',
      height: Math.abs(height.value),
      width: interpolate(progress.value, [0, 1], [100, 200]),
    };
  }, []);

  return (
    <SafeAreaView
      style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <TextInput
        style={{
          borderWidth: 1,
          padding: 10,
          borderColor: 'brown',
          width: '100%',
        }}
      />
      <Button title="dismiss" onPress={() => Keyboard.dismiss()} />
      <Animated.View style={rStyle} />
    </SafeAreaView>
  );
};

Repo for reproducing https://github.com/itsramiel/animated-keyboard

Expected behavior progress shared value do not suddenly switch between 0 and 1, but progress the value between the range 0 and 1 as the keyboard opens

Screenshots

https://user-images.githubusercontent.com/80689446/194716302-664a0092-50a6-4dee-9210-fe187cba02e9.mp4

Smartphone (please complete the following information):

Desktop OS: [MacOS
Device: iiPhone8 plus
OS: iOS 16
RN version: 0.70.x
RN architecture: [e.g. old/new or paper/fabric]
JS engine: Hermes
Library version: 1.3.0

Issue Analytics

State:
Created a year ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

itsramielcommented, Oct 12, 2022

appreciate your effort 🚀

1reaction

kirillzyuskocommented, Oct 8, 2022

Hi @itsramiel Thank you for the issue. This problem does indeed exist and it’s pointed out in documentation:

I’m working on a solution and hopefully in next upcoming release (1.4.0) it will be fixed 🤞

Top Results From Across the Web

html5 progress bar not animating - Stack Overflow

I have HTML5 tag, I added some styles for it and add animation for stripe but it doesn't work as I want. I'm...

First animation | Keyboard Controller - GitHub Pages

useKeyboardAnimation returns Animated values with enabled Native Driver ( useNativeDriver: true ). Thus some properties can not be animated, such as height , ......

animation - CSS: Cascading Style Sheets - MDN Web Docs

An animation-name value is not required to be declared in the animation shorthand property. If no name exists, there is no animation to ......

Animating Progress - Snook.ca

We now have something that looks reasonably consistent across browsers. Changing Progress Value. To animate progress, we need to have the value ......

Progress Bar — Toga 0.3.0.dev39 documentation

ProgressBar(max=100, value=1) # Update progress progress.value = 10. A progress bar can be in one ... Note: Not every platform may support these...