KeyboardAvoidingContainer

Keyboard-aware container that adjusts for the on-screen keyboard.

Basic Usage

import { KeyboardAvoidingContainer } from '@multinaire/ui';

<KeyboardAvoidingContainer flex={1}>
  <ScrollContainer>
    <Input placeholder="Email" />
    <Input placeholder="Password" />
  </ScrollContainer>
</KeyboardAvoidingContainer>

Props

Prop	Type	Default	Description
flex	number	—	Flex grow value
behavior	'height' | 'position' | 'padding'	iOS: 'padding', Android: 'height'	Keyboard avoiding behavior

All React Native KeyboardAvoidingView props are also supported.

Examples

Form Screen

function LoginScreen() {
  return (
    <KeyboardAvoidingContainer flex={1}>
      <ScrollContainer
        flex={1}
        padding={16}
        contentContainerStyle={{ flexGrow: 1 }}
        keyboardShouldPersistTaps="handled"
      >
        <Container flex={1} justifyContent="center" gap={16}>
          <Input
            title="Email"
            placeholder="Enter email"
            value={email}
            onChangeText={setEmail}
          />
          <Input
            title="Password"
            placeholder="Enter password"
            value={password}
            onChangeText={setPassword}
          />
          <Button title="Sign In" onPress={handleLogin} />
        </Container>
      </ScrollContainer>
    </KeyboardAvoidingContainer>
  );
}

Chat Input

function ChatScreen() {
  return (
    <KeyboardAvoidingContainer flex={1}>
      <ListContainer flex={1} data={messages} renderItem={...} />

      <Container horizontal padding={8} gap={8}>
        <Input
          flex={1}
          placeholder="Type a message..."
          value={message}
          onChangeText={setMessage}
        />
        <IconButton icon="Send" onPress={sendMessage} />
      </Container>
    </KeyboardAvoidingContainer>
  );
}

With Safe Area

<Container flex={1} safeAreaEdges={['top']}>
  <KeyboardAvoidingContainer flex={1}>
    <FormContent />
  </KeyboardAvoidingContainer>
</Container>

note

The component automatically handles platform differences - using padding behavior on iOS and height behavior on Android for optimal results.