Merge pull request #198 from luke-h1/@luke-h1/feat/add-toasts

feat(app): add sooner notifications + auth ctx fix

bun.lock

@@ -81,6 +81,7 @@
         "react-native-vector-icons": "^10.2.0",
         "react-native-web": "~0.19.6",
         "react-native-webview": "13.12.5",
+        "sonner-native": "^0.17.0",
         "tmi.js": "^1.8.5",
       },
       "devDependencies": {
@@ -3660,6 +3661,8 @@
 
     "sonic-boom": ["[email protected]", "", { "dependencies": { "atomic-sleep": "^1.0.0" } }, "sha512-y4Z8LCDBuum+PBP3lSV7RHrXscqksve/bi0as7mhwVnBW+/wUqKT/2Kb7um8yqcFy0duYbbPxzt89Zy2nOCaxg=="],
 
+    "sonner-native": ["[email protected]", "", { "peerDependencies": { "react": "*", "react-native": "*", "react-native-gesture-handler": ">=2.16.1", "react-native-reanimated": ">=3.10.1", "react-native-safe-area-context": ">=4.10.5", "react-native-screens": ">=3.31.1", "react-native-svg": ">=15.6.0" } }, "sha512-RRkgnuiuccgEDJdeYnFjPzTgunN75RVB9yFh6vc9D4QEKKITrhkBGaNz0wLY85/A5MBCMmaKtfKv/uxQDxqg+g=="],
+
     "sort-keys": ["[email protected]", "", { "dependencies": { "is-plain-obj": "^1.0.0" } }, "sha512-/dPCrG1s3ePpWm6yBbxZq5Be1dXGLyLn9Z791chDC3NFrpkVbWGzkBwPN1knaciexFXgRJ7hzdnwZ4stHSDmjg=="],
 
     "source-list-map": ["[email protected]", "", {}, "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="],

package.json

@@ -128,6 +128,7 @@
     "react-native-vector-icons": "^10.2.0",
     "react-native-web": "~0.19.6",
     "react-native-webview": "13.12.5",
+    "sonner-native": "^0.17.0",
     "tmi.js": "^1.8.5"
   },
   "devDependencies": {

src/App.tsx

@@ -18,12 +18,14 @@ import 'expo-dev-client';
 import { activateKeepAwakeAsync } from 'expo-keep-awake';
 import { useLayoutEffect, useState } from 'react';
 import { LogBox } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   initialWindowMetrics,
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
 import './styles/unistyles';
-import { OTAUpdates, Toast } from './components';
+import { Toaster } from 'sonner-native';
+import { OTAUpdates } from './components';
 import { useOnAppStateChange, useChangeScreenOrientation } from './hooks';
 import {
   useNavigationPersistence,
@@ -128,21 +130,23 @@ function App(props: AppProps) {
       catchErrors={BaseConfig.catchErrors}
       onReset={() => setRecoveredFromError(true)}
     >
-      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <QueryClientProvider client={queryClient}>
-          <AppNavigator
-            initialState={
-              recoveredFromError
-                ? { index: 0, routes: [] }
-                : initialNavigationState
-            }
-            onStateChange={onNavigationStateChange}
-          >
-            <OTAUpdates />
-            <Toast />
-          </AppNavigator>
-        </QueryClientProvider>
-      </SafeAreaProvider>
+      <GestureHandlerRootView>
+        <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+          <QueryClientProvider client={queryClient}>
+            <AppNavigator
+              initialState={
+                recoveredFromError
+                  ? { index: 0, routes: [] }
+                  : initialNavigationState
+              }
+              onStateChange={onNavigationStateChange}
+            >
+              <OTAUpdates />
+            </AppNavigator>
+            <Toaster position="bottom-center" />
+          </QueryClientProvider>
+        </SafeAreaProvider>
+      </GestureHandlerRootView>
     </ErrorBoundary>
   );
 }

src/components/LiveStreamCard/LiveStreamCard.tsx

@@ -6,6 +6,7 @@ import { View } from 'react-native';
 import { createStyleSheet, useStyles } from 'react-native-unistyles';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
+import { LiveStreamCardSkeleton } from './LiveStreamCardSkeleton';
 
 interface Props {
   stream: Stream;
@@ -17,6 +18,10 @@ export function LiveStreamCard({ stream }: Props) {
 
   const { profilePicture } = useStreamerImage(stream.user_login, [stream]);
 
+  if (!stream) {
+    return <LiveStreamCardSkeleton />;
+  }
+
   return (
     <Button
       onPress={() => {

src/components/LiveStreamCard/LiveStreamCardSkeleton.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+import { Skeleton } from '../Skeleton';
+
+export function LiveStreamCardSkeleton() {
+  const { styles } = useStyles(stylesheet);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.imageContainer}>
+        <Skeleton style={styles.imageSkeleton} />
+      </View>
+      <View style={styles.details}>
+        <Skeleton style={styles.titleSkeleton} />
+        <View style={styles.metadata}>
+          <View style={styles.info}>
+            <Skeleton style={styles.avatarSkeleton} />
+            <Skeleton style={styles.textSkeleton} />
+          </View>
+          <Skeleton style={styles.textSkeleton} />
+        </View>
+        <Skeleton style={styles.textSkeleton} />
+      </View>
+    </View>
+  );
+}
+
+const stylesheet = createStyleSheet(theme => ({
+  container: {
+    flexDirection: 'row',
+    paddingVertical: theme.spacing.xl,
+    paddingHorizontal: theme.spacing.sm,
+    marginBottom: theme.spacing.md,
+    columnGap: theme.spacing.sm,
+    flex: 1,
+  },
+  imageContainer: {
+    position: 'relative',
+  },
+  imageSkeleton: {
+    width: 150,
+    height: 100,
+    borderRadius: theme.radii.md,
+  },
+  details: {
+    flex: 1,
+    justifyContent: 'flex-start',
+    marginLeft: theme.spacing.md,
+  },
+  titleSkeleton: {
+    height: 20,
+    width: '80%',
+    marginBottom: theme.spacing.sm,
+  },
+  metadata: {
+    marginVertical: theme.spacing.sm,
+  },
+  info: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: theme.spacing.md,
+  },
+  avatarSkeleton: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    marginRight: theme.spacing.xs,
+  },
+  textSkeleton: {
+    height: 15,
+    width: '60%',
+    marginBottom: theme.spacing.xs,
+  },
+}));

src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+import { createStyleSheet, useStyles } from 'react-native-unistyles';
+
+interface SkeletonProps {
+  style?: ViewStyle;
+}
+
+export function Skeleton({ style }: SkeletonProps) {
+  const { styles } = useStyles(stylesheet);
+  return <View style={[styles.skeleton, style]} />;
+}
+
+const stylesheet = createStyleSheet(theme => ({
+  skeleton: {
+    backgroundColor: theme.colors.border,
+    borderRadius: theme.radii.md,
+    opacity: 0.3,
+  },
+}));

src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from './Skeleton';