Bug: 3 Stellen hatten `behavior={Platform.OS === 'ios' ? 'padding' : undefined}`.
Auf Android = `undefined` = KeyboardAvoidingView macht NICHTS → Input wird von
Tastatur verdeckt (chat-input, profile-edit-nickname, room-chat).
Fix: switch zu react-native-keyboard-controller's KeyboardAvoidingView mit
behavior='padding' für beide Plattformen. Funktioniert sauber cross-platform
weil KeyboardProvider schon im root-layout sitzt.
Affected Files:
- components/KeyboardAwareScreen.tsx (used by profile-edit + auth-screens)
- app/dm.tsx (DM chat)
- app/room.tsx (room chat)
lyra.tsx war bereits OK (`'height'` für Android — kein Fix nötig).
iOS-Verhalten unverändert.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import {
|
|
Keyboard,
|
|
Platform,
|
|
ScrollView,
|
|
StyleProp,
|
|
TouchableWithoutFeedback,
|
|
View,
|
|
ViewStyle,
|
|
} from 'react-native';
|
|
import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
|
|
|
|
export interface KeyboardAwareScreenProps {
|
|
children: ReactNode;
|
|
/**
|
|
* Extra offset for `keyboardVerticalOffset` on iOS. For screens wrapped in
|
|
* `<SafeAreaView>` this should be 0 (default) — the SafeAreaView already
|
|
* absorbs the top inset. For screens that own their header with
|
|
* `paddingTop: insets.top` baked in (e.g. profile/edit), pass the full
|
|
* header height so iOS computes the correct push distance.
|
|
*/
|
|
headerOffset?: number;
|
|
/**
|
|
* When true, wraps children in a `ScrollView`. Use for long forms (sign-up,
|
|
* profile-edit). When false (default), a plain `View` fills the remaining
|
|
* space — tap anywhere outside an input dismisses the keyboard.
|
|
*/
|
|
scrollable?: boolean;
|
|
/** Style applied to the outer KeyboardAvoidingView. */
|
|
style?: StyleProp<ViewStyle>;
|
|
/** Style applied to the inner container (ScrollView or View). */
|
|
contentContainerStyle?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
export function KeyboardAwareScreen({
|
|
children,
|
|
headerOffset = 0,
|
|
scrollable = false,
|
|
style,
|
|
contentContainerStyle,
|
|
}: KeyboardAwareScreenProps) {
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={[{ flex: 1 }, style]}
|
|
behavior="padding"
|
|
keyboardVerticalOffset={headerOffset}
|
|
>
|
|
{scrollable ? (
|
|
<ScrollView
|
|
style={{ flex: 1 }}
|
|
contentContainerStyle={contentContainerStyle}
|
|
keyboardShouldPersistTaps="handled"
|
|
keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{children}
|
|
</ScrollView>
|
|
) : (
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
|
|
<View style={[{ flex: 1 }, contentContainerStyle]}>{children}</View>
|
|
</TouchableWithoutFeedback>
|
|
)}
|
|
</KeyboardAvoidingView>
|
|
);
|
|
}
|