Keyboard adjustment with custom TextInput

[pavelglebov]

Use case:

1. I have bottomSheet with dynamic height (CONTENT_HEIGHT)
2. I have to use custom external TextInput (there is no way to implement same thing manually)

Issue:
BottomSheet height is not adjusted automatically when focusing custom TextInput.

Docs have following tip:

When copy the code, including:

const { shouldHandleKeyboardEvents } = useBottomSheetInternal();

I get following error:

Is there a way to trigger keyboard animation in bottomSheet from outside?

[pavelglebov]

Okay, so the problem was that I was using useBottomSheetInternal hook from component that holds bottomSheet, not inside of it.
Moving it into the component that lays in the bottomSheet solved the issue.

[Karthik-B-06]

How did you make it work? Can you please share the code?

[Hoffmannn]

@Karthik-B-06 @JocheAttah
I was able to solve the error. What happens is that you can't use useBottomSheetInternal in the same component as you use <BottomSheetModal/>.

You have to create a separate component for the BottomSheet content and use the hook inside of it, passing this component as a child to BottomSheetModal. For example:

<BottomSheetModal
   // your props as usual
  children={<BottomSheetContent/>}
 />

Then, outside of the component where you're using the BottomSheet (it can be in the same file, just not in the same exported component):

const BottomSheetContent = ()=>{ 
    const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
    return (
    {/* Your content here  */}
     );
};

[Karthik-B-06]

Great, thanks @Hoffmannn. This worked.

[theianjohnson]

@Hoffmannn @Karthik-B-06 @gorhom can you share how to copy/paste the onFocus/onBlur events? I have custom TextInputs that are also used outside a bottom sheet so I'm trying to figure out if I can pass the focus/blur callbacks into them or if I'd have to create a second bottom sheet specific TextInput (in which case I'd probably find another way to do this)

[Hoffmannn]

@theianjohnson I didn't have your exact situation, but I did implement a custom Input on my bottom sheet. I had to pass a function to handle keyboard events (move bottom sheet up when displaying the keyboard). For this I used the useBottomSheetInternal hook and simply passed this function to my onFocus/onBlur events:

 // BottomSheetContent
  const { shouldHandleKeyboardEvents } = useBottomSheetInternal();
  // ... 
  return (
     <View>
      <TextInputMask 
	onFocus={() => {
	shouldHandleKeyboardEvents.value = true;
	}}
	onBlur={() => {
	shouldHandleKeyboardEvents.value = false;
	}}
       />
        {/*  rest of the content*/}
      </View>
   )