Skip to main content
Mapagam

Managing Keyboard Behavior

1. Using KeyboardAvoidingView

KeyboardAvoidingView is a component that automatically adjusts the layout of your app to make room for the keyboard on mobile devices. It's particularly useful in forms or chat interfaces where content might be obscured by the keyboard.

Property Description Default Notes
behavior Defines how the view adjusts to the keyboard padding Can be padding, height, or position
keyboardVerticalOffset Adjusts the vertical offset of the view 0 Useful for adjusting layout when the keyboard is not at the bottom of the screen

Example: Basic usage of KeyboardAvoidingView

<KeyboardAvoidingView
  style={styles.container}
  behavior="padding"
  keyboardVerticalOffset={80}
>
  <TextInput
    style={styles.input}
    placeholder="Type something..."
  />
</KeyboardAvoidingView>
Note: On iOS, behavior can be set to position for more precise control over layout adjustments.
Warning: KeyboardAvoidingView does not work well with ScrollView or FlatList in some cases. Consider using ScrollView with keyboardShouldPersistTaps or custom logic.

2. Dismissing Keyboard

Example: Programmatically dismiss keyboard

import { Keyboard } from 'react-native';

// Dismiss the keyboard
Keyboard.dismiss();
Method Description Notes
Keyboard.dismiss() Dismisses the currently active keyboard Can be called from any component in the app
Note: This method only dismisses the keyboard if it is currently open.
Warning: Keyboard.dismiss() does not work in all environments (e.g. web).

3. Listening to Keyboard Events

Event Description Properties
keyboardDidShow Fires when the keyboard is shown duration, keyboardHeight, startCoordinates, endCoordinates
keyboardDidHide Fires when the keyboard is hidden duration, keyboardHeight, startCoordinates, endCoordinates
keyboardWillShow Fires before the keyboard is shown duration, keyboardHeight, startCoordinates, endCoordinates
keyboardWillHide Fires before the keyboard is hidden duration, keyboardHeight, startCoordinates, endCoordinates

Example: Listening to Keyboard Events

import { Keyboard } from 'react-native';<br><br>const handleKeyboardDidShow = (e) => {<br>  console.log('Keyboard height:', e.keyboardHeight);<br>};<br><br>const handleKeyboardDidHide = (e) => {<br>  console.log('Keyboard hidden');<br>};<br><br>const unsubscribe = Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow);<br>Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide);<br><br>// Don't forget to remove listeners when component unmounts<br>unsubscribe.remove();
Note: Keyboard events are only available on native platforms (iOS, Android). On web, these events do not fire.

4. Setting Keyboard Appearance

Property Description Values Notes
keyboardAppearance Defines the appearance of the keyboard light, dark Controls the color scheme of the keyboard

Example: Setting Keyboard Appearance

import { Keyboard } from 'react-native';

const handleKeyboardAppearance = () => {
  Keyboard.setKeyboardAppearance('dark');
};

5. Handling Keyboard Height

Property Description Notes
keyboardHeight Current height of the keyboard in pixels Updated dynamically as keyboard opens/closes
isKeyboardOpen Boolean indicating if keyboard is currently open Useful for conditional rendering

Example: Using Keyboard Height

import { Keyboard } from 'react-native';

const [keyboardHeight, setKeyboardHeight] = useState(0);
const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);

useEffect(() => {
  const keyboardDidShow = Keyboard.addListener('keyboardDidShow', (e) => {
    setKeyboardHeight(e.endCoordinates.height);
    setIsKeyboardOpen(true);
  });

  const keyboardDidHide = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardHeight(0);
    setIsKeyboardOpen(false);
  });

  return () => {
    keyboardDidShow.remove();
    keyboardDidHide.remove();
  };
}, []);

// Use keyboardHeight in layout calculations
Note: On iOS, the keyboard height may vary depending on the device and input method (e.g., external keyboard).

6. Using dismissKeyboardOnPress

Property Description Default Notes
dismissKeyboardOnPress Controls whether to dismiss the keyboard when pressing on a view that is not a text input false Available in Expo SDK 50+

Example: Using dismissKeyboardOnPress

import { View, Text, TextInput } from 'react-native';
import { dismissKeyboardOnPress } from 'expo';

function MyComponent() {
  return (
    <View style={{ flex: 1 }} dismissKeyboardOnPress>
      <TextInput placeholder="Type here..." />
      <Text>Press anywhere to dismiss keyboard</Text>
    </View>
  );
}

7. Implementing KeyboardAwareScrollView

Property Description Default
enableResetScrollToCoords Enables resetting scroll position to initial coordinates when keyboard hides true
keyboardOpeningTime Time in milliseconds to wait before resetting scroll position 0
scrollEnabled Controls whether scrolling is enabled true
extraHeight Extra height to add when calculating keyboard offset 100
extraScrollHeight Extra scroll height to add when calculating keyboard offset 0

Example: Basic KeyboardAwareScrollView Usage

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView
  enableResetScrollToCoords={true}
  keyboardOpeningTime={250}
  extraHeight={100}
>
  <View style={{ padding: 20 }}>
    <TextInput placeholder="Enter text" />
    <TextInput placeholder="Another input" />
  </View>
</KeyboardAwareScrollView>

Example: Handling Keyboard Events

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

const handleKeyboardDidShow = (e) => {
  console.log('Keyboard shown:', e.endCoordinates.height);
};

const handleKeyboardDidHide = (e) => {
  console.log('Keyboard hidden:', e.endCoordinates.height);
};

<KeyboardAwareScrollView
  onKeyboardDidShow={handleKeyboardDidShow}
  onKeyboardDidHide={handleKeyboardDidHide}
  extraScrollHeight={50}
>
  <View style={{ padding: 20 }}>
    <TextInput placeholder="Input field" />
  </View>
</KeyboardAwareScrollView>

8. Managing Keyboard Spacing

Property Description Default Notes
keyboardShouldPersistTaps Controls whether the keyboard should persist taps on the screen false Can be set to 'always', 'handled', or false
contentInset Adjusts the content inset to prevent overlap with keyboard { top: 0, right: 0, bottom: 0, left: 0 } Used to adjust layout when keyboard appears
contentOffset Adjusts the content offset to prevent overlap with keyboard { x: 0, y: 0 } Allows manual adjustment of content position

Example: Using keyboardShouldPersistTaps

import { ScrollView } from 'react-native';

<ScrollView
  keyboardShouldPersistTaps="handled"
  style={{ flex: 1 }}
>
  <TextInput placeholder="Type here..." />
</ScrollView>

Example: Adjusting contentInset

import { ScrollView } from 'react-native';

<ScrollView
  contentInset={{ bottom: 100 }}
  style={{ flex: 1 }}
>
  <TextInput placeholder="Type here..." />
</ScrollView>

9. Using returnKeyType Navigation

Property Values Description
returnKeyType "done", "go", "next", "search", "send" Defines the label for the return key on the keyboard

Example: Setting returnKeyType

<TextInput
  returnKeyType="next"
  onSubmitEditing={() => console.log("Submitted")}
></TextInput>
Note: The returnKeyType property only affects the keyboard on mobile platforms (iOS and Android) and has no effect on web.

10. Configuring Keyboard Toolbar

Property Description Values Notes
keyboardToolbar Configures the appearance and behavior of the keyboard toolbar false, true, or object with options Defaults to true in Expo Go, false in production builds

Example: Enabling Keyboard Toolbar

{ "keyboardToolbar": true }

Example: Customizing Keyboard Toolbar

{ "keyboardToolbar": {
  "barStyle": "default",
  "tintColor": "#007AFF"
} }
Note: The keyboardToolbar property is only supported on iOS and Android platforms.

Was this article helpful?

Related Cheat Sheets