KeyboardAvoidingView

Provides a view that moves out of the way of virtual keyboard automatically. It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its height, position, or bottom padding based on the keyboard height.

Example


Playground
const Example = () => {
  const isLargeScreen = useBreakpointValue({
    base: false,
    sm: false,
    md: false,
    lg: true
  });
  return <KeyboardAvoidingView h={{
    base: "600px",
    lg: "auto"
  }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
      {isLargeScreen ? <Text>Please see the example in your mobile to observe the effect</Text> : <VStack p={6} flex={1} justifyContent="space-around">
          <Text fontSize={36} mb={12}>
            Header
          </Text>
          <Input placeholder="Username" borderBottomWidth="1px" mb={9} mt="auto" />
          <Button variant="solid">Submit</Button>
        </VStack>}
    </KeyboardAvoidingView>;
};const Example = () => {
  const isLargeScreen = useBreakpointValue({
    base: false,
    sm: false,
    md: false,
    lg: true
  });
  return <KeyboardAvoidingView h={{
    base: "600px",
    lg: "auto"
  }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
      {isLargeScreen ? <Text>Please see the example in your mobile to observe the effect</Text> : <VStack p={6} flex={1} justifyContent="space-around">
          <Text fontSize={36} mb={12}>
            Header
          </Text>
          <Input placeholder="Username" borderBottomWidth="1px" mb={9} mt="auto" />
          <Button variant="solid">Submit</Button>
        </VStack>}
    </KeyboardAvoidingView>;
};