Skip to content

Commit

Permalink
Refactor RootLayout component in mobile app
Browse files Browse the repository at this point in the history
  • Loading branch information
@bigint
bigint committed Nov 8, 2024
1 parent 533575b commit 7ff16a4
Show file tree
Hide file tree
Showing 8 changed files with 29 additions and 502 deletions.
6 changes: 2 additions & 4 deletions apps/mobile/app/(protected)/(feed)/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,13 @@ import { AnimatedButton } from "@/components/ui/animated-button";
import { Link, Slot } from "expo-router";
import { Plus } from "lucide-react-native";
import { View } from "react-native";
import "react-native-reanimated";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";

export default function FeedLayout() {
const { bottom } = useSafeAreaInsets();

return (
<Animated.View entering={FadeIn} exiting={FadeOut} style={{ flex: 1 }}>
<>
<EdgeGradient />
<Slot />
<View style={{ position: "absolute", bottom, right: 10, zIndex: 1 }}>
Expand All @@ -21,6 +19,6 @@ export default function FeedLayout() {
</AnimatedButton>
</Link>
</View>
</Animated.View>
</>
);
}
1 change: 0 additions & 1 deletion apps/mobile/app/(protected)/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useActiveProfile } from "@/store/profile";
import { type Profile, useCurrentProfileQuery } from "@hey/lens";
import { Stack } from "expo-router";
import { useEffect } from "react";
import "react-native-reanimated";

const RootLayout = () => {
const id = useAuthStore((state) => state.session.id);
Expand Down
7 changes: 4 additions & 3 deletions apps/mobile/app/_layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,14 @@ import { Slot } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import "react-native-reanimated";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { NetInfoProvider } from "../components/providers/net-info";

const lensApolloClient = apolloClient();

SplashScreen.preventAutoHideAsync();

export default function Layout() {
const RootLayout = () => {
const [fontLoaded] = useFonts({
Sans: require("../assets/fonts/sans.ttf"),
SansM: require("../assets/fonts/sans-m.ttf"),
Expand Down Expand Up @@ -44,4 +43,6 @@ export default function Layout() {
</SafeAreaProvider>
</GestureHandlerRootView>
);
}
};

export default RootLayout;
55 changes: 0 additions & 55 deletions apps/mobile/components/auth/background.tsx
View file

This file was deleted.

105 changes: 2 additions & 103 deletions apps/mobile/components/auth/instructions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,10 @@
import normalizeFont from "@/helpers/normalize-font";
import { useEffect } from "react";
import { StyleSheet, View } from "react-native";
import Animated, {
Easing,
useAnimatedStyle,
useSharedValue,
withDelay,
withTiming
} from "react-native-reanimated";
import { StyleSheet, Text, View } from "react-native";

export const Instructions = () => {
const opacity1 = useSharedValue(0);
const opacity2 = useSharedValue(0);
const opacity3 = useSharedValue(0);

const translateY1 = useSharedValue(20);
const translateY2 = useSharedValue(20);
const translateY3 = useSharedValue(20);

useEffect(() => {
opacity1.value = withDelay(
300,
withTiming(1, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);
translateY1.value = withDelay(
300,
withTiming(0, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);

opacity2.value = withDelay(
500,
withTiming(1, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);
translateY2.value = withDelay(
500,
withTiming(0, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);

opacity3.value = withDelay(
700,
withTiming(1, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);
translateY3.value = withDelay(
700,
withTiming(0, {
duration: 200,
easing: Easing.out(Easing.ease)
})
);
}, []);

const animatedStyle1 = useAnimatedStyle(() => {
"worklet";
const opacity = opacity1.value;
const translateY = translateY1.value;
return {
opacity,
transform: [{ translateY }]
};
});

const animatedStyle2 = useAnimatedStyle(() => {
"worklet";
const opacity = opacity2.value;
const translateY = translateY2.value;
return {
opacity,
transform: [{ translateY }]
};
});

const animatedStyle3 = useAnimatedStyle(() => {
"worklet";
const opacity = opacity3.value;
const translateY = translateY3.value;
return {
opacity,
transform: [{ translateY }]
};
});

return (
<View style={{ gap: 10, marginTop: -20 }}>
<Animated.Text style={[styles.text, animatedStyle1]}>
✳︎ Go to hey.xyz/settings/sessions
</Animated.Text>
<Animated.Text style={[styles.text, animatedStyle2]}>
✳︎ Sign in if you haven't already
</Animated.Text>
<Animated.Text style={[styles.text, animatedStyle3]}>
✳︎ Scan the QR code
</Animated.Text>
<Text style={styles.text}>GM</Text>
</View>
);
};
Expand Down
49 changes: 7 additions & 42 deletions apps/mobile/components/auth/screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,32 @@
import { Colors } from "@/helpers/colors";
import normalizeFont from "@/helpers/normalize-font";
import { useAuthStore } from "@/store/auth";
import { BlurView } from "expo-blur";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import { StyleSheet, Text } from "react-native";
import Animated, {
useAnimatedStyle,
useSharedValue,
withTiming
} from "react-native-reanimated";
import { SafeAreaView } from "react-native-safe-area-context";
import { Background } from "./background";
import { Scan } from "./scan";

export const AuthScreen = () => {
const id = useAuthStore((state) => state.session.id);

const opacity = useSharedValue(0);
const opacityStyle = useAnimatedStyle(() => {
"worklet";
return {
opacity: opacity.value
};
});
useEffect(() => {
opacity.value = withTiming(1, { duration: 200 });
}, []);

return (
<Background>
<>
<StatusBar style="dark" key="auth" />
<BlurView tint="light" style={styles.blurView} intensity={100}>
<SafeAreaView style={{ flex: 1 }}>
<Animated.View
style={[
opacityStyle,
styles.container,
{ justifyContent: id ? "center" : "space-between" }
]}
>
<Text style={styles.hey}>hey</Text>
{!id && <Scan />}
</Animated.View>
</SafeAreaView>
</BlurView>
</Background>
<SafeAreaView style={styles.container}>
<Text style={styles.hey}>hey</Text>
{!id && <Scan />}
</SafeAreaView>
</>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center"
},
blurView: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0
},
hey: {
fontFamily: "Serif",
fontSize: normalizeFont(42),
Expand Down
12 changes: 0 additions & 12 deletions apps/mobile/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,38 +14,26 @@
"@hey/data": "workspace:*",
"@hey/helpers": "workspace:*",
"@hey/lens": "workspace:*",
"@react-native-async-storage/async-storage": "^2.0.0",
"@react-native-community/netinfo": "^11.4.1",
"dayjs": "^1.11.13",
"expo": "52.0.0-preview.19",
"expo-av": "~15.0.1",
"expo-blur": "~14.0.1",
"expo-camera": "^16.0.3",
"expo-constants": "~17.0.2",
"expo-dev-client": "~5.0.0-preview.6",
"expo-font": "~13.0.0",
"expo-haptics": "^14.0.0",
"expo-image": "2.0.0-preview.1",
"expo-linear-gradient": "^14.0.1",
"expo-linking": "~7.0.2",
"expo-router": "4.0.0-preview.12",
"expo-secure-store": "^14.0.0",
"expo-splash-screen": "^0.27.6",
"expo-status-bar": "~2.0.0",
"expo-system-ui": "~4.0.2",
"expo-web-browser": "~14.0.0",
"graphql": "^16.9.0",
"lucide-react-native": "^0.454.0",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-native": "0.76.1",
"react-native-gesture-handler": "~2.20.2",
"react-native-markdown-display": "^7.0.2",
"react-native-reanimated": "~3.16.1",
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "4.0.0-beta.16",
"react-native-svg": "^15.8.0",
"react-native-web": "~0.19.10",
"zustand": "^5.0.1"
},
"devDependencies": {
Expand Down
Loading

1 comment on commit 7ff16a4

@vercel
Copy link

@vercel vercel bot commented on 7ff16a4 Nov 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web – ./

web-git-main-heyxyz.vercel.app
hey.xyz
web-heyxyz.vercel.app
heyxyz.vercel.app

Please sign in to comment.