@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1 → 0.0.1-alpha.10

package/examples/sample-expo-app/app/(tabs)/_layout.tsx

@@ -1,60 +0,0 @@
-import { Tabs } from 'expo-router'
-import React from 'react'
-import { Platform } from 'react-native'
-
-import { HapticTab } from '@/components/HapticTab'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import TabBarBackground from '@/components/ui/TabBarBackground'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme()
-
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute'
-          },
-          default: {}
-        })
-      }}
-    >
-      <Tabs.Screen
-        name='index'
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='house.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='posts'
-        options={{
-          title: 'Posts',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='doc.text.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='users'
-        options={{
-          title: 'Users',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='person.2.fill' color={color} />
-        }}
-      />
-      <Tabs.Screen
-        name='explore'
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name='paperplane.fill' color={color} />
-        }}
-      />
-    </Tabs>
-  )
-}

package/examples/sample-expo-app/app/(tabs)/explore.tsx

@@ -1,110 +0,0 @@
-import { Image } from 'expo-image';
-import { Platform, StyleSheet } from 'react-native';
-
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-
-export default function TabTwoScreen() {
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={
-        <IconSymbol
-          size={310}
-          color="#808080"
-          name="chevron.left.forwardslash.chevron.right"
-          style={styles.headerImage}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText>{' '}
-          library to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
-  );
-}
-
-const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
-  },
-  titleContainer: {
-    flexDirection: 'row',
-    gap: 8,
-  },
-});

package/examples/sample-expo-app/app/(tabs)/index.tsx

@@ -1,125 +0,0 @@
-import { Image } from 'expo-image'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-
-import { HelloWave } from '@/components/HelloWave'
-import ParallaxScrollView from '@/components/ParallaxScrollView'
-import { ThemedText } from '@/components/ThemedText'
-import { ThemedView } from '@/components/ThemedView'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function HomeScreen() {
-  const colorScheme = useColorScheme()
-
-  const handleNavigateToPosts = () => {
-    // Navigate to posts tab
-  }
-
-  const handleNavigateToUsers = () => {
-    // Navigate to users tab
-  }
-
-  return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={<Image source={require('@/assets/images/partial-react-logo.png')} style={styles.reactLogo} />}
-    >
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type='title'>Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>Enhanced Sample App</ThemedText>
-        <ThemedText>
-          This sample app now includes multiple pages, navigation, and API integration with JSONPlaceholder.
-        </ThemedText>
-      </ThemedView>
-
-      <ThemedView style={styles.featuresContainer}>
-        <ThemedText type='subtitle' style={styles.featuresTitle}>
-          Features
-        </ThemedText>
-
-        <TouchableOpacity style={styles.featureCard} onPress={handleNavigateToPosts} activeOpacity={0.7}>
-          <IconSymbol name='doc.text.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-          <ThemedView style={styles.featureContent}>
-            <ThemedText type='defaultSemiBold'>Posts</ThemedText>
-            <ThemedText style={styles.featureDescription}>Browse posts from JSONPlaceholder API with comments</ThemedText>
-          </ThemedView>
-          <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-
-        <TouchableOpacity style={styles.featureCard} onPress={handleNavigateToUsers} activeOpacity={0.7}>
-          <IconSymbol name='person.2.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-          <ThemedView style={styles.featureContent}>
-            <ThemedText type='defaultSemiBold'>Users</ThemedText>
-            <ThemedText style={styles.featureDescription}>View user profiles with their posts and details</ThemedText>
-          </ThemedView>
-          <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
-        </TouchableOpacity>
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>Navigation</ThemedText>
-        <ThemedText>
-          Use the bottom tabs to navigate between different sections, or tap the feature cards above to explore the new
-          functionality.
-        </ThemedText>
-      </ThemedView>
-
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type='subtitle'>API Integration</ThemedText>
-        <ThemedText>
-          The app demonstrates real API calls to JSONPlaceholder with proper loading states, error handling, and data management.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
-  )
-}
-
-const styles = StyleSheet.create({
-  titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8
-  },
-  stepContainer: {
-    gap: 8,
-    marginBottom: 8
-  },
-  featuresContainer: {
-    marginBottom: 16
-  },
-  featuresTitle: {
-    marginBottom: 12
-  },
-  featureCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  featureContent: {
-    flex: 1,
-    marginLeft: 12,
-    marginRight: 12
-  },
-  featureDescription: {
-    fontSize: 14,
-    opacity: 0.7,
-    marginTop: 2
-  },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute'
-  }
-})

package/examples/sample-expo-app/app/(tabs)/posts.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import { FlatList, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native'
-import { router } from 'expo-router'
-import { ThemedView } from '@/components/ThemedView'
-import { ThemedText } from '@/components/ThemedText'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { ErrorView } from '@/components/ErrorView'
-import { useApi } from '@/hooks/useApi'
-import { apiService, Post } from '@/services/api'
-
-export default function PostsScreen() {
-  const { data: posts, loading, error, refetch } = useApi(() => apiService.getPosts())
-
-  const handlePostPress = (post: Post) => {
-    router.push(`/post/${post.id}`)
-  }
-
-  const renderPost = ({ item }: { item: Post }) => (
-    <TouchableOpacity style={styles.postCard} onPress={() => handlePostPress(item)} activeOpacity={0.7}>
-      <ThemedText type='subtitle' style={styles.postTitle}>
-        {item.title}
-      </ThemedText>
-      <ThemedText style={styles.postBody} numberOfLines={3}>
-        {item.body}
-      </ThemedText>
-      <ThemedText style={styles.postMeta}>
-        Post ID: {item.id} • User ID: {item.userId}
-      </ThemedText>
-    </TouchableOpacity>
-  )
-
-  if (loading) {
-    return <LoadingSpinner message='Loading posts...' />
-  }
-
-  if (error) {
-    return <ErrorView message={error} onRetry={refetch} />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.header}>
-        <ThemedText type='title'>Posts</ThemedText>
-        <ThemedText style={styles.subtitle}>Latest posts from JSONPlaceholder API</ThemedText>
-      </ThemedView>
-
-      <FlatList
-        data={posts}
-        renderItem={renderPost}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.listContainer}
-        refreshControl={<RefreshControl refreshing={loading} onRefresh={refetch} />}
-        showsVerticalScrollIndicator={false}
-      />
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  subtitle: {
-    marginTop: 4,
-    opacity: 0.7
-  },
-  listContainer: {
-    padding: 20,
-    paddingTop: 10
-  },
-  postCard: {
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  postTitle: {
-    marginBottom: 8,
-    fontWeight: '600'
-  },
-  postBody: {
-    marginBottom: 12,
-    lineHeight: 20
-  },
-  postMeta: {
-    fontSize: 12,
-    opacity: 0.6
-  }
-})

package/examples/sample-expo-app/app/(tabs)/users.tsx

@@ -1,131 +0,0 @@
-import React from 'react'
-import { FlatList, StyleSheet, TouchableOpacity, RefreshControl } from 'react-native'
-import { router } from 'expo-router'
-import { ThemedView } from '@/components/ThemedView'
-import { ThemedText } from '@/components/ThemedText'
-import { LoadingSpinner } from '@/components/LoadingSpinner'
-import { ErrorView } from '@/components/ErrorView'
-import { IconSymbol } from '@/components/ui/IconSymbol'
-import { useApi } from '@/hooks/useApi'
-import { apiService, User } from '@/services/api'
-import { Colors } from '@/constants/Colors'
-import { useColorScheme } from '@/hooks/useColorScheme'
-
-export default function UsersScreen() {
-  const { data: users, loading, error, refetch } = useApi(() => apiService.getUsers())
-  const colorScheme = useColorScheme()
-
-  const handleUserPress = (user: User) => {
-    router.push(`/user/${user.id}`)
-  }
-
-  const renderUser = ({ item }: { item: User }) => (
-    <TouchableOpacity style={styles.userCard} onPress={() => handleUserPress(item)} activeOpacity={0.7}>
-      <ThemedView style={styles.userAvatar}>
-        <IconSymbol name='person.fill' size={24} color={Colors[colorScheme ?? 'light'].tint} />
-      </ThemedView>
-
-      <ThemedView style={styles.userInfo}>
-        <ThemedText type='subtitle' style={styles.userName}>
-          {item.name}
-        </ThemedText>
-        <ThemedText style={styles.userUsername}>@{item.username}</ThemedText>
-        <ThemedText style={styles.userEmail} numberOfLines={1}>
-          {item.email}
-        </ThemedText>
-        <ThemedText style={styles.userCompany}>{item.company.name}</ThemedText>
-      </ThemedView>
-
-      <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} style={styles.chevron} />
-    </TouchableOpacity>
-  )
-
-  if (loading) {
-    return <LoadingSpinner message='Loading users...' />
-  }
-
-  if (error) {
-    return <ErrorView message={error} onRetry={refetch} />
-  }
-
-  return (
-    <ThemedView style={styles.container}>
-      <ThemedView style={styles.header}>
-        <ThemedText type='title'>Users</ThemedText>
-        <ThemedText style={styles.subtitle}>Users from JSONPlaceholder API</ThemedText>
-      </ThemedView>
-
-      <FlatList
-        data={users}
-        renderItem={renderUser}
-        keyExtractor={(item) => item.id.toString()}
-        contentContainerStyle={styles.listContainer}
-        refreshControl={<RefreshControl refreshing={loading} onRefresh={refetch} />}
-        showsVerticalScrollIndicator={false}
-      />
-    </ThemedView>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  header: {
-    padding: 20,
-    paddingTop: 60,
-    paddingBottom: 10
-  },
-  subtitle: {
-    marginTop: 4,
-    opacity: 0.7
-  },
-  listContainer: {
-    padding: 20,
-    paddingTop: 10
-  },
-  userCard: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 16,
-    marginBottom: 12,
-    borderRadius: 12,
-    backgroundColor: 'rgba(255, 255, 255, 0.1)',
-    borderWidth: 1,
-    borderColor: 'rgba(255, 255, 255, 0.2)'
-  },
-  userAvatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 12
-  },
-  userInfo: {
-    flex: 1
-  },
-  userName: {
-    marginBottom: 2,
-    fontWeight: '600'
-  },
-  userUsername: {
-    fontSize: 14,
-    opacity: 0.7,
-    marginBottom: 4
-  },
-  userEmail: {
-    fontSize: 12,
-    opacity: 0.6,
-    marginBottom: 2
-  },
-  userCompany: {
-    fontSize: 12,
-    opacity: 0.8,
-    fontStyle: 'italic'
-  },
-  chevron: {
-    opacity: 0.5
-  }
-})

package/examples/sample-expo-app/app/+not-found.tsx

@@ -1,32 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
-      <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen does not exist.</ThemedText>
-        <Link href="/" style={styles.link}>
-          <ThemedText type="link">Go to home screen!</ThemedText>
-        </Link>
-      </ThemedView>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});

package/examples/sample-expo-app/app/_layout.tsx

@@ -1,53 +0,0 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native'
-import { useFonts } from 'expo-font'
-import { Stack } from 'expo-router'
-import { StatusBar } from 'expo-status-bar'
-import 'react-native-reanimated'
-
-import { useColorScheme } from '@/hooks/useColorScheme'
-import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
-
-SessionRecorder.init({
-  version: '0.0.1',
-  application: 'multiplayer-web-app',
-  environment: 'development',
-  apiKey:
-    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpbnRlZ3JhdGlvbiI6IjY4NGZlMDljMjA0NmYwYjM0ZjU5ZDNjYyIsIndvcmtzcGFjZSI6IjY4NGMzYmYwYjQ2MGUzMmY3YWJmZjRlMSIsInByb2plY3QiOiI2ODRjM2M0MmI0NjBlMzJmN2FiZmY1YzgiLCJ0eXBlIjoiT1RFTCIsImlhdCI6MTc1MDA2NTMwOH0.F15dW5RUHtq4-e2FUZD_vK0FJ5USs8SRFbnPYO_0XVk',
-  apiBaseUrl: 'http://localhost',
-  exporterEndpoint: 'http://localhost/v1/traces',
-  showWidget: true,
-  ignoreUrls: [
-    /posthog\.com.*/,
-    /https:\/\/bam\.nr-data\.net\/.*/,
-    /https:\/\/cdn\.jsdelivr\.net\/.*/,
-    /https:\/\/pixel\.source\.app\/.*/
-  ]
-  // propagateTraceHeaderCorsUrls: new RegExp(
-  //   `${process.env.REACT_APP_API_BASE_URL}\.*`,
-  //   "i"
-  // ),
-})
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme()
-  const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf')
-  })
-
-  if (!loaded) {
-    // Async font loading only occurs in development.
-    return null
-  }
-
-  return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name='(tabs)' options={{ headerShown: false }} />
-        <Stack.Screen name='post/[id]' options={{ headerShown: false }} />
-        <Stack.Screen name='user/[id]' options={{ headerShown: false }} />
-        <Stack.Screen name='+not-found' />
-      </Stack>
-      <StatusBar style='auto' />
-    </ThemeProvider>
-  )
-}