octo/tooot
octo
/
tooot
mirror of https://github.com/tooot-app/app
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix switch page keyboard avoidance view

This commit is contained in:
Zhiyuan Zheng 2021-05-27 10:40:05 +02:00
parent 8a56e3a4f0
commit 8a3f335d37
2 changed files with 59 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -4,7 +4,7 @@
"native": "210511", "native": "210511",
"major": 2, "major": 2,
"minor": 0, "minor": 0,
"patch": 0, "patch": 1,
"expo": "41.0.0" "expo": "41.0.0"
}, },
"description": "tooot app for Mastodon", "description": "tooot app for Mastodon",

103
src/screens/Tabs/Me/Switch.tsx
View File

@ -13,7 +13,13 @@ import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager' import { useTheme } from '@utils/styles/ThemeManager'
import React, { useRef } from 'react' import React, { useRef } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { StyleSheet, Text, View } from 'react-native' import {
KeyboardAvoidingView,
Platform,
StyleSheet,
Text,
View
} from 'react-native'
import { ScrollView } from 'react-native-gesture-handler' import { ScrollView } from 'react-native-gesture-handler'
import { useQueryClient } from 'react-query' import { useQueryClient } from 'react-query'
import { useDispatch, useSelector } from 'react-redux' import { useDispatch, useSelector } from 'react-redux'
@ -56,59 +62,66 @@ const TabMeSwitch: React.FC = () => {
const scrollViewRef = useRef<ScrollView>(null) const scrollViewRef = useRef<ScrollView>(null)
return ( return (
<ScrollView <KeyboardAvoidingView
ref={scrollViewRef} style={{ flex: 1 }}
style={styles.base} behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
keyboardShouldPersistTaps='always'
> >
<View style={[styles.firstSection, { borderBottomColor: theme.border }]}> <ScrollView
<Text style={[styles.header, { color: theme.primaryDefault }]}> ref={scrollViewRef}
{t('me.switch.existing')} style={styles.base}
</Text> keyboardShouldPersistTaps='always'
<View style={styles.accountButtons}> >
{instances.length <View
? instances style={[styles.firstSection, { borderBottomColor: theme.border }]}
.slice() >
.sort((a, b) => <Text style={[styles.header, { color: theme.primaryDefault }]}>
`${a.uri}${a.account.acct}`.localeCompare( {t('me.switch.existing')}
`${b.uri}${b.account.acct}` </Text>
<View style={styles.accountButtons}>
{instances.length
? instances
.slice()
.sort((a, b) =>
`${a.uri}${a.account.acct}`.localeCompare(
`${b.uri}${b.account.acct}`
)
) )
) .map((instance, index) => {
.map((instance, index) => { const localAccount = instances[instanceActive!]
const localAccount = instances[instanceActive!] return (
return ( <AccountButton
<AccountButton key={index}
key={index} instance={instance}
instance={instance} selected={
selected={ instance.url === localAccount.url &&
instance.url === localAccount.url && instance.token === localAccount.token &&
instance.token === localAccount.token && instance.account.id === localAccount.account.id
instance.account.id === localAccount.account.id }
} />
/> )
) })
}) : null}
: null} </View>
</View> </View>
</View>
<View style={styles.secondSection}> <View style={styles.secondSection}>
<Text style={[styles.header, { color: theme.primaryDefault }]}> <Text style={[styles.header, { color: theme.primaryDefault }]}>
{t('me.switch.new')} {t('me.switch.new')}
</Text> </Text>
<ComponentInstance <ComponentInstance
scrollViewRef={scrollViewRef} scrollViewRef={scrollViewRef}
disableHeaderImage disableHeaderImage
goBack goBack
/> />
</View> </View>
</ScrollView> </ScrollView>
</KeyboardAvoidingView>
) )
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
base: { base: {
marginBottom: StyleConstants.Spacing.L marginBottom: StyleConstants.Spacing.L * 2
}, },
header: { header: {
...StyleConstants.FontStyle.M, ...StyleConstants.FontStyle.M,