acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Eric Bailey
2023-12-14 14:37:38 -06:00
parent f7f653c948
commit 1276de9230
4 changed files with 65 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.native.tsx
+25 -19
View File
@@ -6,6 +6,10 @@ import {RootSiblingParent} from 'react-native-root-siblings'
import * as SplashScreen from 'expo-splash-screen' import * as SplashScreen from 'expo-splash-screen'
import {GestureHandlerRootView} from 'react-native-gesture-handler' import {GestureHandlerRootView} from 'react-native-gesture-handler'
import {QueryClientProvider} from '@tanstack/react-query' import {QueryClientProvider} from '@tanstack/react-query'
import {
SafeAreaProvider,
initialWindowMetrics,
} from 'react-native-safe-area-context'
import 'view/icons' import 'view/icons'
@@ -55,25 +59,27 @@ function InnerApp() {
}, [resumeSession]) }, [resumeSession])
return ( return (
<Splash isReady={!isInitialLoad}> <SafeAreaProvider initialMetrics={initialWindowMetrics}>
<React.Fragment <Splash isReady={!isInitialLoad}>
// Resets the entire tree below when it changes: <React.Fragment
key={currentAccount?.did}> // Resets the entire tree below when it changes:
<LoggedOutViewProvider> key={currentAccount?.did}>
<UnreadNotifsProvider> <LoggedOutViewProvider>
<ThemeProvider theme={colorMode}> <UnreadNotifsProvider>
{/* All components should be within this provider */} <ThemeProvider theme={colorMode}>
<RootSiblingParent> {/* All components should be within this provider */}
<GestureHandlerRootView style={s.h100pct}> <RootSiblingParent>
<TestCtrls /> <GestureHandlerRootView style={s.h100pct}>
<Shell /> <TestCtrls />
</GestureHandlerRootView> <Shell />
</RootSiblingParent> </GestureHandlerRootView>
</ThemeProvider> </RootSiblingParent>
</UnreadNotifsProvider> </ThemeProvider>
</LoggedOutViewProvider> </UnreadNotifsProvider>
</React.Fragment> </LoggedOutViewProvider>
</Splash> </React.Fragment>
</Splash>
</SafeAreaProvider>
) )
} }
src/Splash.tsx
+31 -10
View File
@@ -11,7 +11,26 @@ import Animated, {
Easing, Easing,
} from 'react-native-reanimated' } from 'react-native-reanimated'
import MaskedView from '@react-native-masked-view/masked-view' import MaskedView from '@react-native-masked-view/masked-view'
import {Logo} from '#/view/icons/Logo' import {useSafeAreaInsets} from 'react-native-safe-area-context'
import Svg, {Path, SvgProps} from 'react-native-svg'
export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
const width = 1000
const height = width * (67 / 64)
return (
<Svg
fill="none"
// @ts-ignore it's fiiiiine
ref={ref}
viewBox="0 0 64 66"
style={{width, height}}>
<Path
fill="#fff"
d="M13.873 3.77C21.21 9.243 29.103 20.342 32 26.3v15.732c0-.335-.13.043-.41.858-1.512 4.414-7.418 21.642-20.923 7.87-7.111-7.252-3.819-14.503 9.125-16.692-7.405 1.252-15.73-.817-18.014-8.93C1.12 22.804 0 8.431 0 6.488 0-3.237 8.579-.18 13.873 3.77ZM50.127 3.77C42.79 9.243 34.897 20.342 32 26.3v15.732c0-.335.13.043.41.858 1.512 4.414 7.418 21.642 20.923 7.87 7.111-7.252 3.819-14.503-9.125-16.692 7.405 1.252 15.73-.817 18.014-8.93C62.88 22.804 64 8.431 64 6.488 64-3.237 55.422-.18 50.127 3.77Z"
/>
</Svg>
)
})
type Props = { type Props = {
isReady: boolean isReady: boolean
@@ -22,6 +41,7 @@ SplashScreen.preventAutoHideAsync().catch(() => {})
const AnimatedLogo = Animated.createAnimatedComponent(Logo) const AnimatedLogo = Animated.createAnimatedComponent(Logo)
export function Splash(props: React.PropsWithChildren<Props>) { export function Splash(props: React.PropsWithChildren<Props>) {
const insets = useSafeAreaInsets()
const intro = useSharedValue(0) const intro = useSharedValue(0)
const outroLogo = useSharedValue(0) const outroLogo = useSharedValue(0)
const outroApp = useSharedValue(0) const outroApp = useSharedValue(0)
@@ -36,7 +56,7 @@ export function Splash(props: React.PropsWithChildren<Props>) {
{ {
scale: interpolate( scale: interpolate(
outroLogo.value, outroLogo.value,
[0, 0.08, 0.1, 1], [0, 0.06, 0.08, 1],
[1, 0.8, 0.8, 800], [1, 0.8, 0.8, 800],
'clamp', 'clamp',
), ),
@@ -65,24 +85,24 @@ export function Splash(props: React.PropsWithChildren<Props>) {
const onFinish = useCallback(() => setIsAnimationComplete(true), []) const onFinish = useCallback(() => setIsAnimationComplete(true), [])
useEffect(() => { useEffect(() => {
// hide on mount
SplashScreen.hideAsync().catch(() => {})
if (props.isReady) { if (props.isReady) {
// hide on mount
SplashScreen.hideAsync().catch(() => {})
intro.value = withTiming( intro.value = withTiming(
1, 1,
{duration: 200, easing: Easing.out(Easing.cubic)}, {duration: 200, easing: Easing.out(Easing.cubic)},
async () => { async () => {
outroLogo.value = withTiming( outroLogo.value = withTiming(
1, 1,
{duration: 1000, easing: Easing.in(Easing.cubic)}, {duration: 1200, easing: Easing.in(Easing.cubic)},
() => { () => {
runOnJS(onFinish)() runOnJS(onFinish)()
}, },
) )
outroApp.value = withTiming( outroApp.value = withTiming(
1, 1,
{duration: 1000, easing: Easing.inOut(Easing.cubic)}, {duration: 1200, easing: Easing.inOut(Easing.cubic)},
() => { () => {
runOnJS(onFinish)() runOnJS(onFinish)()
}, },
@@ -102,20 +122,21 @@ export function Splash(props: React.PropsWithChildren<Props>) {
)} )}
<MaskedView <MaskedView
style={{flex: 1}} style={[StyleSheet.absoluteFillObject]}
maskElement={ maskElement={
<Animated.View <Animated.View
style={[ style={[
StyleSheet.absoluteFillObject,
{ {
// Transparent background because mask is based off alpha channel. // Transparent background because mask is based off alpha channel.
backgroundColor: 'transparent', backgroundColor: 'transparent',
flex: 1, flex: 1,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
transform: [{scale: 0.1}], // scale from 1000px to 100px transform: [{translateY: -(insets.top / 2)}, {scale: 0.1}], // scale from 1000px to 100px
}, },
]}> ]}>
<AnimatedLogo width={1000} style={[logoAnimations]} /> <AnimatedLogo style={[logoAnimations]} />
</Animated.View> </Animated.View>
}> }>
{!isAnimationComplete && ( {!isAnimationComplete && (
src/view/icons/Logo.tsx
+3 -3
View File
@@ -10,7 +10,7 @@ import Svg, {
import {colors} from '#/lib/styles' import {colors} from '#/lib/styles'
const ratio = 106 / 120 const ratio = 57 / 64
type Props = { type Props = {
fill?: PathProps['fill'] fill?: PathProps['fill']
@@ -27,7 +27,7 @@ export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
fill="none" fill="none"
// @ts-ignore it's fiiiiine // @ts-ignore it's fiiiiine
ref={ref} ref={ref}
viewBox="0 0 64 64" viewBox="0 0 64 57"
{...rest} {...rest}
style={{width: size, height: size * ratio}}> style={{width: size, height: size * ratio}}>
{gradient && ( {gradient && (
@@ -41,7 +41,7 @@ export const Logo = React.forwardRef(function LogoImpl(props: Props, ref) {
<Path <Path
fill={_fill} fill={_fill}
d="M13.873 4.308C21.21 10.564 29.103 23.25 32 30.057c2.898-6.807 10.79-19.493 18.127-25.75C55.421-.205 64-3.698 64 7.416c0 2.22-1.12 18.647-1.778 21.314-2.284 9.272-10.609 11.637-18.014 10.206 12.944 2.502 16.236 10.789 9.125 19.076-13.505 15.74-19.41-3.949-20.924-8.994-.277-.924-.407-1.357-.409-.99-.002-.367-.132.066-.41.99-1.512 5.045-7.418 24.734-20.923 8.994-7.111-8.287-3.819-16.574 9.125-19.076C12.387 40.366 4.062 38 1.778 28.729 1.12 26.062 0 9.635 0 7.415 0-3.699 8.579-.206 13.873 4.308Z" d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
/> />
</Svg> </Svg>
) )
src/view/shell/index.tsx
+6 -12
View File
@@ -19,10 +19,6 @@ import {useTheme} from 'lib/ThemeContext'
import {usePalette} from 'lib/hooks/usePalette' import {usePalette} from 'lib/hooks/usePalette'
import {RoutesContainer, TabsNavigator} from '../../Navigation' import {RoutesContainer, TabsNavigator} from '../../Navigation'
import {isStateAtTabRoot} from 'lib/routes/helpers' import {isStateAtTabRoot} from 'lib/routes/helpers'
import {
SafeAreaProvider,
initialWindowMetrics,
} from 'react-native-safe-area-context'
import { import {
useIsDrawerOpen, useIsDrawerOpen,
useSetDrawerOpen, useSetDrawerOpen,
@@ -107,14 +103,12 @@ export const Shell: React.FC = function ShellImpl() {
const pal = usePalette('default') const pal = usePalette('default')
const theme = useTheme() const theme = useTheme()
return ( return (
<SafeAreaProvider initialMetrics={initialWindowMetrics} style={pal.view}> <View testID="mobileShellView" style={[styles.outerContainer, pal.view]}>
<View testID="mobileShellView" style={[styles.outerContainer, pal.view]}> <StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} />
<StatusBar style={theme.colorScheme === 'dark' ? 'light' : 'dark'} /> <RoutesContainer>
<RoutesContainer> <ShellInner />
<ShellInner /> </RoutesContainer>
</RoutesContainer> </View>
</View>
</SafeAreaProvider>
) )
} }