React Native Input Accessory View

An universal InputAccessoryView for Android and iOS

Installation

yarn add react-native-input-accessory-view

If you don't have those already, you will also need to install the react-native-safe-area-context and react-native-reanimated

yarn add react-native-reanimated
yarn add [email protected]

Usage

import InputAccessoryView from 'react-native-input-accessory-view';
// ...

return (
  <>
    <SafeAreaView style={styles.container}>
      <View style={{ height: 55, backgroundColor: 'blue', width: '100%' }}>
        <TextInput style={{ flex: 1, padding: 0 }} />
      </View>
    </SafeAreaView>
    <InputAccessoryView
      spaceHeight={100}
      extraHeight={0} //? optional
      renderView={() => (
        <View
          style={{
            flex: 1,
            backgroundColor: 'blue',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Text style={{ color: 'red' }}>hello</Text>
        </View>
      )}
    />
  </>
);

// ...

See the example app for full usage details.

License

MIT

Donate ✨

Support maintainers with a donation and help them continue with activities.