useKeyboardState

useKeyboardState is a hook which gives an access to current keyboard state.

warning

Use this hook only when you need to control props of views returned in JSX-markup. If you need to access the keyboard state in callbacks or event handlers then consider to use KeyboardController.state() method instead. This allows you to retrieve values as needed without triggering unnecessary re-renders.

✅ Recommended 👍

// use KeyboardController.state()

<Button
  onPress={() => {
    const state = KeyboardController.state();
    if (state.isVisible) {
      // ...
    }
  }}
>
  Go to Next Page
</Button>

❌ Not recommended 🙅‍♂️

const { isVisible } = useKeyboardState();

<Button
  onPress={() => {
    // don't consume state from hook
    if (isVisible) {
      // ...
    }
  }}
>
  Go to next Page
</Button>;

Data structure

useKeyboardState returns a KeyboardState object.

Example

import { View, Text, StyleSheet } from "react-native";
import { useKeyboardState } from "react-native-keyboard-controller";

const ShowcaseComponent = () => {
  const { isVisible } = useKeyboardState();

  return (
    <View style={isVisible ? styles.highlighted : null}>
      <Text>Address form</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  highlighted: {
    borderColor: "#0070D8",
  },
});

Also have a look on example app for more comprehensive usage.