Add KeyboardAvoidingView to all screens with text inputs (#135)

* Initial plan

* Add KeyboardAvoidingView to all screens with text input fields

Co-authored-by: grillinr <169214325+grillinr@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: grillinr <169214325+grillinr@users.noreply.github.com>

Author: Copilot

frontend/app/(auth)/sign-in.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 import {
   ActivityIndicator,
   Animated,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   StyleSheet,
   TextInput,
@@ -66,6 +68,10 @@ export default function SignInScreen() {
       style={[styles.screen, { backgroundColor: colors.background }]}
       edges={[]}
     >
+      <KeyboardAvoidingView
+        style={styles.screen}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+      >
       <Animated.View
         style={[
           styles.content,
@@ -154,6 +160,7 @@ export default function SignInScreen() {
           </View>
         </View>
       </Animated.View>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }

frontend/app/(auth)/sign-up.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useRef, useState } from "react";
 import {
   ActivityIndicator,
   Animated,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   StyleSheet,
   TextInput,
@@ -70,6 +72,10 @@ export default function SignUpScreen() {
       style={[styles.screen, { backgroundColor: colors.background }]}
       edges={[]}
     >
+      <KeyboardAvoidingView
+        style={styles.screen}
+        behavior={Platform.OS === "ios" ? "padding" : undefined}
+      >
       <Animated.View
         style={[
           styles.content,
@@ -158,6 +164,7 @@ export default function SignUpScreen() {
           </View>
         </View>
       </Animated.View>
+      </KeyboardAvoidingView>
     </SafeAreaView>
   );
 }

frontend/app/(tabs)/explore.tsx

@@ -10,6 +10,8 @@ import {
   Animated,
   InteractionManager,
   Keyboard,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   RefreshControl,
   ScrollView,
@@ -527,6 +529,10 @@ export default function ExploreScreen() {
     <View style={[styles.screen, { backgroundColor: colors.background }]}>
       <View style={styles.background} pointerEvents="none" />
       <SafeAreaView style={styles.safeArea} edges={["top"]}>
+        <KeyboardAvoidingView
+          style={styles.safeArea}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+        >
         <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
           <Animated.ScrollView
             ref={scrollRef}
@@ -955,6 +961,7 @@ export default function ExploreScreen() {
             ) : null}
           </Animated.ScrollView>
         </TouchableWithoutFeedback>
+        </KeyboardAvoidingView>
       </SafeAreaView>
       <TopBlur scrollY={scrollY} />
       <FloatingScrollTopButton

frontend/app/manage-streams.tsx

@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import {
   Alert,
   Animated,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   RefreshControl,
   ScrollView,
@@ -215,6 +217,10 @@ export default function ManageStreamsScreen() {
   return (
     <View style={[styles.screen, { backgroundColor: colors.background }]}>
       <SafeAreaView style={styles.safeArea} edges={["top"]}>
+        <KeyboardAvoidingView
+          style={styles.screen}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+        >
         <Animated.ScrollView
           ref={scrollRef}
           contentInsetAdjustmentBehavior="never"
@@ -461,6 +467,7 @@ export default function ManageStreamsScreen() {
             </View>
           )}
         </Animated.ScrollView>
+        </KeyboardAvoidingView>
       </SafeAreaView>
       <TopBlur scrollY={scrollY} />
       <FloatingScrollTopButton

frontend/features/settings/shared.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef } from "react";
 import {
   Animated,
+  KeyboardAvoidingView,
+  Platform,
   Pressable,
   ScrollView,
   StyleSheet,
@@ -60,6 +62,10 @@ export function SettingsPageShell({
   return (
     <View style={[styles.screen, { backgroundColor: colors.background }]}>
       <SafeAreaView style={styles.screen} edges={["top"]}>
+        <KeyboardAvoidingView
+          style={styles.screen}
+          behavior={Platform.OS === "ios" ? "padding" : undefined}
+        >
         <Animated.ScrollView
           ref={scrollRef}
           onScroll={onScroll}
@@ -113,6 +119,7 @@ export function SettingsPageShell({
             <View style={styles.body}>{children}</View>
           </Animated.View>
         </Animated.ScrollView>
+        </KeyboardAvoidingView>
       </SafeAreaView>
       <TopBlur scrollY={scrollY} />
       <FloatingScrollTopButton