[Web] Safari with reanimated value doesn't work

[PierreCapo]

Describe the bug
Using useReanimatedKeyboardAnimation (and possibly other APIs) on Safari seems to not work

Code snippet

import { Text, TextInput, View, TouchableOpacity } from 'react-native'
import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller'
import Animated, { useAnimatedStyle } from 'react-native-reanimated'

export default () => {
  const { height } = useReanimatedKeyboardAnimation()
  const animatedSpacingBelowButton = useAnimatedStyle(() => {
    return { height: -height.value + 24 }
  })

  return (
    <View
      style={{
        paddingTop: 50,
        paddingBottom: 24,
        paddingHorizontal: 16,
        flex: 1,
      }}
    >
      <TextInput
        placeholder="Text Input"
        style={{
          height: 48,
          width: '100%',
          backgroundColor: 'gray',
          fontSize: 16,
        }}
      />
      <View style={{ flex: 1 }} />
      <TouchableOpacity
        style={{
          backgroundColor: 'orange',
          height: 50,
          borderRadius: 50,
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Text>Button</Text>
      </TouchableOpacity>
      <Animated.View style={animatedSpacingBelowButton} />
    </View>
  )
}

To Reproduce
Tap on the TextInput to display the keyboard.

Expected behavior
The reanimated value should be updated when the keyboard appears and the button should moves up

Screenshots

chrome_based.MP4

safari.MP4

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: iPhone 13 mini
• OS: iOS 18.1
• RN version: 0.76.1
• RN architecture: New
• JS engine: Hermes
• Library version: 1.14.4

[PierreCapo]

@kirillzyusko other than that, I take this issue as an opportunity to tell you thanks a lot for this awesome library 🙏 🙏 🙏

[kirillzyusko]

Hi @PierreCapo

On web this library simply acts as mock and doesn't do anything useful 😔 It just relies on default keyboard handling mechanisms (depending on browser - you can log values from my hook and you will see that they are not changing in both cases).

There is an open discussion for web support - #43
However Safari still doesn't support Virtual Keyboard API (and it looks like Apple engineers don't bother to add it in a near term) 😔

I take this issue as an opportunity to tell you thanks a lot for this awesome library 🙏 🙏 🙏

Thank you ❤️

[kirillzyusko]

@PierreCapo I'm going to close that issue because it's not something that I can fix at the moment.

However, if you want to contribute to this project and push the progress forward - you can prepare web example. An ideal thing in my head is that we can re-use code from example and share js code between example/FabricExample/web projects. If you can do that (i. e. create web project using expo and create workspaces to share a code between projects that would be a dope! ❤️)