zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Reposition to handle scene creation keyboard view

zio/stable
Paul Frazee 2022-11-14 13:32:04 -06:00
parent 51c9a51f8c
commit 482ddc9c0d
1 changed files with 66 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/view/com/modals/CreateScene.tsx
View File

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