Fix form keyboard issues and sticky footers in agent screens

2026-05-26 16:34:05 +05:30
commit 9ac5e95d52
410 changed files with 86650 additions and 0 deletions
@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  Animated,
+  Keyboard,
+  KeyboardAvoidingView,
+  Modal,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+import { useTheme } from '../../theme';
+
+interface BottomSheetProps {
+  visible: boolean;
+  title?: string;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const BottomSheet = ({ visible, title, onClose, children }: BottomSheetProps) => {
+  const theme = useTheme();
+  const translateY = useRef(new Animated.Value(320)).current;
+
+  useEffect(() => {
+    Animated.timing(translateY, {
+      toValue: visible ? 0 : 320,
+      duration: 220,
+      useNativeDriver: true,
+    }).start();
+  }, [translateY, visible]);
+
+  const handleBackdropPress = () => {
+    Keyboard.dismiss();
+    onClose();
+  };
+
+  return (
+    <Modal animationType="fade" transparent visible={visible} onRequestClose={onClose}>
+      <KeyboardAvoidingView
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+        style={styles.flex}
+        keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
+      >
+        <TouchableWithoutFeedback onPress={handleBackdropPress}>
+          <View style={[styles.backdrop, { backgroundColor: theme.colors.overlay }]}>
+            <TouchableWithoutFeedback onPress={() => {}}>
+              <Animated.View
+                style={[
+                  styles.sheet,
+                  {
+                    backgroundColor: theme.colors.backgroundElevated,
+                    borderTopLeftRadius: theme.radius.lg,
+                    borderTopRightRadius: theme.radius.lg,
+                    transform: [{ translateY }],
+                  },
+                ]}
+              >
+                <View style={[styles.handle, { backgroundColor: theme.colors.cardBorder }]} />
+                {title ? (
+                  <Text style={[styles.title, { color: theme.colors.textPrimary }]}>{title}</Text>
+                ) : null}
+                <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  showsVerticalScrollIndicator={false}
+                  bounces={false}
+                  contentContainerStyle={styles.sheetScroll}
+                >
+                  {children}
+                </ScrollView>
+              </Animated.View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  backdrop: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    paddingHorizontal: 20,
+    paddingTop: 14,
+    paddingBottom: 28,
+    gap: 12,
+    maxHeight: '80%',
+  },
+  sheetScroll: {
+    flexGrow: 1,
+  },
+  handle: {
+    width: 42,
+    height: 4,
+    borderRadius: 999,
+    alignSelf: 'center',
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+  },
+});