[RELEASED] Keyboard Handling

[gorhom]

Feature Request

This been released with v3.6.0 🎉

Why it is needed

Keyboard handling is a bit trickier with bottom sheet internal animated variables, although #97 could resolve it for some cases, however it needs to be handled internally to not conflict with BottomSheet interactions.

Possible implementation

BottomSheet was inspired by the implementation of Apple Maps, so I would keep that as the main goal to achieve with this feature.

Untitled.mp4

Code sample

We could provide a pre-integrated overridable TextInput that will internally interacts with BottomSheet, so user won't need to handle anything else.

[gorhom]

i won't be using keyboardavoidingview since i have other layout handing that may conflict with it

[evrimfeyyaz]

Do you have an ETA on when this will be released?

[gorhom]

@evrimfeyyaz it's in early development ,, hopefully by next week, i will prepare an alpha release 👍

[kickbk]

Love it. Can't wait. Will this be available for v2 as well?

[gorhom]

@kickbk unfortunately this will only be available for v3. Reanimated v2 now is in stable release 🚀

[kickbk]

@kickbk unfortunately this will only be available for v3. Reanimated v2 now is in stable release 🚀

No problem. I guess it's time to upgrade to v3 and reanimated 2 😊

[kickbk]

Tried upgrading. Since I'm using Expo, I think it's still too early. They use react-native-reanimated@2.0.0-rc.0. I'll just have to wait.

[gorhom]

Reanimated v2 will be supported with Expo 41

“We are happy to announce that the stable release of Reanimated will be a part of the next Expo SDK release (41) which will go out in the upcoming weeks.” — @kzzzf https://blog.swmansion.com/reanimated-2-0-stable-release-is-out-564c9c910891?source=social.tw

[alessiocancian]

Will this method work for inputs placed at the bottom or in the middle of the bottomSheet?
In use cases with multiple inputs I think this should be handled using a bottomInset of keyboard height, but I don't know if there's a way to scroll to the input after the resize.

(Android works good already with softInputMode=adjustResize but on iOS the inputs can go behind the keyboard.)

EDIT: @gorhom I didn't read carefully your status update. Seems like you already planned the implementation I was talking about with keyboardBehavior="interactive"

[gorhom]

@alessiocancian currently it works for all inputs in/out bottom sheet - to be fixed before merging to master.

I would appreciate if you could test this feature branch example (https://github.com/gorhom/react-native-bottom-sheet/tree/feature/keyboard-handling) 👏

[alessiocancian]

I was using React Reanimated v1, will upgrade asap to test this

[alessiocancian]

@gorhom any chance this could be ported to v2 as well? I'm having trouble upgrading to v3

[gorhom]

@conrad-vanl now it's available ( FOR TESTING ) here #233 (comment)

I would appreciate if you could test it 😇

[conrad-vanl]

I will have to work on upgrading to v3 first, but glad to! I think we were seeing turbomodule issues with react native last time we tried.

[conrad-vanl]

@gorhom on this video you don't click back into the text input after blurring it swiping the bottom sheet down the first time. The issue I'm seeing when I try this branch out locally is that the sheet never expands again after it expanding the first time.

I've traced it to the worklet function in this useDerivedValue() never seems to get called after the first time the modal expands then contracts. I've verified that the useKeyboard hook's keyboard events are still fired, and the shared value does seem to get updated, but for some reason this useDerviedValue hook doesn't run again for me. Can you confirm that it's working on your end?

Here's an example video of what I'm seeing: https://www.loom.com/share/df638e146f6a4ffd9cdbeac9a2803161

[theianjohnson]

Any chance this could be patched into the 3.0.0 release so it'd be compatible with Expo? I'll upgrade to Expo 41 and Reanimated 2 as soon as I can, but this is unusably bugged otherwise (I'm using it for a bottom sheet of comments and a comment input)

[gorhom]

let me know if this still an issue :)

[conrad-vanl]

The issue I still seem to be having, even with using your BottomSheetTextInput, is that the bottom sheet only expands the first time you focus on the text input. If I blur the text input, contract the sheet using a swipe gesture, then tap into the text input, the sheet does not expand again.

[gorhom]

hmm that's weird, it works fine on my end, could you provide a reproducible snack ?

Screen.Recording.2021-03-19.at.21.45.02.mov

[conrad-vanl]

Of course, I will work on that. Might take a few days until I'm able to sit down and isolate what's needed to reproduce this behavior.

[conrad-vanl]

Can’t reproduce in a snack because I can’t figure out how to get snack to point at this feature branch, only version numbers installable by npm

[conrad-vanl]

@gorhom would you consider adding a way to forward a ref to the underlying text input? We use input refs frequently to trigger a focus() event.

<TextInput ref={inputRef} {...otherProps />

// later
inputRef.current?.focus()

[gorhom]

Of course,,, I missed that 🤦‍♂️

[conrad-vanl]

This looks great! Got caught up having to ship some features so haven’t been able to jump into this. Can’t wait to try this out!

[gorhom]

thanks everyone for participating in this discussion and helping me out shape up this feature <3

[kickbk]

Now that Expo SDK 41 Beta is out, I finally get to play with this. Great job as always.
Here's the problem I am having:

I love that you have keyboardBehavior="interactive" and keyboardBlurBehavior="restore" - both of these features work great, as long as one of your snapPoints is not 100%. Here's what I mean:

When your snap points are: [60, '30%']
keyboardBehavior="interactive" pushes the keyboard as expected. It feels natural.
keyboardBlurBehavior="restore" returns the keyboard to 30% height when blurs.

When your snap points are: [60, '30%', '100%']
keyboardBehavior="interactive" pushes the keyboard to 100%, instead of offset the sheet by the size of the keyboard .
keyboardBlurBehavior="restore" doesn't do anything. Bottom sheet stays at 100%.

bskeyboard.mov

[kickbk]

I think the issue is that restore: restore sheet position. is not really what is happening here. when blurred, the bottomSheet goes back to the last snapPoint. So if I have these snap points: [60, '20%', '90%'], and currently the bottomSheet is at the first snap point (60) I expect to have the bottom sheet to go to 60 + keyboard height when TextInput is in focus, and go back to 60 when blurred. But instead it goes to 100%, and when blurred, it goes to 90%

[gorhom]

@kickbk you are right, in interactive it will offset the keyboard height to the last snap point . i guess this could improve 💡

[gorhom]

keyboardBlurBehavior="restore" doesn't do anything. Bottom sheet stays at 100%.

yeah, because the sheet is already at the last snap point position 100%

[kickbk]

@gorhom I see, so the keyboard actually changes the snap point to the top snap point? This feels a little counterintuitive to me. I expected the keyboard to push the content up for as long as I need it up there, and "restore" it to whatever snap point and position it was before I pressed inside the text input.

[TildeGv9]

Are there news about this? I'm having the same issue using 'interactive' mode, the modal goes to top snap point + keyboard height (on iOS). On android it works perfectly.
I'm using the latest version (3.6.6).

[evrimfeyyaz]

@gorhom I can't seem to get this working. I'm probably missing something, but I'm not sure what. Here is a simple example:

import React, {Node, useRef} from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';

const App: () => Node = () => {
  const sheetRef = useRef(null);

  const handleShowPress = () => {
    sheetRef.current && sheetRef.current.present();
  };

  return (
    <BottomSheetModalProvider>
      <View style={styles.container}>
        <TouchableOpacity style={styles.button} onPress={handleShowPress}>
          <Text>Show sheet</Text>
        </TouchableOpacity>

        <BottomSheetModal
          ref={sheetRef}
          snapPoints={['25%']}
          keyboardBehavior="interactive"
          keyboardBlurBehavior="restore">
          <TextInput placeholder="Type something here..." />
        </BottomSheetModal>
      </View>
    </BottomSheetModalProvider>
  );
};

I've also set up a repo with this example: https://github.com/evrimfeyyaz/bottom-sheet-keyboard-test

What am I missing?

[evrimfeyyaz]

I ended up incorporating parts of BottomSheetTextInput into my own custom wrapper, mainly this part does the job:

  const bottomSheetInternal = useBottomSheetInternal();

  const handleFocus = useCallback(
    args => {
      runOnUI(() => {
        if (bottomSheetInternal == null) {
          return;
        }

        bottomSheetInternal.shouldHandleKeyboardEvents.value = true;
      })();

      if (onFocus) {
        onFocus(args);
      }
    },
    [onFocus, bottomSheetInternal],
  );

  const handleBlur = useCallback(
    args => {
      runOnUI(() => {
        if (bottomSheetInternal == null) {
          return;
        }

        bottomSheetInternal.shouldHandleKeyboardEvents.value = false;
      })();

      if (onBlur) {
        onBlur(args);
      }
    },
    [onBlur, bottomSheetInternal],
  );

And, unfortunately, it's still not working properly. My bottom sheet has multiple text inputs and when I change the focus from one to another by calling the focus method of TextInput, the bottom sheet automatically contracts and disappears behind the keyboard.

[ShivamJoker]

Try replacing <TextInput> with <BottomSheetTextInput> from the BottomSheet library.

Still not working properly in iOS

[likeSo]

@evrimfeyyaz BottomSheetTextInput is a wrapper around TextInput, it pass all props and reference too!

I didn't see a mention of that component anywhere in the documentation.
true, will update the docs soon

Hi and thank you for make this great library! But I don't agree with your opinion about BottomSheetTextInput. I think the BottomSheetTextInput is only a transition plan for keyboard handling. What if there is another component library needs other TextInput too? Should I create TextInputs one by one? What if I wanna display a complex and customized textinput? Please consider listen to keyboard changes rather than use BottomSheetTextInput.

[nishitpatel7371]

anyone found the solution for this issue?

[nishitpatel7371]

const { shouldHandleKeyboardEvents } = useBottomSheetInternal();

  const handleOnFocus = useCallback(
    args => {
      runOnUI(() => {
        shouldHandleKeyboardEvents.value = true;
      })();
      if (props.onFocus) {
        props.onFocus(args);
      }
    },
    [props, shouldHandleKeyboardEvents],
  );

  const handleOnBlur = useCallback(
    args => {
      runOnUI(() => {
        shouldHandleKeyboardEvents.value = false;
      })();
      if (props.onBlur) {
        props.onBlur(args);
      }
      props.formikBlur(args);
    },
    [props, shouldHandleKeyboardEvents],
  );

@gorhom getting the same issue when using anything extra functionality like. validation

I have called validator onBlur event. if i remove this validator everything working well.

[kickbk]

Possible BUG: White space at bottom of BottomSheet when using snap point of 100%

This took a white to hunt down 🤯
When using 90% top snap point and clicking inside the BottomSheetTextInput, the blue background reaches the keyboard -> great.
When using 100% and clicking inside the BottomSheetTextInput, it adds space (white) below the blue background (content).

import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { View, StyleSheet, Button, Text } from "react-native";
import { BottomSheetModal, BottomSheetTextInput } from "@gorhom/bottom-sheet";
import withModalProvider from "./withModalProvider";

const SimpleExample = () => {
  const bottomSheetRef = useRef<BottomSheetModal>(null);

  const snapPoints = useMemo(() => ["25%", "100%"], []); // <<<<<< Change between 100% and 90% and see what happens when keyboard is focused.

  useEffect(() => {
    bottomSheetRef.current?.present();
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <BottomSheetModal
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        animationDuration={250}
        dismissOnPanDown={false}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
      >
        <BottomSheetTextInput
          placeholder="Search"
          accessibilityComponentType
          accessibilityTraits
          style={styles.searchInput}
        />
        <View
          style={{
            backgroundColor: "blue",
            flex: 1,
          }}
        >
          <Text>Content</Text>
        </View>
      </BottomSheetModal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  buttonContainer: {
    marginBottom: 6,
  },
  // SearchBar
  searchContainer: {
    backgroundColor: "#eee",
    flex: 1,
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    paddingHorizontal: 0,
    paddingTop: 8,
    paddingBottom: 10,
  },
  searchInput: {
    backgroundColor: "#eee",
    padding: 20,
    fontSize: 16,
    color: "grey",
  },
});

export default withModalProvider(SimpleExample);

[kickbk]

Also, try the exact same code on an Android device. It's acting funnier:

1. When focusing into BottomSheetTextInput, the space below the content is bigger than on ios.
2. When you hit the search button, the BottomSheet doesn't go back to 100% or 90% (depending on which you use), it just disappears. See video below. Here I'm using 90% top snap point so you can see a little of space below the blue bg content, but that's not the point of the video. When I click on the search button in the keyboard at the end of the video, the bottom sheet just disappears. Does not happen on ios.

keyboardDismissAndroid.mp4

[kickbk]

Another issue with Android. Same code as above, but change the snap point to [60, 250, "90%"].

See video below.

First, it opens to a strange spot - below the first snap point. somehow managing to click the BottomSheetTextInput expands and then clicking the search button on the keyboard makes the bottom sheet disappear (same as above).

Next - we refresh the app. The bottom sheet opens to the strange point. We drag the bottom sheet up and back down - it then snaps to the correct first snap point (60). Then two things happen:

1. When clicking the BottomSheetTextInput, it opens the keyboard, moves the BottomSheet to the top, but then collapses it right above the keyboard.
2. Clicking on the search button this time acts correctly - collapses the keyboard and moves the bottom sheet back to the first snap point, so this time it doesn't disappear.

androidKeyboard2.mp4

[kickbk]

It's actually not only on Android. Just got it opening on that strange spot on ios as well. It happens rarely on my iPhone, but it does happen. I also believe there may be issues with onAnimate and onChange

[renwid]

Hi @gorhom 👋 how do u update to this version?

[kickbk]

Add "@gorhom/bottom-sheet": "^3" in your package.json dependencies.

[renwid]

<BottomSheetTextInput/> im trying to use this, but am getting Element type is invalid error, any ideas? I have imported it already import BottomSheet, { BottomSheetTextInput } from '@gorhom/bottom-sheet';

[renwid]

hmm, i tried yarn add @gorhom/bottom-sheet@^3, but the components are not getting updated under node modules..

[kickbk]

Delete your node_modules folder and your yarn.lock file and run yarn again.

[renwid]

that solved the issue, thanks!

[kickbk]

Possible BUG: Presenting modal after clicking inside BottomSheetTextInput does not dismiss modal

The expand button is:

<Button
  title="Expand"
  onPress={() => {
    Keyboard.dismiss();
    filtersModalRef.current?.present();
  }}
/>

In the video below:

• I manually pull up the search modal
• I click on "Expand" button next to the BottomSheetTextInput
• It closes the search modal and opens the filters modal
• I pull down the filters modal
• The search modal comes back to the top snap point
• I pull down on the search modal to close it

So far so good

Now the bug:

• I click inside the search modal BottomSheetTextInput - the modal is pushed to the top
• I click on the expand button
• The filters modal is presented but search modal is not dismissed

RPReplay_Final1618335364.mov

Code:

import React, { useLayoutEffect, useMemo, useRef, useState } from "react";
import { View, StyleSheet, Button, Text, Keyboard } from "react-native";
import BottomSheet, {
  BottomSheetModal,
  BottomSheetTextInput,
} from "@gorhom/bottom-sheet";
import withModalProvider from "./withModalProvider";
import { NativeViewGestureHandler } from "react-native-gesture-handler";

const SimpleExample = () => {
  // refs
  const searchModalRef = useRef<BottomSheetModal>(null);
  const resultsCarouselRef = useRef<BottomSheetModal>(null);
  const filtersModalRef = useRef<BottomSheetModal>(null);

  // state
  const [
    currentSearchModalSnapPoint,
    setCurrentSearchModalSnapPoint,
  ] = useState(0);
  const [searchCompleted, setSearchCompleted] = useState(false);

  // variables
  const snapPoints = useMemo(() => [60, 250, "90%"], []);
  const resultsCarouselSnapPoints = useMemo(() => [0, 250], []);
  const filtersModalSnapPoints = useMemo(() => [300], []);
  // Effects
  useLayoutEffect(() => {
    // On screen load, open the search modal
    searchModalRef.current!.present();
    setTimeout(() => {
      setSearchCompleted(true);
      resultsCarouselRef.current?.expand();
    }, 1000);
  }, []);

  // renders
  return (
    <View style={styles.container}>
      <Button
        title="Expand"
        onPress={() => {
          resultsCarouselRef.current!.expand();
        }}
      />
      <Button
        title="Hide"
        onPress={() => {
          resultsCarouselRef.current!.close();
        }}
      />
      <BottomSheetModal
        ref={searchModalRef}
        snapPoints={snapPoints}
        animationDuration={250}
        dismissOnPanDown={false}
        keyboardBehavior="interactive"
        keyboardBlurBehavior="restore"
        onDismiss={() => {
          console.log("bottomSheetRef dismissed");
        }}
        onChange={(snapPoint: number) => {
          setCurrentSearchModalSnapPoint(snapPoint);
          if (snapPoint === 0 && searchCompleted) {
            console.log("Expand results when at snap point 0");
            resultsCarouselRef.current?.expand();
          } else {
            console.log("close results when not at snap point 0");
            resultsCarouselRef.current?.collapse();
          }
        }}
      >
        <View style={{ flexDirection: "row" }}>
          <BottomSheetTextInput
            placeholder="Search"
            accessibilityComponentType
            accessibilityTraits
            style={styles.searchInput}
            clearButtonMode="while-editing"
            returnKeyType="search"
          />
          <Button
            title="Expand"
            onPress={() => {
              Keyboard.dismiss();
              filtersModalRef.current?.present();
            }}
          />
        </View>
        <View
          style={{
            backgroundColor: "blue",
            flex: 1,
          }}
        >
          <Text>Content</Text>
        </View>
      </BottomSheetModal>

      <BottomSheet
        ref={resultsCarouselRef}
        snapPoints={resultsCarouselSnapPoints}
        // topInset={topSafeArea}
        // animatedPosition={animatedModalPosition}
        handleComponent={() => <View />}
        backgroundComponent={null}
        onChange={(snapPoint: number) => {
          // Pull down the results carousel and show the search modal
          if (snapPoint === 0 && currentSearchModalSnapPoint !== 2) {
            // When we expand the search modal, it goes to snap point 2 and collapses the results sheet, which will run this event.
            // To avoid minimizing the search modal in this particular case, we check and make sure the search modal is not at snap point 2 (expanded).
            // We also use a stateful object to make sure we expand the search result only when manually collapsed. See https://github.com/gorhom/react-native-bottom-sheet/issues/356
            searchModalRef.current?.snapTo(1);
          }
        }}
      >
        {true && (
          <NativeViewGestureHandler disallowInterruption>
            <View style={{ flex: 1, backgroundColor: "green", height: 300 }}>
              <Text>Results</Text>
            </View>
          </NativeViewGestureHandler>
        )}
      </BottomSheet>

      <BottomSheetModal
        ref={filtersModalRef}
        name="FiltersModal"
        snapPoints={filtersModalSnapPoints}
      >
        <View>
          <Text>Filters</Text>
        </View>
      </BottomSheetModal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
  },
  buttonContainer: {
    marginBottom: 6,
  },
  // SearchBar
  searchContainer: {
    backgroundColor: "#eee",
    flex: 1,
    borderTopColor: "transparent",
    borderBottomColor: "transparent",
    paddingHorizontal: 0,
    paddingTop: 8,
    paddingBottom: 10,
  },
  searchInput: {
    flex: 1,
    backgroundColor: "#eee",
    padding: 20,
    fontSize: 16,
    color: "grey",
  },
});

export default withModalProvider(SimpleExample);

[Nusatthu96]

enableDismissOnClose={false} in BottomSheetModal

[kickbk]

on a screen with multiple modals, we currently need to write methods for each modal if we want to dismiss an optionally open Keyboard. Like so:

const openSomeModal = useCallback(() => {
  Keyboard.dismiss();
  someModalRef.current?.present();
}, []);

It's not a big deal and it's perfectly valid. However, I can't think of a scenario where one would want to keep the Keyboard open when switching between modals. Can you @gorhom?
If indeed that's the case, maybe we can have the Keyboard dismiss by default on any bottom sheet present()?

[pouyarezvani]

@gorhom @kickbk
I'm using BottomSheetModal with your BottomSheetTextInput, When I click away on the backdrop, the modal gets dismissed before the keyboard. Is it possible to dismiss the modal and keyboard at the same time, if the backdrop is pressed?

Also, how am I able to use a SearchBar such as react-native-elements SearchBar instead of your BottomSheetTextInput?

Screen.Recording.2021-05-07.at.9.20.50.PM.mov

[ser-emejia]

@pouyarezvani Did you fix it?

[pouyarezvani]

@ser-emejia unfortunately couldn't

[dakshbhardwaj]

Hi @pouyarezvani did you get any solution for this?

[shanoysinc]

@pouyarezvani did you fix dismissing the modal with the keyboard?

[vvaidziulis]

if you use BottomSheetBackdrop as backdropComponent in the BottomSheet, then u can add keyboard dismiss functionality to onPress accordingly:

<BottomSheetBackdrop
    {...backdropProps}
    opacity={0.2}
    disappearsOnIndex={-1}
    appearsOnIndex={0}
    onPress={() => Keyboard.dismiss()}
/>

[aganov]

Is there any way we can get around adjustPan on android and use softInputMode=adjustResize its a bit breaking on our app too...

[gorhom]

this already added to v4 #427

[tsugitta]

It'd be nice if I could use my own TextInput component rather than the library's one. I use react-native-paper's TextInput but it seems it cannot be used for this feature.

[kickbk]

I can understand that. I also used paper for my text input but honestly it's a few minute work recreating what react native paper does with text input but still using the library's text input. In fact, you will see that in the end you will have a much more customized solution than by using paper's text input and you may even save yourself a dependency.

[aganov]

Just use useBottomSheetInternal (v4) and create new component. Here is example from ui-kitten but should be the same for rn paper.

import { Input } from "@ui-kitten/components";

const BottomSheetInput = props => {
  const { shouldHandleKeyboardEvents } = useBottomSheetInternal();

  const handleOnFocus = useCallback(() => {
    runOnUI(() => {
      shouldHandleKeyboardEvents.value = true;
    })();
  }, [shouldHandleKeyboardEvents]);

  const handleOnBlur = useCallback(() => {
    runOnUI(() => {
      shouldHandleKeyboardEvents.value = false;
    })();
  }, [shouldHandleKeyboardEvents]);

  return <Input {...props} onFocus={handleOnFocus} onBlur={handleOnBlur} />;
};

[pouyarezvani]

@aganov @kickbk @tsugitta
I achieved this by using react-native-paper TextInput and by passing render prop and inside of it I used Gorhom BottomSheetTextInput.
Here is my code :

	  import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
	  import { TextInput } from 'react-native-paper';
	  <TextInput				
		  style={{ width: '40%', height: 35 }}				
		  label='Charge'			
		  mode='outlined'				
		  placeholder=''				
		  selectTextOnFocus={true}				
		  render={innerProps => <BottomSheetTextInput {...innerProps as any}/>}	
		  keyboardType='decimal-pad'				
		  value={amount}				
		  onChangeText={setAmount}				
		  contextMenuHidden={true}			
	  />

[amorimcode]

worked like a charm @pouyarezvani , thanks!

[Ahsanali012]

whats the easiest solution to handle keyboard ? as its should scroll up