initial android fixes
parent
0a3e7e63b2
commit
70f4debc0b
|
@ -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',
|
||||||
|
|
|
@ -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,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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]}>
|
||||||
|
|
|
@ -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}>
|
||||||
{opts.authorHandle}
|
{opts.authorHandle}
|
||||||
</Text>
|
</Text>
|
||||||
</Text>
|
</Text>
|
||||||
|
|
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
}),
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue