Reposition to handle scene creation keyboard view

src/view/com/modals/CreateScene.tsx

@@ -9,13 +9,14 @@ import {
   View,
 } from 'react-native'
 import LinearGradient from 'react-native-linear-gradient'
+import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
 import {ErrorMessage} from '../util/ErrorMessage'
 import {useStores} from '../../../state'
 import {s, colors, gradients} from '../../lib/styles'
 import {makeValidHandle, createFullHandle} from '../../lib/strings'
 import {AppBskyActorCreateScene} from '../../../third-party/api/index'
 
-export const snapPoints = ['70%']
+export const snapPoints = ['60%']
 
 export function Component({}: {}) {
   const store = useStores()
@@ -88,75 +89,82 @@ export function Component({}: {}) {
   }
 
   return (
-    <View style={s.flex1}>
+    <View style={styles.outer}>
       <Text style={styles.title}>Create a scene</Text>
       <Text style={styles.description}>
         Scenes are invite-only groups which aggregate what's popular with
         members.
       </Text>
-      <View style={styles.inner}>
+      <BottomSheetScrollView style={styles.inner}>
-        <View style={styles.group}>
+        <View style={{paddingBottom: 50}}>
-          <Text style={styles.label}>Scene Handle</Text>
+          <View style={styles.group}>
-          <TextInput
+            <Text style={styles.label}>Scene Handle</Text>
-            style={styles.textInput}
+            <BottomSheetTextInput
-            placeholder="e.g. alices-friends"
+              style={styles.textInput}
-            value={handle}
+              placeholder="e.g. alices-friends"
-            onChangeText={str => setHandle(makeValidHandle(str))}
+              value={handle}
-          />
+              onChangeText={str => setHandle(makeValidHandle(str))}
-        </View>
+            />
-        <View style={styles.group}>
+          </View>
-          <Text style={styles.label}>Scene Display Name</Text>
+          <View style={styles.group}>
-          <TextInput
+            <Text style={styles.label}>Scene Display Name</Text>
-            style={styles.textInput}
+            <BottomSheetTextInput
-            placeholder="e.g. Alice's Friends"
+              style={styles.textInput}
-            value={displayName}
+              placeholder="e.g. Alice's Friends"
-            onChangeText={setDisplayName}
+              value={displayName}
-          />
+              onChangeText={setDisplayName}
-        </View>
+            />
-        <View style={styles.group}>
+          </View>
-          <Text style={styles.label}>Scene Description</Text>
+          <View style={styles.group}>
-          <TextInput
+            <Text style={styles.label}>Scene Description</Text>
-            style={[styles.textArea]}
+            <BottomSheetTextInput
-            placeholder="e.g. Artists, dog-lovers, and memelords."
+              style={[styles.textArea]}
-            multiline
+              placeholder="e.g. Artists, dog-lovers, and memelords."
-            value={description}
+              multiline
-            onChangeText={setDescription}
+              value={description}
-          />
+              onChangeText={setDescription}
-        </View>
+            />
-        <View style={styles.errorContainer}>
+          </View>
           {error !== '' && (
-            <View style={s.mb10}>
+            <View style={styles.errorContainer}>
-              <ErrorMessage message={error} numberOfLines={3} />
+              <View style={s.mb10}>
+                <ErrorMessage message={error} numberOfLines={3} />
+              </View>
+            </View>
+          )}
+          {handle.length >= 2 && !isProcessing ? (
+            <TouchableOpacity style={s.mt10} onPress={onPressSave}>
+              <LinearGradient
+                colors={[gradients.primary.start, gradients.primary.end]}
+                start={{x: 0, y: 0}}
+                end={{x: 1, y: 1}}
+                style={[styles.btn]}>
+                <Text style={[s.white, s.bold, s.f18]}>Create Scene</Text>
+              </LinearGradient>
+            </TouchableOpacity>
+          ) : (
+            <View style={s.mt10}>
+              <View style={[styles.btn]}>
+                {isProcessing ? (
+                  <ActivityIndicator />
+                ) : (
+                  <Text style={[s.gray4, s.bold, s.f18]}>Create Scene</Text>
+                )}
+              </View>
             </View>
           )}
         </View>
-        {handle.length >= 2 && !isProcessing ? (
+      </BottomSheetScrollView>
-          <TouchableOpacity style={s.mt10} onPress={onPressSave}>
-            <LinearGradient
-              colors={[gradients.primary.start, gradients.primary.end]}
-              start={{x: 0, y: 0}}
-              end={{x: 1, y: 1}}
-              style={[styles.btn]}>
-              <Text style={[s.white, s.bold, s.f18]}>Create Scene</Text>
-            </LinearGradient>
-          </TouchableOpacity>
-        ) : (
-          <View style={s.mt10}>
-            <View style={[styles.btn]}>
-              {isProcessing ? (
-                <ActivityIndicator />
-              ) : (
-                <Text style={[s.gray4, s.bold, s.f18]}>Create Scene</Text>
-              )}
-            </View>
-          </View>
-        )}
-      </View>
     </View>
   )
 }
 
 const styles = StyleSheet.create({
+  outer: {
+    flex: 1,
+    paddingTop: 20,
+    paddingBottom: 20,
+  },
   title: {
     textAlign: 'center',
     fontWeight: 'bold',
@@ -172,6 +180,7 @@ const styles = StyleSheet.create({
   },
   inner: {
     padding: 14,
+    height: 350,
   },
   group: {
     marginBottom: 10,
@@ -197,7 +206,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingTop: 10,
     fontSize: 16,
-    height: 100,
+    height: 70,
     textAlignVertical: 'top',
   },
   errorContainer: {