Looking for documentation on gluestack-ui with NativeWind (alpha) version? Refer to this link.

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
-