KeyboardAboveView

A component that automatically lifts child components above the keyboard when it appears on the screen. It's useful when you want to keep elements like a "Send" button fixed above the keyboard during text input.

Signature

function KeyboardAboveView({ style, children, ...props }: ComponentProps<typeof View>): ReactElement;

Parameter

• props.styleStyleProp<ViewStyle>
  

  Additional styles can be applied. For example, you can set background color or size.

• props.childrenReactNode
  

  Components to be displayed above the keyboard when it appears. For example, you can include buttons, text input fields, etc.

Return Value

• ReactElement
  

  Returns an `Animated.View` that is adjusted above the keyboard when it appears.

Example

Lifting elements above the keyboard

import { ScrollView, TextInput, View, Text } from 'react-native';
import { KeyboardAboveView } from '@granite-js/react-native';

export function KeyboardAboveViewExample() {
  return (
    <>
      <ScrollView>
        <TextInput placeholder="placeholder" />
      </ScrollView>

      <KeyboardAboveView>
        <View style={{ width: '100%', height: 50, backgroundColor: 'yellow' }}>
          <Text>Above the keyboard</Text>
        </View>
      </KeyboardAboveView>
    </>
  );
}