MfWrapperView

The primary layout container. Manages keyboard avoidance, safe area insets, and view measurement for all child components.

Usage

import { MfWrapperView, MfText, MfTextInput } from '@zyno-io/mobile-foundation-rn';

function MyScreen() {
    return (
        <MfWrapperView>
            <View style={{ flex: 1 }}>
                <MfText>Screen content</MfText>
            </View>
            <MfTextInput placeholder="Stays above keyboard" />
        </MfWrapperView>
    );
}

Props

Prop	Type	Default	Description
safeArea	boolean | Inset | Inset[]	false	Which safe area insets to apply (top/bottom only)
noKeyboardAvoiding	boolean	false	Disable automatic keyboard avoidance
noLayoutCheck	boolean	false	Skip layout measurement (for static layouts)
layoutAfterTransition	boolean	false	Delay measurement until after screen transitions
center	boolean	false	Center children vertically and horizontally
contentContainerStyle	ViewStyle	—	Style for the inner content container
onInsetsPaddingUpdated	(padding: Insets) => void	—	Callback when computed padding changes
children	ReactNode	—	Screen content

The MfWrapperViewCommonProps type is exported for use in custom component props that extend the wrapper's API.

Safe Area

Control which insets are applied:

// All insets (top + bottom)
<MfWrapperView safeArea>

// Bottom only
<MfWrapperView safeArea="bottom">

// Multiple specific insets
<MfWrapperView safeArea={['top', 'bottom']}>

The Inset type is 'top' | 'bottom' | 'left' | 'right'. Note that MfWrapperView only applies top and bottom padding — left/right values from the safe area hook are not used.

How Keyboard Avoidance Works

1. MfWrapperView measures its absolute pageY position on screen
2. When the keyboard opens, it calculates how much of the view would be obscured
3. It applies animated bottom padding to push content above the keyboard
4. The measurement accounts for navigation headers, tab bars, and modal offsets

This approach is more reliable than React Native's built-in KeyboardAvoidingView because it measures the actual screen position rather than relying on view hierarchy assumptions.

Nested Keyboard Contexts

When MfWrapperView is used inside another keyboard-aware container, it uses a KeyboardHeightProvider to communicate that the keyboard offset is already handled. This prevents double-padding in nested layouts.