Android fixes (#515)
* Fix profile screen performance on android and remove dead code * Correctly handle android hardware back btn * Fix EditProfile modal for android * Fix lintzio/stable
Paul Frazee
GitHub
parent
eb6b36be61
commit
d35f7c1f1a
|
|
@ -13,6 +13,7 @@ import {RootStoreModel, setupState, RootStoreProvider} from './state'
|
|||
import {Shell} from './view/shell'
|
||||
import * as notifee from 'lib/notifee'
|
||||
import * as analytics from 'lib/analytics'
|
||||
import * as backHandler from 'lib/routes/back-handler'
|
||||
import * as Toast from './view/com/util/Toast'
|
||||
import {handleLink} from './Navigation'
|
||||
|
||||
|
|
@ -28,6 +29,7 @@ const App = observer(() => {
|
|||
setRootStore(store)
|
||||
analytics.init(store)
|
||||
notifee.init(store)
|
||||
backHandler.init(store)
|
||||
SplashScreen.hideAsync()
|
||||
Linking.getInitialURL().then((url: string | null) => {
|
||||
if (url) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import {BackHandler} from 'react-native'
|
||||
import {RootStoreModel} from 'state/index'
|
||||
|
||||
export function onBack(cb: () => boolean): () => void {
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', cb)
|
||||
return () => subscription.remove()
|
||||
}
|
||||
|
||||
export function init(store: RootStoreModel) {
|
||||
onBack(() => store.shell.closeAnyActiveElement())
|
||||
}
|
||||
|
|
@ -194,6 +194,30 @@ export class ShellUiModel {
|
|||
this.minimalShellMode = v
|
||||
}
|
||||
|
||||
/**
|
||||
* returns true if something was closed
|
||||
* (used by the android hardware back btn)
|
||||
*/
|
||||
closeAnyActiveElement(): boolean {
|
||||
if (this.isLightboxActive) {
|
||||
this.closeLightbox()
|
||||
return true
|
||||
}
|
||||
if (this.isModalActive) {
|
||||
this.closeModal()
|
||||
return true
|
||||
}
|
||||
if (this.isComposerActive) {
|
||||
this.closeComposer()
|
||||
return true
|
||||
}
|
||||
if (this.isDrawerOpen) {
|
||||
this.closeDrawer()
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
openDrawer() {
|
||||
this.isDrawerOpen = true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import ImageView from './ImageViewing'
|
||||
import {useStores} from 'state/index'
|
||||
|
|
@ -48,6 +47,6 @@ export const Lightbox = observer(function Lightbox() {
|
|||
/>
|
||||
)
|
||||
} else {
|
||||
return <View />
|
||||
return null
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import React, {useState} from 'react'
|
||||
import React, {useState, useCallback} from 'react'
|
||||
import * as Toast from '../util/Toast'
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import LinearGradient from 'react-native-linear-gradient'
|
||||
import {ScrollView, TextInput} from './util'
|
||||
import {Image as RNImage} from 'react-native-image-crop-picker'
|
||||
import {Text} from '../util/text/Text'
|
||||
import {ErrorMessage} from '../util/error/ErrorMessage'
|
||||
|
|
@ -24,7 +26,7 @@ import {useTheme} from 'lib/ThemeContext'
|
|||
import {useAnalytics} from 'lib/analytics'
|
||||
import {cleanError, isNetworkError} from 'lib/strings/errors'
|
||||
|
||||
export const snapPoints = ['80%']
|
||||
export const snapPoints = ['fullscreen']
|
||||
|
||||
export function Component({
|
||||
profileView,
|
||||
|
|
@ -61,23 +63,26 @@ export function Component({
|
|||
const onPressCancel = () => {
|
||||
store.shell.closeModal()
|
||||
}
|
||||
const onSelectNewAvatar = async (img: RNImage | null) => {
|
||||
track('EditProfile:AvatarSelected')
|
||||
try {
|
||||
// if img is null, user selected "remove avatar"
|
||||
const onSelectNewAvatar = useCallback(
|
||||
async (img: RNImage | null) => {
|
||||
if (!img) {
|
||||
setNewUserAvatar(null)
|
||||
setUserAvatar(null)
|
||||
return
|
||||
}
|
||||
track('EditProfile:AvatarSelected')
|
||||
try {
|
||||
const finalImg = await compressIfNeeded(img, 1000000)
|
||||
setNewUserAvatar(finalImg)
|
||||
setUserAvatar(finalImg.path)
|
||||
} catch (e: any) {
|
||||
setError(cleanError(e))
|
||||
}
|
||||
}
|
||||
const onSelectNewBanner = async (img: RNImage | null) => {
|
||||
},
|
||||
[track, setNewUserAvatar, setUserAvatar, setError],
|
||||
)
|
||||
const onSelectNewBanner = useCallback(
|
||||
async (img: RNImage | null) => {
|
||||
if (!img) {
|
||||
setNewUserBanner(null)
|
||||
setUserBanner(null)
|
||||
|
|
@ -91,8 +96,10 @@ export function Component({
|
|||
} catch (e: any) {
|
||||
setError(cleanError(e))
|
||||
}
|
||||
}
|
||||
const onPressSave = async () => {
|
||||
},
|
||||
[track, setNewUserBanner, setUserBanner, setError],
|
||||
)
|
||||
const onPressSave = useCallback(async () => {
|
||||
track('EditProfile:Save')
|
||||
setProcessing(true)
|
||||
if (error) {
|
||||
|
|
@ -120,11 +127,23 @@ export function Component({
|
|||
}
|
||||
}
|
||||
setProcessing(false)
|
||||
}
|
||||
}, [
|
||||
track,
|
||||
setProcessing,
|
||||
setError,
|
||||
error,
|
||||
profileView,
|
||||
onUpdate,
|
||||
store,
|
||||
displayName,
|
||||
description,
|
||||
newUserAvatar,
|
||||
newUserBanner,
|
||||
])
|
||||
|
||||
return (
|
||||
<View style={[s.flex1, pal.view]} testID="editProfileModal">
|
||||
<ScrollView style={styles.inner}>
|
||||
<KeyboardAvoidingView behavior="height">
|
||||
<ScrollView style={[pal.view]} testID="editProfileModal">
|
||||
<Text style={[styles.title, pal.text]}>Edit my profile</Text>
|
||||
<View style={styles.photos}>
|
||||
<UserBanner
|
||||
|
|
@ -144,6 +163,7 @@ export function Component({
|
|||
<ErrorMessage message={error} />
|
||||
</View>
|
||||
)}
|
||||
<View style={styles.form}>
|
||||
<View>
|
||||
<Text style={[styles.label, pal.text]}>Display Name</Text>
|
||||
<TextInput
|
||||
|
|
@ -152,7 +172,9 @@ export function Component({
|
|||
placeholder="e.g. Alice Roberts"
|
||||
placeholderTextColor={colors.gray4}
|
||||
value={displayName}
|
||||
onChangeText={v => setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))}
|
||||
onChangeText={v =>
|
||||
setDisplayName(enforceLen(v, MAX_DISPLAY_NAME))
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View style={s.pb10}>
|
||||
|
|
@ -194,15 +216,13 @@ export function Component({
|
|||
<Text style={[s.black, s.bold, pal.text]}>Cancel</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
inner: {
|
||||
padding: 14,
|
||||
},
|
||||
title: {
|
||||
textAlign: 'center',
|
||||
fontWeight: 'bold',
|
||||
|
|
@ -215,6 +235,9 @@ const styles = StyleSheet.create({
|
|||
paddingBottom: 4,
|
||||
marginTop: 20,
|
||||
},
|
||||
form: {
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
textInput: {
|
||||
borderWidth: 1,
|
||||
borderRadius: 6,
|
||||
|
|
@ -243,7 +266,7 @@ const styles = StyleSheet.create({
|
|||
avi: {
|
||||
position: 'absolute',
|
||||
top: 80,
|
||||
left: 10,
|
||||
left: 24,
|
||||
width: 84,
|
||||
height: 84,
|
||||
borderWidth: 2,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, {useRef, useEffect} from 'react'
|
||||
import {StyleSheet} from 'react-native'
|
||||
import {SafeAreaView} from 'react-native-safe-area-context'
|
||||
import {observer} from 'mobx-react-lite'
|
||||
import BottomSheet from '@gorhom/bottom-sheet'
|
||||
import {useStores} from 'state/index'
|
||||
|
|
@ -92,13 +93,22 @@ export const ModalsContainer = observer(function ModalsContainer() {
|
|||
return null
|
||||
}
|
||||
|
||||
if (snapPoints[0] === 'fullscreen') {
|
||||
return (
|
||||
<SafeAreaView style={[styles.fullscreenContainer, pal.view]}>
|
||||
{element}
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<BottomSheet
|
||||
ref={bottomSheetRef}
|
||||
snapPoints={snapPoints}
|
||||
index={store.shell.isModalActive ? 0 : -1}
|
||||
enablePanDownToClose
|
||||
keyboardBehavior="fillParent"
|
||||
keyboardBehavior="extend"
|
||||
keyboardBlurBehavior="restore"
|
||||
backdropComponent={
|
||||
store.shell.isModalActive ? createCustomBackdrop(onClose) : undefined
|
||||
}
|
||||
|
|
@ -115,4 +125,11 @@ const styles = StyleSheet.create({
|
|||
borderTopLeftRadius: 10,
|
||||
borderTopRightRadius: 10,
|
||||
},
|
||||
fullscreenContainer: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -128,7 +128,7 @@ const styles = StyleSheet.create({
|
|||
width: 24,
|
||||
height: 24,
|
||||
bottom: 8,
|
||||
right: 8,
|
||||
right: 24,
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import React, {useEffect, useState} from 'react'
|
||||
import {View} from 'react-native'
|
||||
import {Selector} from './Selector'
|
||||
import {HorzSwipe} from './gestures/HorzSwipe'
|
||||
import {Pressable, StyleSheet, View} from 'react-native'
|
||||
import {FlatList} from './Views'
|
||||
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
|
||||
import {OnScrollCb} from 'lib/hooks/useOnMainScroll'
|
||||
import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
|
||||
import {Text} from './text/Text'
|
||||
import {usePalette} from 'lib/hooks/usePalette'
|
||||
import {clamp} from 'lib/numbers'
|
||||
import {s} from 'lib/styles'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {isAndroid} from 'platform/detection'
|
||||
|
||||
const HEADER_ITEM = {_reactKey: '__header__'}
|
||||
const SELECTOR_ITEM = {_reactKey: '__selector__'}
|
||||
|
|
@ -16,7 +17,6 @@ export function ViewSelector({
|
|||
sections,
|
||||
items,
|
||||
refreshing,
|
||||
swipeEnabled,
|
||||
renderHeader,
|
||||
renderItem,
|
||||
ListFooterComponent,
|
||||
|
|
@ -42,19 +42,12 @@ export function ViewSelector({
|
|||
onEndReached?: (info: {distanceFromEnd: number}) => void
|
||||
}) {
|
||||
const [selectedIndex, setSelectedIndex] = useState<number>(0)
|
||||
const panX = useAnimatedValue(0)
|
||||
|
||||
// events
|
||||
// =
|
||||
|
||||
const onSwipeEnd = React.useCallback(
|
||||
(dx: number) => {
|
||||
if (dx !== 0) {
|
||||
setSelectedIndex(clamp(selectedIndex + dx, 0, sections.length))
|
||||
}
|
||||
},
|
||||
[setSelectedIndex, selectedIndex, sections],
|
||||
)
|
||||
const keyExtractor = React.useCallback(item => item._reactKey, [])
|
||||
|
||||
const onPressSelection = React.useCallback(
|
||||
(index: number) => setSelectedIndex(clamp(index, 0, sections.length)),
|
||||
[setSelectedIndex, sections],
|
||||
|
|
@ -77,7 +70,6 @@ export function ViewSelector({
|
|||
return (
|
||||
<Selector
|
||||
items={sections}
|
||||
panX={panX}
|
||||
selectedIndex={selectedIndex}
|
||||
onSelect={onPressSelection}
|
||||
/>
|
||||
|
|
@ -86,7 +78,7 @@ export function ViewSelector({
|
|||
return renderItem(item)
|
||||
}
|
||||
},
|
||||
[sections, panX, selectedIndex, onPressSelection, renderHeader, renderItem],
|
||||
[sections, selectedIndex, onPressSelection, renderHeader, renderItem],
|
||||
)
|
||||
|
||||
const data = React.useMemo(
|
||||
|
|
@ -94,19 +86,13 @@ export function ViewSelector({
|
|||
[items],
|
||||
)
|
||||
return (
|
||||
<HorzSwipe
|
||||
hasPriority
|
||||
panX={panX}
|
||||
swipeEnabled={swipeEnabled || false}
|
||||
canSwipeLeft={selectedIndex > 0}
|
||||
canSwipeRight={selectedIndex < sections.length - 1}
|
||||
onSwipeEnd={onSwipeEnd}>
|
||||
<FlatList
|
||||
data={data}
|
||||
keyExtractor={item => item._reactKey}
|
||||
keyExtractor={keyExtractor}
|
||||
renderItem={renderItemInternal}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
stickyHeaderIndices={STICKY_HEADER_INDICES}
|
||||
// NOTE sticky header disabled on android due to major performance issues -prf
|
||||
stickyHeaderIndices={isAndroid ? undefined : STICKY_HEADER_INDICES}
|
||||
refreshing={refreshing}
|
||||
onScroll={onScroll}
|
||||
onRefresh={onRefresh}
|
||||
|
|
@ -116,6 +102,82 @@ export function ViewSelector({
|
|||
removeClippedSubviews={true}
|
||||
scrollIndicatorInsets={{right: 1}} // fixes a bug where the scroll indicator is on the middle of the screen https://github.com/bluesky-social/social-app/pull/464
|
||||
/>
|
||||
</HorzSwipe>
|
||||
)
|
||||
}
|
||||
|
||||
export function Selector({
|
||||
selectedIndex,
|
||||
items,
|
||||
onSelect,
|
||||
}: {
|
||||
selectedIndex: number
|
||||
items: string[]
|
||||
onSelect?: (index: number) => void
|
||||
}) {
|
||||
const pal = usePalette('default')
|
||||
const borderColor = useColorSchemeStyle(
|
||||
{borderColor: colors.black},
|
||||
{borderColor: colors.white},
|
||||
)
|
||||
|
||||
const onPressItem = (index: number) => {
|
||||
onSelect?.(index)
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={[pal.view, styles.outer]}>
|
||||
{items.map((item, i) => {
|
||||
const selected = i === selectedIndex
|
||||
return (
|
||||
<Pressable
|
||||
testID={`selector-${i}`}
|
||||
key={item}
|
||||
onPress={() => onPressItem(i)}>
|
||||
<View
|
||||
style={[
|
||||
styles.item,
|
||||
selected && styles.itemSelected,
|
||||
borderColor,
|
||||
]}>
|
||||
<Text
|
||||
style={
|
||||
selected
|
||||
? [styles.labelSelected, pal.text]
|
||||
: [styles.label, pal.textLight]
|
||||
}>
|
||||
{item}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
)
|
||||
})}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
outer: {
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
item: {
|
||||
marginRight: 14,
|
||||
paddingHorizontal: 10,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
itemSelected: {
|
||||
borderBottomWidth: 3,
|
||||
},
|
||||
label: {
|
||||
fontWeight: '600',
|
||||
},
|
||||
labelSelected: {
|
||||
fontWeight: '600',
|
||||
},
|
||||
underline: {
|
||||
position: 'absolute',
|
||||
height: 4,
|
||||
bottom: 0,
|
||||
},
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,157 +0,0 @@
|
|||
import React, {useState} from 'react'
|
||||
import {
|
||||
Animated,
|
||||
GestureResponderEvent,
|
||||
I18nManager,
|
||||
PanResponder,
|
||||
PanResponderGestureState,
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {clamp} from 'lodash'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
interface Props {
|
||||
panX: Animated.Value
|
||||
canSwipeLeft?: boolean
|
||||
canSwipeRight?: boolean
|
||||
swipeEnabled?: boolean
|
||||
hasPriority?: boolean // if has priority, will not release control of the gesture to another gesture
|
||||
distThresholdDivisor?: number
|
||||
useNativeDriver?: boolean
|
||||
onSwipeStart?: () => void
|
||||
onSwipeStartDirection?: (dx: number) => void
|
||||
onSwipeEnd?: (dx: number) => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function HorzSwipe({
|
||||
panX,
|
||||
canSwipeLeft = false,
|
||||
canSwipeRight = false,
|
||||
swipeEnabled = true,
|
||||
hasPriority = false,
|
||||
distThresholdDivisor = 1.75,
|
||||
useNativeDriver = false,
|
||||
onSwipeStart,
|
||||
onSwipeStartDirection,
|
||||
onSwipeEnd,
|
||||
children,
|
||||
}: Props) {
|
||||
const winDim = useWindowDimensions()
|
||||
const [dir, setDir] = useState<number>(0)
|
||||
|
||||
const swipeVelocityThreshold = 35
|
||||
const swipeDistanceThreshold = winDim.width / distThresholdDivisor
|
||||
|
||||
const isMovingHorizontally = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
return (
|
||||
Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 1.25) &&
|
||||
Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 1.25)
|
||||
)
|
||||
}
|
||||
|
||||
const canMoveScreen = (
|
||||
event: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
if (swipeEnabled === false) {
|
||||
return false
|
||||
}
|
||||
|
||||
const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
|
||||
const willHandle =
|
||||
isMovingHorizontally(event, gestureState) &&
|
||||
((diffX > 0 && canSwipeLeft) || (diffX < 0 && canSwipeRight))
|
||||
return willHandle
|
||||
}
|
||||
|
||||
const startGesture = () => {
|
||||
setDir(0)
|
||||
onSwipeStart?.()
|
||||
|
||||
panX.stopAnimation()
|
||||
// @ts-expect-error: _value is private, but docs use it as well
|
||||
panX.setOffset(panX._value)
|
||||
}
|
||||
|
||||
const respondToGesture = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
const diffX = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
|
||||
|
||||
if (
|
||||
// swiping left
|
||||
(diffX > 0 && !canSwipeLeft) ||
|
||||
// swiping right
|
||||
(diffX < 0 && !canSwipeRight)
|
||||
) {
|
||||
panX.setValue(0)
|
||||
return
|
||||
}
|
||||
|
||||
panX.setValue(clamp(diffX / swipeDistanceThreshold, -1, 1) * -1)
|
||||
|
||||
const newDir = diffX > 0 ? -1 : diffX < 0 ? 1 : 0
|
||||
if (newDir !== dir) {
|
||||
setDir(newDir)
|
||||
onSwipeStartDirection?.(newDir)
|
||||
}
|
||||
}
|
||||
|
||||
const finishGesture = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
if (
|
||||
Math.abs(gestureState.dx) > Math.abs(gestureState.dy) &&
|
||||
Math.abs(gestureState.vx) > Math.abs(gestureState.vy) &&
|
||||
(Math.abs(gestureState.dx) > swipeDistanceThreshold / 4 ||
|
||||
Math.abs(gestureState.vx) > swipeVelocityThreshold)
|
||||
) {
|
||||
const final = Math.floor(
|
||||
(gestureState.dx / Math.abs(gestureState.dx)) * -1,
|
||||
)
|
||||
Animated.timing(panX, {
|
||||
toValue: final,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
isInteraction: false,
|
||||
}).start(() => {
|
||||
onSwipeEnd?.(final)
|
||||
panX.flattenOffset()
|
||||
panX.setValue(0)
|
||||
})
|
||||
} else {
|
||||
onSwipeEnd?.(0)
|
||||
Animated.timing(panX, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
isInteraction: false,
|
||||
}).start(() => {
|
||||
panX.flattenOffset()
|
||||
panX.setValue(0)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const panResponder = PanResponder.create({
|
||||
onMoveShouldSetPanResponder: canMoveScreen,
|
||||
onPanResponderGrant: startGesture,
|
||||
onPanResponderMove: respondToGesture,
|
||||
onPanResponderTerminate: finishGesture,
|
||||
onPanResponderRelease: finishGesture,
|
||||
onPanResponderTerminationRequest: () => !hasPriority,
|
||||
})
|
||||
|
||||
return (
|
||||
<View {...panResponder.panHandlers} style={s.h100pct}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,302 +0,0 @@
|
|||
import React, {useState} from 'react'
|
||||
import {
|
||||
Animated,
|
||||
GestureResponderEvent,
|
||||
I18nManager,
|
||||
PanResponder,
|
||||
PanResponderGestureState,
|
||||
useWindowDimensions,
|
||||
View,
|
||||
} from 'react-native'
|
||||
import {clamp} from 'lodash'
|
||||
import {s} from 'lib/styles'
|
||||
|
||||
export enum Dir {
|
||||
None,
|
||||
Up,
|
||||
Down,
|
||||
Left,
|
||||
Right,
|
||||
Zoom,
|
||||
}
|
||||
|
||||
interface Props {
|
||||
panX: Animated.Value
|
||||
panY: Animated.Value
|
||||
zoom: Animated.Value
|
||||
canSwipeLeft?: boolean
|
||||
canSwipeRight?: boolean
|
||||
canSwipeUp?: boolean
|
||||
canSwipeDown?: boolean
|
||||
swipeEnabled?: boolean
|
||||
zoomEnabled?: boolean
|
||||
hasPriority?: boolean // if has priority, will not release control of the gesture to another gesture
|
||||
horzDistThresholdDivisor?: number
|
||||
vertDistThresholdDivisor?: number
|
||||
useNativeDriver?: boolean
|
||||
onSwipeStart?: () => void
|
||||
onSwipeStartDirection?: (dir: Dir) => void
|
||||
onSwipeEnd?: (dir: Dir) => void
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export function SwipeAndZoom({
|
||||
panX,
|
||||
panY,
|
||||
zoom,
|
||||
canSwipeLeft = false,
|
||||
canSwipeRight = false,
|
||||
canSwipeUp = false,
|
||||
canSwipeDown = false,
|
||||
swipeEnabled = false,
|
||||
zoomEnabled = false,
|
||||
hasPriority = false,
|
||||
horzDistThresholdDivisor = 1.75,
|
||||
vertDistThresholdDivisor = 1.75,
|
||||
useNativeDriver = false,
|
||||
onSwipeStart,
|
||||
onSwipeStartDirection,
|
||||
onSwipeEnd,
|
||||
children,
|
||||
}: Props) {
|
||||
const winDim = useWindowDimensions()
|
||||
const [dir, setDir] = useState<Dir>(Dir.None)
|
||||
const [initialDistance, setInitialDistance] = useState<number | undefined>(
|
||||
undefined,
|
||||
)
|
||||
|
||||
const swipeVelocityThreshold = 35
|
||||
const swipeHorzDistanceThreshold = winDim.width / horzDistThresholdDivisor
|
||||
const swipeVertDistanceThreshold = winDim.height / vertDistThresholdDivisor
|
||||
|
||||
const isMovingHorizontally = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
return (
|
||||
Math.abs(gestureState.dx) > Math.abs(gestureState.dy * 1.25) &&
|
||||
Math.abs(gestureState.vx) > Math.abs(gestureState.vy * 1.25)
|
||||
)
|
||||
}
|
||||
const isMovingVertically = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
return (
|
||||
Math.abs(gestureState.dy) > Math.abs(gestureState.dx * 1.25) &&
|
||||
Math.abs(gestureState.vy) > Math.abs(gestureState.vx * 1.25)
|
||||
)
|
||||
}
|
||||
|
||||
const canDir = (d: Dir) => {
|
||||
if (d === Dir.Left) {
|
||||
return canSwipeLeft
|
||||
}
|
||||
if (d === Dir.Right) {
|
||||
return canSwipeRight
|
||||
}
|
||||
if (d === Dir.Up) {
|
||||
return canSwipeUp
|
||||
}
|
||||
if (d === Dir.Down) {
|
||||
return canSwipeDown
|
||||
}
|
||||
if (d === Dir.Zoom) {
|
||||
return zoomEnabled
|
||||
}
|
||||
return false
|
||||
}
|
||||
const isHorz = (d: Dir) => d === Dir.Left || d === Dir.Right
|
||||
const isVert = (d: Dir) => d === Dir.Up || d === Dir.Down
|
||||
|
||||
const canMoveScreen = (
|
||||
event: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
if (zoomEnabled && gestureState.numberActiveTouches === 2) {
|
||||
return true
|
||||
} else if (swipeEnabled && gestureState.numberActiveTouches === 1) {
|
||||
const dx = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
|
||||
const dy = gestureState.dy
|
||||
const willHandle =
|
||||
(isMovingHorizontally(event, gestureState) &&
|
||||
((dx > 0 && canSwipeLeft) || (dx < 0 && canSwipeRight))) ||
|
||||
(isMovingVertically(event, gestureState) &&
|
||||
((dy > 0 && canSwipeUp) || (dy < 0 && canSwipeDown)))
|
||||
return willHandle
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const startGesture = () => {
|
||||
setDir(Dir.None)
|
||||
onSwipeStart?.()
|
||||
|
||||
// reset all state
|
||||
panX.stopAnimation()
|
||||
// @ts-expect-error: _value is private, but docs use it as well
|
||||
panX.setOffset(panX._value)
|
||||
panY.stopAnimation()
|
||||
// @ts-expect-error: _value is private, but docs use it as well
|
||||
panY.setOffset(panY._value)
|
||||
zoom.stopAnimation()
|
||||
// @ts-expect-error: _value is private, but docs use it as well
|
||||
zoom.setOffset(zoom._value)
|
||||
setInitialDistance(undefined)
|
||||
}
|
||||
|
||||
const respondToGesture = (
|
||||
e: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
const dx = I18nManager.isRTL ? -gestureState.dx : gestureState.dx
|
||||
const dy = gestureState.dy
|
||||
|
||||
let newDir = Dir.None
|
||||
if (dir === Dir.None) {
|
||||
// establish if the user is swiping horz or vert, or zooming
|
||||
if (gestureState.numberActiveTouches === 2) {
|
||||
newDir = Dir.Zoom
|
||||
} else if (Math.abs(dx) > Math.abs(dy)) {
|
||||
newDir = dx > 0 ? Dir.Left : Dir.Right
|
||||
} else {
|
||||
newDir = dy > 0 ? Dir.Up : Dir.Down
|
||||
}
|
||||
} else if (isHorz(dir)) {
|
||||
// direction update
|
||||
newDir = dx > 0 ? Dir.Left : Dir.Right
|
||||
} else if (isVert(dir)) {
|
||||
// direction update
|
||||
newDir = dy > 0 ? Dir.Up : Dir.Down
|
||||
} else {
|
||||
newDir = dir
|
||||
}
|
||||
|
||||
if (newDir === Dir.Zoom) {
|
||||
if (zoomEnabled) {
|
||||
if (gestureState.numberActiveTouches === 2) {
|
||||
// zoom in/out
|
||||
const x0 = e.nativeEvent.touches[0].pageX
|
||||
const x1 = e.nativeEvent.touches[1].pageX
|
||||
const y0 = e.nativeEvent.touches[0].pageY
|
||||
const y1 = e.nativeEvent.touches[1].pageY
|
||||
const zoomDx = Math.abs(x0 - x1)
|
||||
const zoomDy = Math.abs(y0 - y1)
|
||||
const dist = Math.sqrt(zoomDx * zoomDx + zoomDy * zoomDy) / 100
|
||||
if (
|
||||
typeof initialDistance === 'undefined' ||
|
||||
dist - initialDistance < 0
|
||||
) {
|
||||
setInitialDistance(dist)
|
||||
} else {
|
||||
zoom.setValue(dist - initialDistance)
|
||||
}
|
||||
} else {
|
||||
// pan around after zooming
|
||||
panX.setValue(clamp(dx / winDim.width, -1, 1) * -1)
|
||||
panY.setValue(clamp(dy / winDim.height, -1, 1) * -1)
|
||||
}
|
||||
}
|
||||
} else if (isHorz(newDir)) {
|
||||
// swipe left/right
|
||||
panX.setValue(
|
||||
clamp(
|
||||
dx / swipeHorzDistanceThreshold,
|
||||
canSwipeRight ? -1 : 0,
|
||||
canSwipeLeft ? 1 : 0,
|
||||
) * -1,
|
||||
)
|
||||
panY.setValue(0)
|
||||
} else if (isVert(newDir)) {
|
||||
// swipe up/down
|
||||
panY.setValue(
|
||||
clamp(
|
||||
dy / swipeVertDistanceThreshold,
|
||||
canSwipeDown ? -1 : 0,
|
||||
canSwipeUp ? 1 : 0,
|
||||
) * -1,
|
||||
)
|
||||
panX.setValue(0)
|
||||
}
|
||||
|
||||
if (!canDir(newDir)) {
|
||||
newDir = Dir.None
|
||||
}
|
||||
if (newDir !== dir) {
|
||||
setDir(newDir)
|
||||
onSwipeStartDirection?.(newDir)
|
||||
}
|
||||
}
|
||||
|
||||
const finishGesture = (
|
||||
_: GestureResponderEvent,
|
||||
gestureState: PanResponderGestureState,
|
||||
) => {
|
||||
const finish = (finalDir: Dir) => () => {
|
||||
if (finalDir !== Dir.None) {
|
||||
onSwipeEnd?.(finalDir)
|
||||
}
|
||||
setDir(Dir.None)
|
||||
panX.flattenOffset()
|
||||
panX.setValue(0)
|
||||
panY.flattenOffset()
|
||||
panY.setValue(0)
|
||||
}
|
||||
if (
|
||||
isHorz(dir) &&
|
||||
(Math.abs(gestureState.dx) > swipeHorzDistanceThreshold / 4 ||
|
||||
Math.abs(gestureState.vx) > swipeVelocityThreshold)
|
||||
) {
|
||||
// horizontal swipe reset
|
||||
Animated.timing(panX, {
|
||||
toValue: dir === Dir.Left ? -1 : 1,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
}).start(finish(dir))
|
||||
} else if (
|
||||
isVert(dir) &&
|
||||
(Math.abs(gestureState.dy) > swipeVertDistanceThreshold / 8 ||
|
||||
Math.abs(gestureState.vy) > swipeVelocityThreshold)
|
||||
) {
|
||||
// vertical swipe reset
|
||||
Animated.timing(panY, {
|
||||
toValue: dir === Dir.Up ? -1 : 1,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
}).start(finish(dir))
|
||||
} else {
|
||||
// zoom (or no direction) reset
|
||||
onSwipeEnd?.(Dir.None)
|
||||
Animated.timing(panX, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
}).start()
|
||||
Animated.timing(panY, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
}).start()
|
||||
Animated.timing(zoom, {
|
||||
toValue: 0,
|
||||
duration: 100,
|
||||
useNativeDriver,
|
||||
}).start()
|
||||
}
|
||||
}
|
||||
|
||||
const panResponder = PanResponder.create({
|
||||
onMoveShouldSetPanResponder: canMoveScreen,
|
||||
onPanResponderGrant: startGesture,
|
||||
onPanResponderMove: respondToGesture,
|
||||
onPanResponderTerminate: finishGesture,
|
||||
onPanResponderRelease: finishGesture,
|
||||
onPanResponderTerminationRequest: () => !hasPriority,
|
||||
})
|
||||
|
||||
return (
|
||||
<View {...panResponder.panHandlers} style={s.h100pct}>
|
||||
{children}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
|
@ -18,7 +18,6 @@ import {EmptyState} from '../com/util/EmptyState'
|
|||
import {Text} from '../com/util/text/Text'
|
||||
import {FAB} from '../com/util/fab/FAB'
|
||||
import {s, colors} from 'lib/styles'
|
||||
import {useOnMainScroll} from 'lib/hooks/useOnMainScroll'
|
||||
import {useAnalytics} from 'lib/analytics'
|
||||
import {ComposeIcon2} from 'lib/icons'
|
||||
|
||||
|
|
@ -32,7 +31,6 @@ export const ProfileScreen = withAuthRequired(
|
|||
screen('Profile')
|
||||
}, [screen])
|
||||
|
||||
const onMainScroll = useOnMainScroll(store)
|
||||
const [hasSetup, setHasSetup] = useState<boolean>(false)
|
||||
const uiState = React.useMemo(
|
||||
() => new ProfileUiModel(store, {user: route.params.name}),
|
||||
|
|
@ -68,9 +66,12 @@ export const ProfileScreen = withAuthRequired(
|
|||
track('ProfileScreen:PressCompose')
|
||||
store.shell.openComposer({})
|
||||
}, [store, track])
|
||||
const onSelectView = (index: number) => {
|
||||
const onSelectView = React.useCallback(
|
||||
(index: number) => {
|
||||
uiState.setSelectedViewIndex(index)
|
||||
}
|
||||
},
|
||||
[uiState],
|
||||
)
|
||||
const onRefresh = React.useCallback(() => {
|
||||
uiState
|
||||
.refresh()
|
||||
|
|
@ -158,7 +159,6 @@ export const ProfileScreen = withAuthRequired(
|
|||
ListFooterComponent={Footer}
|
||||
refreshing={uiState.isRefreshing || false}
|
||||
onSelectView={onSelectView}
|
||||
onScroll={onMainScroll}
|
||||
onRefresh={onRefresh}
|
||||
onEndReached={onEndReached}
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue