useKeyboardAnimation hook always returns 0

[sriganesh-nagaraj]

Describe the bug useKeyboardAnimation always returns 0 for both height and progress and never changes when the keyboard is opened and closed

Code snippet Just tried a basic usage of hook and logged the values:

const { height, progress } = useKeyboardAnimation()
console.log(height, progress)
// This always logs -0 0

To Reproduce Steps to reproduce the behavior:

Basic installation

1. Add <KeyboardProvider> to the root layout.
2. Use useKeyboardAnimation in one of the screens
3. Log height and progress values

Expected behavior height should change from -0 to height of keyboard when keyboard oepened and vice versa 'progress' should change from 0 to 1

Smartphone (please complete the following information):

• Desktop OS: MacOS 14.2
• Device: Pixel 3A emulator
• OS: Android 14
• RN version: 0.73.4
• RN architecture: [e.g. old/new or paper/fabric]
• JS engine: Hermes
• Expo sdk: 50.0.8
• Expo router: 3.4.8
• Library version: 1.11.2

[kirillzyusko]

Hey @sriganesh-nagaraj 👋

The information you provided is not sufficient - all these steps are implemented in example app and in example app everything works fine.

Please provide a reproduction example.

[kirillzyusko]

@sriganesh-nagaraj also, do you think it can be related to https://github.com/kirillzyusko/react-native-keyboard-controller/issues/256?

[sriganesh-nagaraj]

@sriganesh-nagaraj also, do you think it can be related to #256?

@kirillzyusko thanks for responding. I haven't changed anything in the app.json with respect to navbar

{
  "expo": {
    "name": "trikalajna",
    "slug": "trikalajna",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/trikalajna-icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/images/trikalajna-icon.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.trikalajna"
    },
    "web": {
      "bundler": "metro",
      "output": "static",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": ["expo-router", "expo-font"],
    "experiments": {
      "typedRoutes": true
    }
  }
}

I'm running the development build in emulator. How do i provide a reproducible example? Shall i create a git repo with the same code?

[kirillzyusko]

Shall i create a git repo with the same code?

Yes, please 🙏

[sriganesh-nagaraj]

@kirillzyusko here you go - https://github.com/sriganesh-nagaraj/keyboard-controller-example

[kirillzyusko]

import { TextInput, View } from 'react-native'
import { useKeyboardAnimation } from 'react-native-keyboard-controller'

export default function Home() {
  const { height, progress } = useKeyboardAnimation()
  console.log(height, progress)
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
      }}
    >
      <TextInput
        placeholder="Test react native keyboard controller"
        style={{
          borderColor: 'red',
          borderWidth: 1,
          height: 100,
          width: '100%',
        }}
      />
    </View>
  )
}

If you are trying to log values here you'll not get any updates, because values are animated via nativeDriver and they will not update its value in JS thread (everything is synchronized in native thread). Can you add a simple animation based on transform: [{ translateY: height }] and see if your element has an animation?

If you want to get an access to values in JS/Worklet code you should use https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/hooks/keyboard/use-keyboard-handler - there you can console.log events and they should log actual values to the console. Can you give a try?

[sriganesh-nagaraj]

@kirillzyusko Thanks! It works when I add the animation as you suggested!!. Sorry, I'm new to frontend/RN. I had another question. How do I use the height and progress provided by useKeyboardAnimation with a library like Moti.

I'm trying to pass the height as an animation prop of transform to MotiView but can't since it expects a number.

import { MotiView } from 'moti'
import { useKeyboardAnimation } from 'react-native-keyboard-controller'
import { Input, View } from 'tamagui'

export default function Home() {
  const { height, progress } = useKeyboardAnimation()
  return (
    <View
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 20,
      }}
    >
      <MotiView
        from={{ opacity: 0 }}
        animate={{
          opacity: 1,
          height: 100,
          backgroundColor: 'red',
          width: 100,
          transform: [{ translateY: height }],
        }}
        exit={{ opacity: 0 }}
      />
      <Input
        placeholder="Test react native keyboard controller"
        style={{
          borderColor: 'red',
          borderWidth: 1,
          height: 100,
          width: '100%',
        }}
      />
    </View>
  )
}

[kirillzyusko]

Potentially pass transform: [{ translateY: height }] as style prop:

<MotiView style={{ transform: [{ translateY: height }] } />

But keep in mind, that Moti is based on Reanimated, so you'll need to use useReanimatedKeyboardAnimation hook + useAnimatedStyle to compose style correctly.

Another option would be to wrap your MotiView in plain View, i. e.:

<Animated.View style={{ transform: [{ translateY: height }] }}>
<MotiView
        from={{ opacity: 0 }}
        animate={{
          opacity: 1,
          height: 100,
          backgroundColor: 'red',
          width: 100,
          transform: [{ translateY: height }],
        }}
        exit={{ opacity: 0 }}
      />
</Animated.View>

[sriganesh-nagaraj]

@kirillzyusko Thank you, will check it out.