Fix sizing on smaller phones

zio/stable
Paul Frazee 2022-11-16 14:05:21 -06:00
parent fec1589f7c
commit 0b7b91d5fd
7 changed files with 32 additions and 21 deletions

View File

@ -222,7 +222,7 @@ PODS:
- glog - glog
- react-native-pager-view (6.0.2): - react-native-pager-view (6.0.2):
- React-Core - React-Core
- react-native-safe-area-context (4.3.4): - react-native-safe-area-context (4.4.1):
- RCT-Folly - RCT-Folly
- RCTRequired - RCTRequired
- RCTTypeSafety - RCTTypeSafety
@ -495,7 +495,7 @@ SPEC CHECKSUMS:
React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8 React-jsinspector: c5989c77cb89ae6a69561095a61cce56a44ae8e8
React-logger: a0833912d93b36b791b7a521672d8ee89107aff1 React-logger: a0833912d93b36b791b7a521672d8ee89107aff1
react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605 react-native-pager-view: 592421df0259bf7a7a4fe85b74c24f3f39905605
react-native-safe-area-context: dfe5aa13bee37a0c7e8059d14f72ffc076d120e9 react-native-safe-area-context: 99b24a0c5acd0d5dcac2b1a7f18c49ea317be99a
react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457 react-native-splash-screen: 4312f786b13a81b5169ef346d76d33bc0c6dc457
React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6 React-perflogger: a18b4f0bd933b8b24ecf9f3c54f9bf65180f3fe6
React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162 React-RCTActionSheet: 547fe42fdb4b6089598d79f8e1d855d7c23e2162

View File

@ -39,7 +39,7 @@
"react-native-reanimated": "^2.9.1", "react-native-reanimated": "^2.9.1",
"react-native-root-siblings": "^4.1.1", "react-native-root-siblings": "^4.1.1",
"react-native-root-toast": "^3.4.0", "react-native-root-toast": "^3.4.0",
"react-native-safe-area-context": "^4.3.1", "react-native-safe-area-context": "^4.4.1",
"react-native-screens": "^3.13.1", "react-native-screens": "^3.13.1",
"react-native-splash-screen": "^3.3.0", "react-native-splash-screen": "^3.3.0",
"react-native-svg": "^12.4.0", "react-native-svg": "^12.4.0",

View File

@ -3,6 +3,7 @@ import React, {useState, useEffect} from 'react'
import {RootSiblingParent} from 'react-native-root-siblings' import {RootSiblingParent} from 'react-native-root-siblings'
import {GestureHandlerRootView} from 'react-native-gesture-handler' import {GestureHandlerRootView} from 'react-native-gesture-handler'
import SplashScreen from 'react-native-splash-screen' import SplashScreen from 'react-native-splash-screen'
import {SafeAreaProvider} from 'react-native-safe-area-context'
import {whenWebCrypto} from './platform/polyfills.native' import {whenWebCrypto} from './platform/polyfills.native'
import * as view from './view/index' import * as view from './view/index'
import {RootStoreModel, setupState, RootStoreProvider} from './state' import {RootStoreModel, setupState, RootStoreProvider} from './state'
@ -35,7 +36,9 @@ function App() {
<GestureHandlerRootView style={{flex: 1}}> <GestureHandlerRootView style={{flex: 1}}>
<RootSiblingParent> <RootSiblingParent>
<RootStoreProvider value={rootStore}> <RootStoreProvider value={rootStore}>
<MobileShell /> <SafeAreaProvider>
<MobileShell />
</SafeAreaProvider>
</RootStoreProvider> </RootStoreProvider>
</RootSiblingParent> </RootSiblingParent>
</GestureHandlerRootView> </GestureHandlerRootView>

View File

@ -1,5 +1,5 @@
import React from 'react' import React, {useMemo} from 'react'
import {StyleSheet, Text, View} from 'react-native' import {StyleSheet, useWindowDimensions, Text, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {Link} from '../util/Link' import {Link} from '../util/Link'
import {PostDropdownBtn} from '../util/DropdownBtn' import {PostDropdownBtn} from '../util/DropdownBtn'
@ -16,11 +16,16 @@ interface PostMetaOpts {
} }
export function PostMeta(opts: PostMetaOpts) { export function PostMeta(opts: PostMetaOpts) {
const winDim = useWindowDimensions()
const maxWidth = useMemo(
() => ({maxWidth: ((winDim.width * 3) / 5) | 0}),
[winDim.width],
)
return ( return (
<View style={styles.meta}> <View style={styles.meta}>
<View style={styles.metaNames}> <View style={[styles.metaNames, maxWidth]}>
<Link <Link
style={styles.metaItem} style={[styles.metaItem, maxWidth]}
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]} numberOfLines={1}>
@ -28,7 +33,7 @@ export function PostMeta(opts: PostMetaOpts) {
</Text> </Text>
</Link> </Link>
<Link <Link
style={styles.metaItem} style={[styles.metaItem, maxWidth]}
href={opts.authorHref} href={opts.authorHref}
title={opts.authorHandle}> title={opts.authorHandle}>
<Text style={[s.f15, s.gray5]} numberOfLines={1}> <Text style={[s.f15, s.gray5]} numberOfLines={1}>
@ -37,7 +42,7 @@ export function PostMeta(opts: PostMetaOpts) {
</Link> </Link>
</View> </View>
<Text style={[styles.metaItem, s.f15, s.gray5]}> <Text style={[styles.metaItem, s.f15, s.gray5]}>
&middot; {ago(opts.timestamp)} {ago(opts.timestamp)}
</Text> </Text>
<View style={s.flex1} /> <View style={s.flex1} />
<PostDropdownBtn <PostDropdownBtn
@ -61,11 +66,9 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
alignItems: 'center', alignItems: 'center',
maxWidth: 240,
overflow: 'hidden', overflow: 'hidden',
}, },
metaItem: { metaItem: {
maxWidth: 240,
paddingRight: 5, paddingRight: 5,
}, },
}) })

View File

@ -8,6 +8,7 @@ import {
TouchableWithoutFeedback, TouchableWithoutFeedback,
View, View,
} from 'react-native' } from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import Animated, { import Animated, {
useSharedValue, useSharedValue,
useAnimatedStyle, useAnimatedStyle,
@ -27,6 +28,7 @@ export const MainMenu = observer(
({active, onClose}: {active: boolean; onClose: () => void}) => { ({active, onClose}: {active: boolean; onClose: () => void}) => {
const store = useStores() const store = useStores()
const initInterp = useSharedValue<number>(0) const initInterp = useSharedValue<number>(0)
const insets = useSafeAreaInsets()
useEffect(() => { useEffect(() => {
if (active) { if (active) {
@ -167,7 +169,12 @@ export const MainMenu = observer(
<TouchableWithoutFeedback onPress={onClose}> <TouchableWithoutFeedback onPress={onClose}>
<View style={styles.bg} /> <View style={styles.bg} />
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
<Animated.View style={[styles.wrapper, wrapperAnimStyle]}> <Animated.View
style={[
styles.wrapper,
{bottom: insets.bottom + 55},
wrapperAnimStyle,
]}>
<SafeAreaView> <SafeAreaView>
<View style={[styles.topSection]}> <View style={[styles.topSection]}>
<TouchableOpacity <TouchableOpacity
@ -251,7 +258,6 @@ const styles = StyleSheet.create({
wrapper: { wrapper: {
position: 'absolute', position: 'absolute',
top: 0, top: 0,
bottom: 75,
width: '100%', width: '100%',
backgroundColor: '#fff', backgroundColor: '#fff',
}, },

View File

@ -220,7 +220,7 @@ export const MobileShell: React.FC = observer(() => {
</ScreenContainer> </ScreenContainer>
</GestureDetector> </GestureDetector>
</SafeAreaView> </SafeAreaView>
<View style={styles.bottomBar}> <SafeAreaView style={styles.bottomBar}>
<Btn icon="house" onPress={onPressHome} /> <Btn icon="house" onPress={onPressHome} />
<Btn icon="search" onPress={onPressSearch} /> <Btn icon="search" onPress={onPressSearch} />
<Btn icon="menu" onPress={onPressMenu} /> <Btn icon="menu" onPress={onPressMenu} />
@ -230,7 +230,7 @@ export const MobileShell: React.FC = observer(() => {
notificationCount={store.me.notificationCount} notificationCount={store.me.notificationCount}
/> />
<Btn icon={['far', 'clone']} onPress={onPressTabs} /> <Btn icon={['far', 'clone']} onPress={onPressTabs} />
</View> </SafeAreaView>
<MainMenu <MainMenu
active={isMainMenuActive} active={isMainMenuActive}
onClose={() => setMainMenuActive(false)} onClose={() => setMainMenuActive(false)}
@ -373,7 +373,6 @@ const styles = StyleSheet.create({
borderTopColor: colors.gray2, borderTopColor: colors.gray2,
paddingLeft: 5, paddingLeft: 5,
paddingRight: 15, paddingRight: 15,
paddingBottom: 20,
}, },
ctrl: { ctrl: {
flex: 1, flex: 1,

View File

@ -10233,10 +10233,10 @@ react-native-root-toast@^3.4.0:
prop-types "^15.5.10" prop-types "^15.5.10"
react-native-root-siblings "^4.0.0" react-native-root-siblings "^4.0.0"
react-native-safe-area-context@^4.3.1: react-native-safe-area-context@^4.4.1:
version "4.3.4" version "4.4.1"
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.4.tgz#79060fcc02ef38d6fd7afdf87b2301b06bd99fe9" resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.4.1.tgz#239c60b8a9a80eac70a38a822b04c0f1d15ffc01"
integrity sha512-4dFZPDHRigZ+uw8HCmMLyC/IT1BG0B9QLvuwsBQAMDCRSrxISIYza9VIbsIn2FGvZiQ1gOoXBHDmy9WFihQsTg== integrity sha512-N9XTjiuD73ZpVlejHrUWIFZc+6Z14co1K/p1IFMkImU7+avD69F3y+lhkqA2hN/+vljdZrBSiOwXPkuo43nFQA==
react-native-screens@^3.13.1: react-native-screens@^3.13.1:
version "3.17.0" version "3.17.0"