initial android fixes

zio/stable
João Ferreiro 2022-12-14 17:53:26 +00:00 committed by Paul Frazee
parent 0a3e7e63b2
commit 70f4debc0b
8 changed files with 43 additions and 19 deletions

View File

@ -3,6 +3,7 @@ import {observer} from 'mobx-react-lite'
import { import {
ActivityIndicator, ActivityIndicator,
KeyboardAvoidingView, KeyboardAvoidingView,
Platform,
SafeAreaView, SafeAreaView,
ScrollView, ScrollView,
StyleSheet, StyleSheet,
@ -175,7 +176,9 @@ export const ComposePost = observer(function ComposePost({
}, [text]) }, [text])
return ( return (
<KeyboardAvoidingView behavior="padding" style={styles.outer}> <KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
style={styles.outer}>
<SafeAreaView style={s.flex1}> <SafeAreaView style={s.flex1}>
<View style={styles.topbar}> <View style={styles.topbar}>
<TouchableOpacity onPress={onPressCancel}> <TouchableOpacity onPress={onPressCancel}>
@ -345,7 +348,6 @@ const styles = StyleSheet.create({
topbar: { topbar: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
paddingTop: 10,
paddingBottom: 10, paddingBottom: 10,
paddingHorizontal: 5, paddingHorizontal: 5,
height: 55, height: 55,
@ -398,6 +400,7 @@ const styles = StyleSheet.create({
padding: 5, padding: 5,
fontSize: 18, fontSize: 18,
marginLeft: 8, marginLeft: 8,
alignSelf: 'flex-start',
}, },
replyToLayout: { replyToLayout: {
flexDirection: 'row', flexDirection: 'row',

View File

@ -1,5 +1,5 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native' import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {useStores} from '../../../state' import {useStores} from '../../../state'
@ -76,7 +76,7 @@ export function Component({
onPress={() => doSelect(customUrl)}> onPress={() => doSelect(customUrl)}>
<FontAwesomeIcon <FontAwesomeIcon
icon="check" icon="check"
style={[s.black, {position: 'relative', top: 2}]} style={[s.black, styles.checkIcon]}
size={18} size={18}
/> />
</TouchableOpacity> </TouchableOpacity>
@ -133,4 +133,15 @@ const styles = StyleSheet.create({
fontWeight: '500', fontWeight: '500',
color: colors.white, color: colors.white,
}, },
checkIcon: {
position: 'relative',
...Platform.select({
android: {
top: 8,
},
ios: {
top: 2,
},
}),
},
}) })

View File

@ -331,6 +331,7 @@ const styles = StyleSheet.create({
fontFamily: 'System', fontFamily: 'System',
fontSize: 16, fontSize: 16,
lineHeight: 20.8, // 1.3 of 16px lineHeight: 20.8, // 1.3 of 16px
color: colors.black,
}, },
postEmbeds: { postEmbeds: {
marginBottom: 10, marginBottom: 10,

View File

@ -168,7 +168,7 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
onPress={onPressEditProfile} onPress={onPressEditProfile}
style={[styles.btn, styles.mainBtn]}> style={[styles.btn, styles.mainBtn]}>
<Text style={[s.fw400, s.f14]}>Edit Profile</Text> <Text style={[s.fw400, s.f14, s.black]}>Edit Profile</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<> <>
@ -177,7 +177,7 @@ export const ProfileHeader = observer(function ProfileHeader({
onPress={onPressToggleFollow} onPress={onPressToggleFollow}
style={[styles.btn, styles.mainBtn]}> style={[styles.btn, styles.mainBtn]}>
<FontAwesomeIcon icon="check" style={[s.mr5]} size={14} /> <FontAwesomeIcon icon="check" style={[s.mr5]} size={14} />
<Text style={[s.fw400, s.f14]}>Following</Text> <Text style={[s.fw400, s.f14, s.black]}>Following</Text>
</TouchableOpacity> </TouchableOpacity>
) : ( ) : (
<TouchableOpacity onPress={onPressToggleFollow}> <TouchableOpacity onPress={onPressToggleFollow}>
@ -202,7 +202,7 @@ export const ProfileHeader = observer(function ProfileHeader({
) : undefined} ) : undefined}
</View> </View>
<View style={styles.displayNameLine}> <View style={styles.displayNameLine}>
<Text style={styles.displayName}> <Text style={[styles.displayName, s.black]}>
{view.displayName || view.handle} {view.displayName || view.handle}
</Text> </Text>
</View> </View>
@ -218,7 +218,7 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollowers}> onPress={onPressFollowers}>
<Text style={[s.bold, s.mr2, styles.metricsText]}> <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
{view.followersCount} {view.followersCount}
</Text> </Text>
<Text style={[s.gray5, styles.metricsText]}> <Text style={[s.gray5, styles.metricsText]}>
@ -229,7 +229,7 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressFollows}> onPress={onPressFollows}>
<Text style={[s.bold, s.mr2, styles.metricsText]}> <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
{view.followsCount} {view.followsCount}
</Text> </Text>
<Text style={[s.gray5, styles.metricsText]}>following</Text> <Text style={[s.gray5, styles.metricsText]}>following</Text>
@ -239,7 +239,7 @@ export const ProfileHeader = observer(function ProfileHeader({
<TouchableOpacity <TouchableOpacity
style={[s.flexRow, s.mr10]} style={[s.flexRow, s.mr10]}
onPress={onPressMembers}> onPress={onPressMembers}>
<Text style={[s.bold, s.mr2, styles.metricsText]}> <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
{view.membersCount} {view.membersCount}
</Text> </Text>
<Text style={[s.gray5, styles.metricsText]}> <Text style={[s.gray5, styles.metricsText]}>
@ -248,7 +248,7 @@ export const ProfileHeader = observer(function ProfileHeader({
</TouchableOpacity> </TouchableOpacity>
) : undefined} ) : undefined}
<View style={[s.flexRow, s.mr10]}> <View style={[s.flexRow, s.mr10]}>
<Text style={[s.bold, s.mr2, styles.metricsText]}> <Text style={[s.bold, s.mr2, styles.metricsText, s.black]}>
{view.postsCount} {view.postsCount}
</Text> </Text>
<Text style={[s.gray5, styles.metricsText]}> <Text style={[s.gray5, styles.metricsText]}>

View File

@ -25,9 +25,9 @@ export function PostMeta(opts: PostMetaOpts) {
style={styles.metaItem} style={styles.metaItem}
href={opts.authorHref} href={opts.authorHref}
title={opts.authorHandle}> title={opts.authorHandle}>
<Text style={[s.f17, s.bold]} numberOfLines={1}> <Text style={[s.f17, s.bold, s.black]} numberOfLines={1}>
{opts.authorDisplayName || opts.authorHandle} {opts.authorDisplayName || opts.authorHandle}
<Text style={[s.f15, s.gray5, s.normal]} numberOfLines={1}> <Text style={[s.f15, s.gray5, s.normal, s.black]} numberOfLines={1}>
&nbsp;{opts.authorHandle} &nbsp;{opts.authorHandle}
</Text> </Text>
</Text> </Text>

View File

@ -28,9 +28,9 @@ export function RichText({
fontSize: 26, fontSize: 26,
lineHeight: 30, lineHeight: 30,
} }
return <Text style={style}>{text}</Text> return <Text style={[style]}>{text}</Text>
} }
return <Text style={style}>{text}</Text> return <Text style={[style]}>{text}</Text>
} }
if (!style) style = [] if (!style) style = []
else if (!Array.isArray(style)) style = [style] else if (!Array.isArray(style)) style = [style]
@ -65,7 +65,7 @@ export function RichText({
key++ key++
} }
return ( return (
<Text style={style} numberOfLines={numberOfLines}> <Text style={[style]} numberOfLines={numberOfLines}>
{els} {els}
</Text> </Text>
) )

View File

@ -56,7 +56,11 @@ export const ViewHeader = observer(function ViewHeader({
hitSlop={BACK_HITSLOP} hitSlop={BACK_HITSLOP}
style={canGoBack ? styles.backIcon : styles.backIconWide}> style={canGoBack ? styles.backIcon : styles.backIconWide}>
{canGoBack ? ( {canGoBack ? (
<FontAwesomeIcon size={18} icon="angle-left" style={{marginTop: 6}} /> <FontAwesomeIcon
size={18}
icon="angle-left"
style={{marginTop: 6, color: colors.black}}
/>
) : ( ) : (
<UserAvatar <UserAvatar
size={30} size={30}
@ -138,6 +142,7 @@ const styles = StyleSheet.create({
title: { title: {
fontSize: 21, fontSize: 21,
fontWeight: '600', fontWeight: '600',
color: colors.black,
}, },
subtitle: { subtitle: {
fontSize: 18, fontSize: 18,

View File

@ -1,6 +1,6 @@
import React, {useEffect} from 'react' import React, {useEffect} from 'react'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import {Animated, Easing, StyleSheet, View} from 'react-native' import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
import {ComposePost} from '../../com/composer/ComposePost' import {ComposePost} from '../../com/composer/ComposePost'
import {ComposerOpts} from '../../../state/models/shell-ui' import {ComposerOpts} from '../../../state/models/shell-ui'
import {useAnimatedValue} from '../../lib/useAnimatedValue' import {useAnimatedValue} from '../../lib/useAnimatedValue'
@ -69,6 +69,10 @@ const styles = StyleSheet.create({
bottom: 0, bottom: 0,
width: '100%', width: '100%',
backgroundColor: '#fff', backgroundColor: '#fff',
...Platform.select({
ios: {
paddingTop: 24, paddingTop: 24,
}, },
}),
},
}) })