kirillzyusko / react-native-keyboard-controller Goto Github PK

Describe the bug
Hard crash with this error been thrown

Reproduction is possible in your example repo.

Upon routing into a deeper stack. Home -> Chat with Keyboard Handler -> Forward Friend --- Back Button ---> Chat with Keyboard Handler -> Open Keyboard -> Full Android Crash

java.lang.IllegalArgumentException: Can not copy bounds as view is not laid out or attached to window
08-11 12:59:11.486  4446  4446 E AndroidRuntime: 	at com.reactnativekeyboardcontroller.extensions.ViewKt.copyBoundsInWindow(View.kt:45)

Repo for reproducing
https://github.com/ImBeCiliC/keyboard-controller-crash-1

To Reproduce
Steps to reproduce the behavior:

1. Go to 'interactive keyboard'
2. Open Keyboard
3. Press Yellow Navigation Button
4. Navigate Back
5. Open Keyboard
6. Try to Scroll the Chat View
7. CRASH

Smartphone (please complete the following information):

• OS: Android only
• RN version: as in example repo
• RN architecture: as in example repo
• JS engine: as in example repo
• Library version: 1.5.8

Additional context
In the Example the height of the fake view is strange after back navigation

Removing the KeyboardGestureArea removes the crash. Also in my example repo so you can check it out.

Appreciate the nice library and helped improve the React Native Keyboard issues we had in the past 🎉

Could it be possible to have the ability to trigger the display of the keyboard in audio recording mode by default?
Ideally both Android and iPhone.

Describe the bug
I'm trying to replicate the KeyboardAwareScrollView behavior fromreact-native-keyboard-aware-scroll-view. Using the KeyboardAwareScrollView found in /examples, I noticed the scroll view scrolls more than it needs to:

Notice how once I press the input with the scroll begins here placeholder, it scrolls much further than it should. I'm trying to make the input align with my sticky action bar (it should be a fixed amount above the sticky bar).

Code snippet
I used the code from your examples folder, with one modification:

const maybeScroll = useWorkletCallback(
  (e: number) => {
    "worklet";

    const visibleRect = height - keyboardHeight.value;

    if (visibleRect - click.value <= extraScrollHeight) {
      fakeViewHeight.value = e;

      const interpolatedScrollTo = interpolate(
        e,
        [0, keyboardHeight.value],
        [
          0,
          keyboardHeight.value - (height - click.value) + extraScrollHeight,
        ]
      );
      const targetScrollY =
        Math.max(interpolatedScrollTo, 0) + scrollPosition.value;

      scrollTo(scrollViewAnimatedRef, 0, targetScrollY, false);
    } else {
      fakeViewHeight.value = 0;
    }
  },
  [extraScrollHeight]
);

I added an if/else branch that skips scrolling when the click wouldn't overlap with the keyboard + bottom offset. Now, I need to figure out the right interpolation math that causes the view to scroll only by the right/minimum amount.

note: extraScrollHeight is a prop, similar to your BOTTOM_OFFSET.

Let me know if I can help with more details! I believe this would be a great addition to the component, since it enables a more seamless migration from react-native-keyboard-aware-scroll-view.

Describe the bug

When you modify status bar appearance, then animation values returned from hook are always frozen and are not updating when keyboard appears.

Code snippet

Try to add it to Animated transition screen:

<StatusBar
    translucent
    backgroundColor="rgba(0,0,0,0)"
    barStyle="dark-content"
/>

To Reproduce
Steps to reproduce the behavior:

1. Add a snippet above to any screen in example app;
2. Go to this screen
3. Interact with app to open a keyboard

Expected behavior

Elements, which depends on animated values returned from useKeyboardAnimation (and other hooks) should be animated correspondingly.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: MacOS 12.3.1
• Device: any android emulator
• OS: Android < 11
• JS engine: tested on JSC
• Library version: 1.0.0-alpha.3

Additional context
Add any other context about the problem here.

Describe the bug
The keyboards jumps up sometimes when trying to close it with interactively. It seems to happen only when the scrollview is not big enough

It looks like a race between values. One trying to push down and the other value still not being informed and resetting to an old value

Expected behavior
Should close smoothly without jumping.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone 13 Pro Max
• OS: 16.5.1
• RN version: SDK 48
• RN architecture: old arch
• JS engine: hermes
• Library version: 1.5.7

Describe the bug
in android 10 and below, when navigating using react-navigation/native, when going back the keyboard values and events stop responding.

in screen A everything is fine, when i go to screen B, everything is fine too, but when i go back to screen A (by using hardware back or navigation lib back) the animation and values stop updating in screen A.
when navigate to screen B or C, the new screen will respond correctly.

this happened only in android 10 and below, android 11+ work perfectly!

Code snippet

export default function KeyboardAnimation() {
  const { height, progress } = useKeyboardAnimation();
  const { height: heightReplica } = useKeyboardAnimationReplica();
  const navigation = useNavigation()

  return (
    <View style={styles.container}>
      <View>
       <Button onPress={()=>{
        navigation.navigate('REANIMATED_CHAT',{})
       }} title='PRESS ME'/>
        <Animated.View
          style={{
            width: 50,
            height: 50,
            backgroundColor: 'green',
            borderRadius: 25,
            transform: [
              {
                translateX: progress.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0, 100],
                }),
              },
            ],
          }}
        />
      </View>
      <View>
        <TextInput
          style={{
            width: 200,
            marginTop: 50,
            height: 50,
            backgroundColor: 'yellow',
          }}
        />
        <View style={[styles.row, styles.center]}>
          <Animated.View
            style={{
              width: 50,
              height: 50,
              backgroundColor: 'red',
              borderRadius: 25,
              transform: [{ translateY: height }],
            }}
          />
          <Animated.View
            style={{
              width: 50,
              height: 50,
              backgroundColor: 'blue',
              borderRadius: 25,
              transform: [{ translateY: heightReplica }],
            }}
          />
        </View>
      </View>
    </View>
  );
}

Repo for reproducing
i don't have, add button in the example code, navigate from 'KeyboardAnimation' screen to 'ReanimatedChat' screen and go back

To Reproduce
Steps to reproduce the behavior:

1. add the upper code to KeyboardAnimation/index.tsx
2. Click on 1.AnimatedTransition
3. press on the new Button 'PRESS ME'
4. press back on the navigation header
5. open keyboard in screen

Expected behavior
the animations will act as they was when we open the screen for the first time

Screenshots
https://github.com/kirillzyusko/react-native-keyboard-controller/assets/31067303/ef0fcaa0-072b-40ee-862e-4deb595ac192

Smartphone (please complete the following information):

• Desktop OS: MacOs m1 13.4.1
• Device: samsung galaxy s9
• OS: android 10
• RN version: 0.72.4
• RN architecture: old
• JS engine: hermes
• Library version: 1.7.0

Describe the bug

A clear and concise description of what the bug is.

Repo for reproducing

Example app.

To Reproduce

Steps to reproduce the behavior:

1. Go to Interactive keyboard android screen.
2. Click on TextInput
3. Swipe a little bit down and a release a finger (this gesture shouldn't close the keyboard)
4. Change keyboard size by switching to a new input mode

Expected behavior

Hook should return actual keyboard height.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: MacOS 13
• Device: Pixel 7 Pro
• OS: Android 13
• RN version: 0.71
• RN architecture: old (paper)
• JS engine: Hermes
• Library version: 1.5.1

Additional context

I think keyboardProvidet.isInteractive has incorrect value, when finger is released/after animation.

Describe the bug

My StatusBar is translucent in my android app. As soon as I add KeyboardProvider, it reverts that and leaves a white StatusBar which is not covering the app anymore.

Code snippet

Wrap the app with <KeyboardProvider>

Describe the bug
I can not run the example with android + ios

Android error:

Error: react-native-device-info: NativeModule.RNDeviceInfo is null. To fix this issue try these steps:
  • For react-native <= 0.59: Run `react-native link react-native-device-info` in the project root.
  • Rebuild and re-run the app.
  • If you are using CocoaPods on iOS, run `pod install` in the `ios` directory and then rebuild and re-run the app. You may also need to re-open Xcode to get the new pods.
  If none of these fix the issue, please open an issue on the Github repository: https://github.com/react-native-device-info/react-native-device-info
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

IOS error:

 ERROR  Invariant Violation: `new NativeEventEmitter()` requires a non-null argument.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

Code snippet
Add your code snippet where error has been occurred.

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Yarn
2. run pod using terminal( because im using m1)
3. cd example
4. yarn android/ yarn ios

Smartphone (please complete the following information):

• Desktop OS: Mac OS 12.6
• Device: simulator 16.0 + emulator android 33
• OS: ios + android
• RN version: 0.681
• RN architecture: [e.g. old/new or paper/fabric]
• JS engine: JSC
• Library version: lasted

Additional context
Add any other context about the problem here.

KeyboardProvider component not working with android but works with IOS

<GestureHandlerRootView style={{ flex: 1 }}>

//// my navigation

Describe the bug
I'm so sorry, buy I need you help, please
In my application, I need to implement a menu similar to the sticker menu, as in telegram. Accordingly, it should be possible to open without opening the keyboard. And the height of the menu should be equal to the height of the keyboard.

Expected behavior
There is some value of keyboard height from hook or something.

Screenshots

Additional context
Here is a video of how I want to

Hi @kirillzyusko,

I just followed your comment on the REA issue and reviewed your package a bit.
Looks very promising. I think it would be nice if you could add a Readme GIF, this usally helps a lot for decision making and give better insight how your module works.

I would love to see the keyboard sync before giving this a try.

Thanks for working on this! It has been years and it is still a pain to handle keyboard and inputs in RN

Describe the bug
When changing the AndroidSoftInputMode, neither SOFT_INPUT_ADJUST_PAN or SOFT_INPUT_ADJUST_RESIZE works

Code snippet

export default function ScreenExample({ navigation }: Props) {
  useEffect(() => {
    KeyboardController.setInputMode(
      AndroidSoftInputModes.SOFT_INPUT_ADJUST_PAN
    );
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <View style={styles.inner}>
        <Text style={styles.heading}>Header</Text>
        <View>
          <TextInput
            placeholder="Username"
            placeholderTextColor="#7C7C7C"
            style={styles.textInput}
          />
          <TextInput
            placeholder="Password"
            placeholderTextColor="#7C7C7C"
            style={styles.textInput}
          />
        </View>
        <TouchableOpacity style={styles.button}>
          <Text style={styles.text}>Submit</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

Screenshots

Smartphone (please complete the following information):

• Device: redmi pro 8
• Library version: 1.7.0

Describe the bug
A clear and concise description of what the bug is.
animated refs don't update in keyboard handlers and always return null/undefined, however if I try to use it in another REA hooks they works fine.

Code snippet
Add your code snippet where error has been occurred.

const AnimatedRefExample = ({ children }) => {
  const animatedRef = useAnimatedRef();

  useGenericKeyboardHandler(
    {
      onStart: (e) => {
        "worklet";

        console.log(animatedRef.current); // null
      },
      onMove: (e) => {
        "worklet";

        console.log(animatedRef.current); // null
      },
      onEnd: () => {
        "worklet";

        console.log(animatedRef.current); // null
      },
    },
    [],
  );

  return (
    <Reanimated.ScrollView ref={animatedRef} scrollEventThrottle={16}>
      {children}
    </Reanimated.ScrollView>
  );
};

Expected behavior
A clear and concise description of what you expected to happen.

animated refs should update properly.

Describe the bug

Animated values from useKeyboardAnimation are not reacting to keyboard size changes.

Repo for reproducing

Just open any screen (Animated transition, Chat) in example app and try to change the input mode (for example switch keyboard to emoji selection).

To Reproduce
Steps to reproduce the behavior:

1. Go to Animated transition screen;
2. Click on TextInput
3. See that red and green circles have been moved accordingly.
4. Change keyboard type to emoji selection
5. See that red and green circles hasn't changed its position.

Expected behavior

Returned values from useKeyboardAnimation should respect to keyboard size changes and should update its values.

Screenshots

Actual	Expected

Using standard keyboard both circles are located above the keyboard, but when you change keyboard type - red circle (driven by useKeyboardAnimation) is getting overlapped by the keyboard.

Smartphone:

• Desktop OS: Mac OS 12.5
• Device: Pixel 3 (emulator)
• OS: Android API 32
• JS engine: JSC
• Library version: 1.0.1

thanks a lot for your work
I have encountered a problem and need your help. I have added a setAnimeteHeight method in ios, but it has no animation. I look forward to your help

in KeyboardControllerViewManager.swift
@objc func setAnimeteHeight(_ height: NSNumber) {
onEvent(event: "onKeyboardMoveStart", height: height, progress: 1)
}

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
Hi @kirillzyusko, Thanks a lot for the library. I would like to suggest you implementation of jestUtils, because It would be really great to have possibility to mock keyboard events in jest.

Describe the solution you'd like
A clear and concise description of what you want to happen.

create a mock implementation for opening/closing keyboard events. In jest it will look like this:

const { getByTestId } = render(<SomeComponentWithKeyboardHandler />);

expect(getByTestId("keyboardEventsView").toHaveAnimatedStyle({
 height: 0,
}) // or just simple style if you use Animated from RN core;

RNKeyboardHandler.openKeyboard(state);  // state - height, progress

expect(getByTestId("keyboardEventsView").toHaveAnimatedStyle({
 height: 100,
}) 

RNKeyboardHandler.hideKeyboard(state);  // state - height, progress

expect(getByTestId("keyboardEventsView").toHaveAnimatedStyle({
 height: 0,
}) 

Additional context
Add any other context or screenshots about the feature request here.
I have some ideas how to implement this logic and we can contact to discuss it :)

example currently use reanimated 2, any change you could upgrade it to use the latest version of reanimated ?

Describe the bug
In my React Native app, on forms with a text input and Expo image picker, pressing a text input after opening/closing the image picker causes the app to crash. Simply wrapping the app in <KeyboardProvider> is enough to cause this behaviour, without using any other components from react-native-keyboard-controller.

Code snippet
Note, although this snippet uses react-hook-forms, the crashing behaviour happens elsewhere in the app where this isn't used.

...
  return (
    <ScrollView
      contentContainerStyle={styles.container}
      style={styles.background}
      showsVerticalScrollIndicator={false}
      >
        <View>
          <Controller
            control={control}
            name={"bannerImage"}
            render={renderBannerImagePicker}
          />
        </View>
      <View style={styles.formSection}>
        <Label
          required
          text={i18n.t("screens.birdingGroupCreateChallenge.name")}
        />
        <Controller name={"name"} control={control} render={renderName} />
      </View>
      </ScrollView>

App.tsx

...
  return (
    <KeyboardProvider>
      <GestureHandlerRootView style={styles.gestureView}>
        <LoginProvider
          isLoggedIn={isLoggedIn && !!currentUser}
          currentUser={currentUser}
        >
          <DatabaseProvider>
            <ApolloProvider client={client}>
              <CachePersistorProvider>
                <SafeAreaProvider>
                  <ActionSheetProvider>
                    <SuggestionsProvider>
                      <FeedWeightingProvider>
                        <>
                          <Navigation />
                          <StatusBar style="dark" />
                        </>
                      </FeedWeightingProvider>
                    </SuggestionsProvider>
                  </ActionSheetProvider>
                </SafeAreaProvider>
              </CachePersistorProvider>
            </ApolloProvider>
          </DatabaseProvider>
        </LoginProvider>
      </GestureHandlerRootView>
    </KeyboardProvider>
  );

Error copied from Apple console on Macbook (iPhone connected by USB):

runOperations: -[_UIKeyboardArbiter retrieveClientDebugInformationWithCompletion:] Failed to access <_UIKeyboardArbiterClientHandle: 0x28080e470; PID 14229: com.chirpbirding.birda-dev <<UIKBArbiterClientFocusContext: 0x283970640; contextID = 2f109a25; sceneIdentity = com.apple.frontboard.systemappservices::FBSceneManager:sceneID%3Acom.chirpbirding.birda-dev-default >>; hosting PIDs {(
)}; level 5.000000; active YES [wants YES]; suppression 0; iav 0.000000; on screen YES; isAcquiringFocus: NO> remote service: Error Domain=NSCocoaErrorDomain Code=4099 "The connection from pid 14229 on mach service named com.apple.UIKit.KeyboardManagement.hosted was invalidated: client is gone." UserInfo={NSDebugDescription=The connection from pid 14229 on mach service named com.apple.UIKit.KeyboardManagement.hosted was invalidated: client is gone.}

To Reproduce
Steps to reproduce the behavior:

1. Go to a form with an image picker and text input
2. Press the text input and type something - verify that it works correctly and doesn't crash
3. Press the image picker. Picker opens
4. Choose an image or press cancel (doesn't matter which). Returns to form
5. Press text input. App crashes and closes immediately to the device desktop

Expected behavior

1. Go to a form with an image picker and text input
2. Press the text input and type something - verify that it works correctly and doesn't crash
3. Press the image picker. Picker opens
4. Choose an image or press cancel (doesn't matter which). Returns to form
5. Press text input and type something - it works correctly and doesn't crash

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: iPhone X
• OS: IOS 16.4.1
• RN version: 0.71.6
• RN architecture: old
• JS engine: Hermes
• Library version: 1.5.3 (also tried 1.4.4 to no avail)

Describe the bug

UI looks jumpy when I'm trying to scroll the content

Repo for reproducing

It's reproducible in example app.

To Reproduce

Steps to reproduce the behavior:

1. Go to 'Interactive keyboard (android)' screen
2. Click on 'linear' in top right corner (it'll switch interpolator to ios mode)
3. Try to scroll content as you typically do on iOS
4. keyboard tries to be closed, but then appears and UI looks jumpy

Expected behavior

Keyboard shouldn't try to close itself, since gesture occurs in non keyboard area (gesture not affects keyboard position).

Screenshots

Smartphone (please complete the following information):

• Desktop OS: [e.g. Windows 10, MacOS 10.15.5]
• Device: Pixel 7 Pro
• OS: Android 13
• RN version: 0.71.11
• RN architecture: old
• JS engine: Hermes
• Library version: 1.5.7

Additional context

I think we should just call animateToFinish only when keyboard position was changed after the gesture. Otherwise we shouldn't call this method.

Describe the bug
iOS crashes when using a native alert while the keyboard is shown, I can confirm this only happens if the app is wrapped in the KeyboardProvider, removing the Keyboard provider from the snippet below will avoid the crash on ios.

Code snippet

import { Alert, Button, TextInput, View } from "react-native";
import { KeyboardProvider } from "react-native-keyboard-controller";

export function App() {
  return (
    <KeyboardProvider>
      <TestView />
    </KeyboardProvider>
  );
}

function TestView() {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <TextInput placeholder="PLACHOLDER TEXT" />
      <Button
        onPress={() => {
          Alert.alert("Hello");
        }}
        title="Show Alert"
      />
    </View>
  );
}

Repo for reproducing
No repo provided as the code sample is simple enough to paste into a running env without having to checkout and build another repo.

To Reproduce
Steps to reproduce the behavior:

1. Select placeholder text to expose keyboard
2. press show alert button
3. see crash

Expected behavior
Alerts should not crash the app when the keyboard is shown

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Desktop OS: MacOS 13.4 (22F66)
• Device: iPhone 13 pro
• OS: 16.5
• RN version: 0.71.8 - Expo SDK 48.0.18
• RN architecture: old arch
• JS engine: hermes
• Library version: 1.5.6

Describe the bug

We have a crash that occurs on iOS when reading the reanimated keyboard height.

Code snippet

  const { height: keyboardHeight } = useReanimatedKeyboardAnimation()

Repo for reproducing
It's in our main application. I can't provided a project to reproduce at this time.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

mobile[62515:8433225] *** Terminating app due to uncaught exception 'NSRangeException', reason: 'Cannot remove an observer <KeyboardMovementObserver 0x600007c9cba0> for the key path "center" from <UIInputSetHostView 0x1342e19e0> because it is not registered as an observer.'
*** First throw call stack:
(
	0   CoreFoundation                      0x0000000180437330 __exceptionPreprocess + 172
	1   libobjc.A.dylib                     0x0000000180051274 objc_exception_throw + 56
	2   Foundation                          0x0000000180b2f1e0 -[NSObject(NSKeyValueObserverRegistration) _removeObserver:forProperty:] + 616
	3   Foundation                          0x0000000180b2f5bc -[NSObject(NSKeyValueObserverRegistration) removeObserver:forKeyPath:] + 132
	4   Foundation                          0x0000000180b2f4d0 -[NSObject(NSKeyValueObserverRegistration) removeObserver:forKeyPath:context:] + 184
	5   mobile                              0x00000001033eaf6c $s32react_native_keyboard_controller24KeyboardMovementObserverC16removeKVObserver33_98D42DC26656EA4CABF65DBC7E7C9563LLyyF + 192
	6   mobile                              0x00000001033eabb4 $s32react_native_keyboard_controller24KeyboardMovementObserverC21windowDidBecomeHiddenyy10Foundation12NotificationVF + 36
	7   mobile                              0x00000001033eac38 $s32react_native_keyboard_controller24KeyboardMovementObserverC21windowDidBecomeHiddenyy10Foundation12NotificationVFTo + 120
	8   CoreFoundation                      0x000000018036bff8 __CFNOTIFICATIONCENTER_IS_CALLING_OUT_TO_AN_OBSERVER__ + 140
	9   CoreFoundation                      0x000000018036bf1c ___CFXRegistrationPost_block_invoke + 84
	10  CoreFoundation                      0x000000018036b424 _CFXRegistrationPost + 404
	11  CoreFoundation                      0x000000018036ae10 _CFXNotificationPost + 664
	12  Foundation                          0x0000000180b5309c -[NSNotificationCenter postNotificationName:object:userInfo:] + 88
	13  UIKitCore                           0x0000000116dd3314 -[UIWindow _setHidden:forced:] + 680
	14  UIKitCore                           0x0000000116c380ec -[_UIRemoteKeyboards setWindowEnabled:force:] + 324
	15  UIKitCore                           0x0000000116c3a6b4 -[_UIRemoteKeyboards setWindowLevel:sceneLevel:forResponder:] + 588
	16  UIKitCore                           0x000000011683f8f8 -[UIKeyboardSceneDelegate setWindowLevel:sceneLevel:forResponder:] + 144
	17  UIKitCore                           0x000000011684048c -[UIKeyboardSceneDelegate setTextEffectsWindowLevelForInputView:responder:] + 864
	18  UIKitCore                           0x0000000116843cc4 -[UIKeyboardSceneDelegate setKeyWindowSceneInputViews:animationStyle:] + 524
	19  UIKitCore                           0x0000000116843a84 -[UIKeyboardSceneDelegate setInputViews:animationStyle:] + 132
	20  UIKitCore                           0x0000000116844a54 -[UIKeyboardSceneDelegate setInputViews:animated:] + 72
	21  UIKitCore                           0x0000000116844aa4 -[UIKeyboardSceneDelegate setInputViews:] + 52
	22  UIKitCore                           0x0000000116842b48 __102-[UIKeyboardSceneDelegate _reloadInputViewsForKeyWindowSceneResponder:force:fromBecomeFirstResponder:]_block_invoke.314 + 24
	23  UIKitCore                           0x0000000116c10d0c __65-[UIPeripheralHost(UIKitInternal) queueDelayedTask:forKey:delay:]_block_invoke + 156
	24  libdispatch.dylib                   0x0000000106bb1d50 _dispatch_client_callout + 16
	25  libdispatch.dylib                   0x0000000106bb5208 _dispatch_continuation_pop + 756
	26  libdispatch.dylib                   0x0000000106bcc8d4 _dispatch_source_invoke + 1676
	27  libdispatch.dylib                   0x0000000106bc2634 _dispatch_main_queue_drain + 848
	28  libdispatch.dylib                   0x0000000106bc22d4 _dispatch_main_queue_callback_4CF + 40
	29  CoreFoundation                      0x000000018039a784 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 12
	30  CoreFoundation                      0x0000000180394de4 __CFRunLoopRun + 1912
	31  CoreFoundation                      0x0000000180394254 CFRunLoopRunSpecific + 584
	32  GraphicsServices                    0x0000000188eb7c9c GSEventRunModal + 160
	33  UIKitCore                           0x0000000116d9aff0 -[UIApplication _run] + 868
	34  UIKitCore                           0x0000000116d9ef3c UIApplicationMain + 124
	35  mobile                              0x00000001027f7ed8 main + 96
	36  dyld                                0x0000000106579514 start_sim + 20
	37  ???                                 0x0000000106699f28 0x0 + 4402552616
	38  ???                                 0x3a17800000000000 0x0 + 4185955116152520704
)

Smartphone (please complete the following information):

• iPhone 14 Pro, iOS 16.4, Xcode 14.3

Describe the bug

After upgrading to >=1.6.0, all my content is pushed below the status bar which defeats the purpose of setting it to be translucent. I believe @kirillzyusko missed this because you tested with headerShown: true, but this is not sufficient for the cases where we want to render content below the status bar.

Code snippet

<StatusBar
  translucent
  backgroundColor="transparent"
/>

Repo for reproducing

Use native-stack with headerShown property set to false and statusBarTranslucent property set to true

Let me know if I should provide a repo but the bug should be quite self-explanatory.

To Reproduce
Steps to reproduce the behavior:

1. Set StatusBar to be translucent via one of the following methods:

• screenOptions.statusBarTranslucent: true in native stack
• StatusBar.setTranslucent(true)
• <StatusBar translucent />

2. Make sure that header is set to not show

• screenOptions.headerShown: false

3. See that the content is being pushed below the StatusBar

Expected behavior

Content should be rendered under the status bar

Screenshots

Issue

Expected

Smartphone (please complete the following information):

• Device: Pixel 7 Pro
• OS: Android 13
• RN version: 0.72.4
• RN architecture: Paper
• JS engine: Hermes
• Library version: 1.6.0 and above

Describe the bug
A clear and concise description of what the bug is.
If I add padding bottom on scrollview performances are really bad.
Code snippet
Add your code snippet where error has been occurred.

  const {height: platform} = useReanimatedKeyboardAnimation();
  const height = useDerivedValue(() => platform.value, []);
  const {bottom} = useSafeAreaInsets();
  const scrollViewStyle = useAnimatedStyle(() => {
    const paddingBottom = interpolate(
      height.value,
      [0, bottom],
      [bottom, 0],
      Extrapolation.IDENTITY,
    );

    return {
      transform: [{translateY: height.value}],
      paddingBottom,
    };
  }, [bottom]);
  const textInputStyle = useAnimatedStyle(
    () => ({
      height: 50,
      width: '100%',
      backgroundColor: 'red',
    }),
    [],
  );

  const renderMessage = useCallback(props => {
    const {
      currentMessage: {text: currText},
    } = props;

    let messageTextStyle;

    // Make "pure emoji" messages much bigger than plain text.
    if (currText && emojiUtils.isPureEmojiString(currText)) {
      messageTextStyle = {
        fontSize: 28,
        // Emoji get clipped if lineHeight isn't increased; make it consistent across platforms.
        lineHeight: Platform.OS === 'android' ? 34 : 30,
      };
    }

    return <SlackMessage {...props} messageTextStyle={messageTextStyle} />;
  }, []);

  return (
    <Reanimated.ScrollView
      showsVerticalScrollIndicator={false}
      style={scrollViewStyle}
      contentContainerStyle={{flex: 1}}>
      <GiftedChat
        minInputToolbarHeight={0}
        messages={messages || []}
        user={{
          _id: user?.user?.id,
        }}
        renderInputToolbar={_ => undefined}
        renderComposer={_ => undefined}
        renderMessage={renderMessage}
        renderUsernameOnMessage={true}
      />
      <AnimatedTextInput placeholder={'blam'} style={textInputStyle} />
    </Reanimated.ScrollView>
  );
};

Attached videos:
With padding bottom:

Without padding bottom:

Is your feature request related to a problem? Please describe.
Hi,
In most of the cases in app we just want to move button on top if it is open or something like that.
So it is missing base component that will do this thing. it isn't handy to build animation again and again for simply placing button on top.

Because of that, I would suggest adding base Component that will do simple avoiding like the below:

import React from 'react';
import { useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
import Animated,  { interpolate, useAnimatedStyle, Extrapolation }  from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface IKeyboardAwareComponent {
  children: React.ReactNode;
  withBottomInset: boolean;
}


function KeyboardAwareComponent({ children, withBottomInset, ...rest }: IKeyboardAwareComponent) {
  const { height } = useReanimatedKeyboardAnimation();
  const { bottom } = useSafeAreaInsets();

  const styles = useAnimatedStyle(() => {
    const paddingBottom = withBottomInset ? interpolate(
      height.value,
      [0, bottom],
      [bottom, 0],
      Extrapolation.IDENTITY,
    ) : 0;
    
    return {
      transform: [{ translateY: height.value }],
      paddingBottom,
    };
  }, [bottom]);

  return (
    <Animated.View style={styles} {...rest}>
      {children}
    </Animated.View>
  );
}

export default KeyboardAwareComponent;

This solution will work only if it is a fixed button, without any scroll.
Depending on where you will put the relative position in the parent component it most likely will work in most cases.
Sorry I didn't answer other paragraphs and I removed it.

Thank you.
Great library btw.

Thanks for the amazing library.

Describe the bug
I have multiple inputs inside KeyboardAwareScrollView. When I press the bottom input that scroll up but in my case it scrolls down when the keyboard hides and sometimes it scrolls up if I press input again (description input in video)

Code snippet
KeyboardAwareScrollView:

const KeyboardAwareScrollView: FC<ScrollViewProps> = ({ children, ...rest }) => {
	const scrollViewAnimatedRef = useAnimatedRef<Reanimated.ScrollView>();
	const scrollPosition = useSharedValue(0);
	const position = useSharedValue(0);
	const layout = useSharedValue<MeasuredDimensions | null>(null);
	const fakeViewHeight = useSharedValue(0);
	const keyboardHeight = useSharedValue(0);
	const tag = useSharedValue(-1);
	const initialKeyboardSize = useSharedValue(0);
	const scrollBeforeKeyboardMovement = useSharedValue(0);

	const { height } = useWindowDimensions();

	const onScroll = useAnimatedScrollHandler(
		{
			onScroll: (e) => {
				position.value = e.contentOffset.y;
			},
		},
		[],
	);
	const measureByTag = useWorkletCallback((viewTag: number) => {
		return measure((() => viewTag) as unknown as RefObjectFunction<Component<{}, {}, any>>);
	}, []);

	/**
	 * Function that will scroll a ScrollView as keyboard gets moving
	 */
	const maybeScroll = useWorkletCallback((e: number, animated = false) => {
		fakeViewHeight.value = e;

		const visibleRect = height - keyboardHeight.value;
		const point = (layout.value?.pageY || 0) + (layout.value?.height || 0);

		if (visibleRect - point <= BOTTOM_OFFSET) {
			const interpolatedScrollTo = interpolate(
				e,
				[initialKeyboardSize.value, keyboardHeight.value],
				[0, keyboardHeight.value - (height - point) + BOTTOM_OFFSET],
			);
			const targetScrollY = Math.max(interpolatedScrollTo, 0) + scrollPosition.value;
			scrollTo(scrollViewAnimatedRef, 0, targetScrollY, animated);
		}
	}, []);

	useSmoothKeyboardHandler(
		{
			onStart: (e) => {
				'worklet';

				const keyboardWillChangeSize = keyboardHeight.value !== e.height && e.height > 0;
				const keyboardWillAppear = e.height > 0 && keyboardHeight.value === 0;
				const keyboardWillHide = e.height === 0;
				if (keyboardWillChangeSize) {
					initialKeyboardSize.value = keyboardHeight.value;
				}

				if (keyboardWillHide) {
					// on back transition need to interpolate as [0, keyboardHeight]
					initialKeyboardSize.value = 0;
					scrollPosition.value = scrollBeforeKeyboardMovement.value;
				}

				if (keyboardWillAppear || keyboardWillChangeSize) {
					// persist scroll value
					scrollPosition.value = position.value;
					// just persist height - later will be used in interpolation
					keyboardHeight.value = e.height;
				}

				// focus was changed
				if (tag.value !== e.target || keyboardWillChangeSize) {
					tag.value = e.target;

					if (tag.value !== -1) {
						// save position of focused text input when keyboard starts to move
						layout.value = measureByTag(e.target);
						// save current scroll position - when keyboard will hide we'll reuse
						// this value to achieve smooth hide effect
						scrollBeforeKeyboardMovement.value = position.value;
					}
				}
			},
			onMove: (e) => {
				'worklet';

				maybeScroll(e.height);
			},
			onEnd: (e) => {
				'worklet';

				keyboardHeight.value = e.height;
				scrollPosition.value = position.value;

				if (e.target !== -1 && e.height !== 0) {
					const prevLayout = layout.value;
					// just be sure, that view is no overlapped (i.e. focus changed)
					layout.value = measureByTag(e.target);
					maybeScroll(e.height, true);
					// do layout substitution back to assure there will be correct
					// back transition when keyboard hides
					layout.value = prevLayout;
				}
			},
		},
		[height],
	);

	const view = useAnimatedStyle(
		() => ({
			height: fakeViewHeight.value,
		}),
		[],
	);

	return (
		<Reanimated.ScrollView
			ref={scrollViewAnimatedRef}
			{...rest}
			onScroll={onScroll}
			scrollEventThrottle={16}>
			{children}
			<Reanimated.View style={view} />
		</Reanimated.ScrollView>
	);
};

Inputs:

<KeyboardAwareScrollView
			style={styles.container}
			contentContainerStyle={{
				padding: scale.md,
			}}>
			<MediaPicker
				images={images}
				setImages={setImages}
				expandBottomSheet={expandRequirementsBottomSheet}
			/>
			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`productName`}
						value={value}
						hasHeadLabel
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.productNameRU?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'productNameRU'}
			/>
			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`productDescription`}
						value={value}
						multiline
						numberOfLines={5}
						maxLength={1000}
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.descriptionKK?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'descriptionKK'}
			/>
			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`t('productDescription')`}
						value={value}
						multiline
						numberOfLines={5}
						maxLength={1000}
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.descriptionRU?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'descriptionRU'}
			/>
			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`productName`}
						value={value}
						hasHeadLabel
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.productNameKK?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'productNameKK'}
			/>

			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`price`}
						value={value}
						hasHeadLabel
						keyboardType="numeric"
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.price?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'price'}
			/>

			<Controller
				control={control}
				rules={{
					required: t('requiredToFill'),
				}}
				render={({ field: { onChange, onBlur, value } }) => (
					<Input
						label={`price`}
						value={value}
						hasHeadLabel
						keyboardType="numeric"
						onBlur={onBlur}
						onChange={onChange}
						info={formState.errors.price?.message}
						infoStyle={{ marginVertical: 0, color: colors.primary }}
					/>
				)}
				name={'price'}
			/>
			{/* <Text style={styles.title}>{t('productGallery')}</Text>
			<AttachMediaPicker
				attach={attach}
				setAttach={setAttach}
				expandBottomSheet={expandRequirementsBottomSheet}
			/> */}
			<Button
				style={styles.submit}
				isLoading={false}
				label={'continue'}
				onPress={onPress}
				isDisabled={isDisabled}
			/>
		</KeyboardAwareScrollView>

Is it because of pan-mode? But i tried to add useResizeMode, but doesnot help

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Create component with multiple inputs
2. Click on bottom input
3. Hide keyboard
4. Click on bottom input
5. Hide keyboard again

Expected behavior
I really don't know why it works this way, because the example without this behavior, everything works correctly.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Desktop OS: [Windows 10]
• Device: [Pixel 4]
• OS: [Android 12]
• RN version: [0.72.4]
• RN architecture: [old]
• JS engine: [Hermes]
• Library version: [1.6.0]

Additional context
Add any other context about the problem here.

First, thank you for your work on providing this package, it is much appreciated!

Issue

On Android, after a reload from the bundler, the keyboard events are no longer received. Steps to reproduce:

1. Build and start the example Android app from this repo.
2. Go to "3. Events".
3. Activate the text input. A notification is displayed that the keyboard is shown. Hide the keyboard, and a corresponding hide notification is shown.
4. Reload the app from the bundler, e.g. by pressing Cmd/Ctrl+M or via the dev menu.
5. Now repeat from step 2 above, but note that no notifications are displayed, indicating that no events are received.

Expected behaviour is that events are still received after a reload.

Platform information

• Desktop OS: macOS 13.1
• Device/OS: Android emulator/API level 31, Huawei P10/Android 7.0, and others.
• RN version: 0.70.5
• RN architecture: default from example app
• JS engine: default from example app
• Library version: 1.4.2

I have not built the example app for iOS, but the events are working properly in the app where the problem was discovered. This seems to be Android specific.

Describe the bug
I just want to run example app and only when i want to try KeyboardAwareScrollView i have this issue:

Code snippet
KeyboardAwareScrollView from Examples/KeyboardAwareScrollView

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'src/screens/Examples/'
2. yarn android

Expected behavior
This screenshot from version where had onContentTouch

Screenshots
After 1.5.8

Smartphone (please complete the following information):

• Desktop OS: [Windows 10]
• Device: [Android Emulator]
• OS: [Android 12]
• RN version: [ 0.71.11]
• RN architecture: [old]
• JS engine: [Hermes]
• Library version: [^1.5.8]

Additional context
When I run the example in version 1.5.7 or earlier, it runs without issue. I don't know, am I missing something, or am I not running the example as expected, or is there something really wrong? I haven't tried it on v3 yet

Describe the bug
Application chashes when input becomes focused. This bug reproduced only on iOS with react-native-keyboard-controller 1.5.0-1.5.1. Version v 1.4.4 works like a charm

Code snippet
Add your code snippet where error has been occurred.

Screenshots

Smartphone (please complete the following information):

• Device: iPhone8, iPhone 12 mini
• OS: iOS
• RN version: 0.71.6
• RN architecture: paper
• JS engine: Hermes
• Library version: 1.5.0, 1.5.1

Additional context

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

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

Describe the bug

Expected behavior

No crash should happen.

Smartphone (please complete the following information):

Happens on Android

The current alpha does spam a lot with debug infos (like ::keyboardDidHide with no listeners registered)
I don't need those listeners, the warnings are annoying a bit. I had to disable them via yellow box

Describe the bug
I suppose the keyboard height values aren't exposed to the hook correctly on Samsung Galaxy Note 20. Something's probably wrong with keyboard height events there

Repo for reproducing
Simply use the example app from this repo - the key is running the app on a Samsung Galaxy Note 20.

Expected behavior
Keyboard height values should be correctly exposed to the useKeyboardAnimation hook on Samsung Galaxy Note 20

Screenshots
Under the keyboard - there are two inputs. The keyboard height values are being correctly returned for other Samsung Galaxy devices, like the Galaxy S21. It's the Galaxy Note 20 that is problematic.

Smartphone (please complete the following information):

• Desktop OS: MacOS Ventura
• Device: Samsung Galaxy Note 20
• OS: Android 10 & Android 12
• JS engine Hermes
• Library version Latest

Additional context:
It seems its something specific to Galaxy Note 20 (since it works on other Samsung devices), but I'm not sure what that would be.

Is your feature request related to a problem? Please describe.

I can't seem to find a solution to this problem anywhere. I'm developing a tablet application and would like to use an animated keyboard avoiding system. The problem is that something seems to be wrong when reading keyboard height in split screen (2 apps side-by-side) on Android. My guess is that the underlying android Insets mechanism doesn't account for split screen mode or that the implementation doesn't account for it.

The built-in reanimated useAnimatedKeyboard also doesn't support it.

Describe the solution you'd like
I'd love to get the correct keyboard height value in split screen mode on Android.

Describe alternatives you've considered
The default AdjustResize and AdjustPan options, but these are not the behavior I'm after. Another annoying thing with these solutions is that they don't ignore things like the tab bar, which is lost space when you have a keyboard open.

Additional context
Let me know if there's any more info I can provide. I'm not too familiar with the Android Insets api related to this but I do know a bit of iOS/Android Native.

Describe the bug

Importing and using any dependency from 'react-native-keyboard-controller' will crash the build when building for web (react-native-web) with error:
Unable to resolve "../Utilities/Platform" from "node_modules/react-native/Libraries/ReactNative/PaperUIManager.js"

Code snippet
import { KeyboardProvider } from 'react-native-keyboard-controller'

 <KeyboardProvider>
  <View/>
 </KeyboardProvider>

Repo
https://snack.expo.dev/@viljarremato/hot-raisins

To Reproduce
import and use any dependency:
import { KeyboardProvider } from 'react-native-keyboard-controller'

 <KeyboardProvider>
  <View/>
 </KeyboardProvider>

run the expo web (RN web) project
run expo start --web

Expected behavior
Web bundle builds

Smartphone (please complete the following information):

• Desktop OS: MacOs 13.0
• RN version: 0.71.8
• RN architecture: old
• JS engine: Hermes
• Library version: 1.5.7
• Expo SDK 48

Additional context
I don't expect the package to work at all in web, but maybe it is possible to stub the library for web so that it would not crash.

Describe the bug
A clear and concise description of what the bug is.

1.Error: Requiring module "node_modules/react-native-keyboard-controller/src/index.ts", which threw an exception: TypeError: undefined is not an object (evaluating 'this.InnerNativeModule.installCoreFunctions')

2.undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[6], "react-native-keyboard-controller").KeyboardProvider')

Code snippet
Add your code snippet where error has been occurred.

import { KeyboardProvider } from 'react-native-keyboard-controller';

<KeyboardProvider>
  <Provider {...Stores}>
    <RootSiblingParent key="RootSiblingParent">
        <Navigation routeName={routeName} params={params} />
    </RootSiblingParent>
  </Provider>
</KeyboardProvider>

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Desktop OS [e.g. Windows 10, MacOS 10.15.5]
• Device: [e.g. iPhone6]
• OS: [e.g. iOS 8.1]
• JS engine [e.g. JSC, Hermes, v8]
• Library version [e.g. 22]

Additional context
Add any other context about the problem here.

Describe the bug
Please take a look for my repo to testing the KeyboardAwareScrollview example. the issue is it not scroll to focused textInput

Code snippet
KeyboardAwareScrollview copied from v1.5.8 Example
(https://github.com/kirillzyusko/react-native-keyboard-controller/blob/1.5.8/example/src/screens/Examples/AwareScrollView/KeyboardAwareScrollView.tsx)

Repo for reproducing
https://github.com/NguyenHoangMinhkkkk/testkeyboard

android windowSoftInputMode android:windowSoftInputMode="adjustResize"

  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-keyboard-controller": "^1.5.8",
    "react-native-reanimated": "^3.4.2"
  },

To Reproduce

• input your number of TextInputs rendering on scrollview.
• Run Project. focus on TextInput at very bottom of scrollview -> keyboard shown -> the TextInput focused not scroll up, just staying behide keyboard

Smartphone (please complete the following information):

• Device:
  IOS Simulator iPhone 14 - ios 16.4
  Android pixel 3a. Android version 11

This lib looks very promising ! Thanks for tackling this live long problem

One drawback imo, I find it difficult to start using it in a large app, relying heavily on different keyboard avoiding views / scroll views.
I found this repo when I needed to animate my modal size. On android I was missing an keyboard event, making it difficult to calculate the available space for my modal.
Opting in this lib gave me the missing event I needed, but also breaks every other keyboard avoiding screens.

I tried to using only KeyboardEvents, but it doesn't work without the KeyboardProvider context.

I also tried nesting only my modal with the context, and it works once, but once my modal has been displayed, other keyboard avoiding views are not working anymore.

My question is: can we "activate" react-native-keyboard-controller only for some views / screens ? activate it on demand ?

Describe the bug
Everything is fine with the first screen shown. We can receive keyboard events as usual. But as soon as the second screen pushed and then popped out, the first screen didn't receive any keyboard events anymore.
RNN needs declared providers for every screen. It seems that when two KeyboardProvider's are rendered with RNN the first one becomes unresponsive.
Reproducible in a clean project with the following requirements:

• OS: Android 10 API 29 (with API 30+ everything works fine; in iOS it's ok too)
• RN version: 0.71.2
• RN architecture: old
• RNN version: 7.32.1
• JS engine: Hermes
• Library version: 1.4.4

Is your feature request related to a problem? Please describe.
We are building a chat with your (awesome) package, and it works very smoothly. Thanks! However, at some point, we are experiencing performance issues due to the usage of ScrollView. Is FlatList also supported somehow?

Describe the solution you'd like
Add example using FlatList.

Describe alternatives you've considered
Using ScrollView, but the performance is bad.

Hi, to continue the issue here #131, I make a example to explain my problem

I describe my problem again:
In Android(aka my options), switch to custom keyboard always make jump layout and not smooth like telegram, like my video below:

Here is my sample code:( I edit in ReAnimatedChat folder => index.tsx):

import React, { useEffect, useRef, useState } from 'react';
import { Keyboard, Text, TextInput, View } from 'react-native';
import { KeyboardEvents, useReanimatedKeyboardAnimation } from 'react-native-keyboard-controller';
import Reanimated, {
  useAnimatedStyle,
  useDerivedValue,
} from 'react-native-reanimated';

import Message from '../../../components/Message';
import { history } from '../../../components/Message/data';
import { useTelegramTransitions } from './hooks';
import styles from './styles';

import type { StackScreenProps } from '@react-navigation/stack';
import type { ExamplesStackParamList } from '../../../navigation/ExamplesStack';

const AnimatedTextInput = Reanimated.createAnimatedComponent(TextInput);

type Props = StackScreenProps<ExamplesStackParamList>;

function ReanimatedChat({ navigation }: Props) {
  const [showCustomKeyboard, setShowCustomKeyboard] = useState(false);
  const keyboardHeightRef = useRef<number>(270)//defaut sticker keyboard height

  useEffect(() => {
    const subscription = KeyboardEvents.addListener('keyboardWillShow', (e) => {
      keyboardHeightRef.current = e.height
    });

    return () => subscription.remove();
  }, []);

  useEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Text
          style={styles.header}
          onPress={() => setShowCustomKeyboard((value) => !value)}>
          {`sticker keyboard: ${showCustomKeyboard ? 'On' : 'Off'}`}
        </Text>
      ),
    });
  }, [showCustomKeyboard]);

  const { height: platform } = useReanimatedKeyboardAnimation();
  const height = useDerivedValue(
    () => platform.value,
    []
  );

  const scrollViewStyle = useAnimatedStyle(
    () => ({
      transform: [{ translateY: height.value }, ...styles.inverted.transform],
    }),
    []
  );
  const textInputStyle = useAnimatedStyle(
    () => ({
      height: 50,
      borderRadius: 12,
      marginHorizontal: 12,
      borderColor: 'green',
      borderWidth: 1,
      backgroundColor: '#BCBCBC',
      transform: [{ translateY: height.value }],
    }),
    []
  );

  const customStickerStyle = useAnimatedStyle(
    () => ({
      height: showCustomKeyboard ? keyboardHeightRef.current : 0
    })
  )
  const fakeView = useAnimatedStyle(
    () => ({
      height: Math.abs(height.value),
    }),
    []
  );

  return (
    <View style={styles.container}>
      <Reanimated.ScrollView
        showsVerticalScrollIndicator={false}
        style={scrollViewStyle}>
        <View style={styles.inverted}>
          <Reanimated.View style={fakeView} />
          {history.map((message, index) => (
            <Message key={index} {...message} />
          ))}
        </View>
      </Reanimated.ScrollView>
      <AnimatedTextInput style={textInputStyle} />
      <Reanimated.View style={[{
        width: '100%',
        backgroundColor: 'red'
      }, customStickerStyle]}/>
    </View>
  );
}

export default ReanimatedChat;

As your mention here: #131 (comment)

You said When keyboard changes its size the library makes an animated transition, I agree because it's work good when change the system emoji keyboard, but I want to implement my custom keyboard, it's act like my above video.

Can you give me some advices? Thanks

Describe the bug

using a combination of RN 0.69, native-stack and statusBarTranslucent causes some issues. Seems like keyboard insets are also applied automatically, and because of that positioning of views is incorrect.

Repo for reproducing

#50

To Reproduce
Steps to reproduce the behavior:

1. Go to Native Stack
2. Click on TextInput

Expected behavior

Views shouldn't react on keyboard appearance if they don't subscribed to useKeyboardAnimation animated values.

Screenshots

Expected	Actual

Smartphone (please complete the following information):

• Desktop OS: Mac OS 12.5
• Device: Pixel 3 (emulator)
• OS: Android API 32
• JS engine: JSC
• Library version: 1.0.1

Additional context

Seems like it wasn't an issue in RN 0.68

Describe the bug

When you set focus on multiline TextInput then you'll always receive target as -1.

Code snippet

Just add multiline property for TextInput.

Repo for reproducing

Example app.

To Reproduce
Steps to reproduce the behavior:

1. Open example app
2. Go to AwareScrollView
3. Click on any TextInput that should be overlapped by keyboard

Expected behavior

TextInput should be pushed above the keyboard.

Screenshots

Smartphone (please complete the following information):

• Desktop OS: MacOS 13.3.1
• Device: iPhone. 14
• OS: iOS 16.4
• RN version: 0.71.11
• RN architecture: old and new - reproducible everywhere 🙂
• JS engine: JSC
• Library version: 1.6.0

Additional context

I think it happens because of casting UIResponder.current to RCTUITextField. If instance can not be casted it'll be nil and -1 will be reported as a tag.

Most likely we'll need to cast it to UIView instead RCTUITextField.

The app crashes right before keyboard is shown on iOS 15. On iOS 16 it works just fine.
Swift runtime failure: Unexpectedly found nil while unwrapping an Optional value

Smartphone (please complete the following information):

• Desktop OS: MacOS 12.6.1
• Device: iOS Simulator
• OS: iOS 15.0
• RN version: 0.70.4
• RN architecture: old
• JS engine: Hermes
• Library version: 1.4.0

Describe the bug
When I wrap my app with

return <KeyboardProvider statusBarTranslucent>{children}</KeyboardProvider>

Android system navigation bar becomes colored, not translucent

Code snippet

return <KeyboardProvider statusBarTranslucent>{children}</KeyboardProvider>

styles.xml

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:forceDarkAllowed" tools:ignore="NewApi">false</item>

        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

Repo for reproducing
I can do it later if you need it

To Reproduce

1. Wrap app with KeyboardProvider
2. Use translucent navigation
3. Run app

Expected behavior

Actual behavior

Smartphone (please complete the following information):

• Desktop OS: MacOS
• Device: Android Nexus 5
• OS: API 33
• RN version: 0.71.2
• RN architecture: old, paper
• JS engine: Hermes
• Library version: 1.4.3

Additional context
no applicable

Describe the bug
The package 'react-native-keyboard-controller' doesn't seem to be linked. Make sure

Code snippet

Repo for reproducing
I would be highly appreciate if you can provide repository for reproducing your issue. It can significantly reduce the time for discovering and fixing the problem.

Smartphone (please complete the following information):

• Desktop OS: MacOS 13.0.1 (22A400)
• Device: Testing with Jest
• RN version: 0.70.5
• Library version: 1.4.1

Describe the bug

Readme markdown (Gifs) is broken after recent GH update

Hi. first of all . Thanks for your work . that's pretty nice work.

in my exists project can't complie in android studio

android studio 4.1.3
gradle 5.6.4
kotlin 1.3.24

i got error like kotlin version too high about this.

i wanna know how to work fine and don't change the kotlin version and gradle version.

Discussed in #176

^{Originally posted by supoved June 16, 2023}
The lib works beautiful and all KAV issues have been resolved by it.

But when testing on android I have noticed an issue. Status bar and navigation bar have reverted colours back to defaults, instead of values provided by app (see screebshot, they were matching background colour before)
This only broken for Android and works fine in iOS.

We use expo-router to provide status bar and navigation bar customisation, and if I force showing status bar on every screen, I can see it attempting to set correct colours and then falling back to black and white.

I have tried setting navigationBarTranslucent and statusBarTranslucent but I dont see any difference.

Any ideas how to resolve this?