MultinaireKeyboardAvoidingView

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

Basic Usage

import { MultinaireKeyboardAvoidingView } from '@multinaire/multinaire-design';

<MultinaireKeyboardAvoidingView flex={1}>
  <MultinaireScrollView>
    <MultinaireInput placeholder="Email" />
    <MultinaireInput placeholder="Password" />
  </MultinaireScrollView>
</MultinaireKeyboardAvoidingView>

Props

Prop	Type	Default	Description
flex	number	-	Flex 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 (
    <MultinaireKeyboardAvoidingView flex={1}>
      <MultinaireScrollView
        flex={1}
        padding={16}
        contentContainerStyle={{ flexGrow: 1 }}
        keyboardShouldPersistTaps="handled"
      >
        <MultinaireContainer flex={1} justifyContent="center" gap={16}>
          <MultinaireInput
            title="Email"
            placeholder="Enter email"
            value={email}
            onChangeText={setEmail}
          />
          <MultinaireInput
            title="Password"
            placeholder="Enter password"
            value={password}
            onChangeText={setPassword}
          />
          <MultinaireButton title="Sign In" onPress={handleLogin} />
        </MultinaireContainer>
      </MultinaireScrollView>
    </MultinaireKeyboardAvoidingView>
  );
}

Chat Input

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

      <MultinaireContainer horizontal padding={8} gap={8}>
        <MultinaireInput
          flex={1}
          placeholder="Type a message..."
          value={message}
          onChangeText={setMessage}
        />
        <MultinaireIconButton icon="Send" onPress={sendMessage} />
      </MultinaireContainer>
    </MultinaireKeyboardAvoidingView>
  );
}

With Safe Area

<MultinaireContainer flex={1} safeAreaEdges={['top']}>
  <MultinaireKeyboardAvoidingView flex={1}>
    <FormContent />
  </MultinaireKeyboardAvoidingView>
</MultinaireContainer>

note

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