KeyboardAvoidingView

Provides a view that moves out of the way of virtual keyboard automatically. It solves the common problem of views needing 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.

function App() {
  const [showActionsheet, setShowActionsheet] = React.useState(false)
  const handleClose = () => setShowActionsheet(!showActionsheet)
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "height" : "height"}
      style={{ flex: 1, zIndex: 999 }}
    >
      <Center h="100%" zIndex={999}>
        <Button onPress={handleClose}>
          <Button.Text>Open</Button.Text>
        </Button>
        <Actionsheet
          isOpen={showActionsheet}
          onClose={handleClose}
          zIndex={999}
        >
          <ActionsheetBackdrop />
          <ActionsheetContent maxHeight="75%" zIndex={999}>
            <ActionsheetDragIndicatorWrapper>
              <ActionsheetDragIndicator />
            </ActionsheetDragIndicatorWrapper>
            <VStack w="$full" p={20}>
              <HStack justifyContent="center" alignItems="center" space="md">
                <Box
                  w={50}
                  h="$full"
                  px="$2"
                  borderWidth={1}
                  borderStyle="solid"
                  borderColor="$borderLight300"
                  rounded="$sm"
                >
                  <Image
                    source={{ uri: "https://i.imgur.com/UwTLr26.png" }}
                    flex={1}
                    resizeMode="contain"
                  />
                </Box>
                <VStack flex={1}>
                  <Text fontWeight="$bold">Mastercard</Text>
                  <Text>Card ending in 2345</Text>
                </VStack>
              </HStack>
              <FormControl mt={36}>
                <FormControlLabel>
                  <FormControlLabelText>
                    Confirm security code
                  </FormControlLabelText>
                </FormControlLabel>
                <Input w="$full">
                  <InputSlot>
                    <InputIcon as={InputIcon} ml="$2" />
                  </InputSlot>
                  <InputField placeholder="CVC/CVV" />
                </Input>
                <Button onPress={handleClose} mt={20}>
                  <ButtonText>Pay $1000</ButtonText>
                </Button>
              </FormControl>
            </VStack>
          </ActionsheetContent>
        </Actionsheet>
      </Center>
    </KeyboardAvoidingView>
  )
}

Note: You can refer here to learn about default styling of FlatList component

Import

To use this component in your project, include the following import statement in your file.

import { KeyboardAvoidingView } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand a badge component's various parts.

export default () => <KeyboardAvoidingView></KeyboardAvoidingView>

Props

gluestack-ui KeyboardAvoidingView component is created using KeyboardAvoidingView component from react-native. It extends all the props supported by React Native KeyboardAvoidingView, React Native View,utility props and the props mentioned below.

View

Name	Value	Default
children	any	-

Edit this page on GitHub