chahinebrini 77bb7b84dc fix(keyboard): Android keyboard covers input — use react-native-keyboard-controller
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>
2026-05-17 21:58:05 +02:00

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>
);
}