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

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

@@ -0,0 +1,131 @@
+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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,53 @@
+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>
+  )
+}

package/examples/sample-expo-app/app/post/[id].tsx

@@ -0,0 +1,199 @@
+import React from 'react'
+import { ScrollView, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
+import { useLocalSearchParams, 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, Comment } from '@/services/api'
+import { Colors } from '@/constants/Colors'
+import { useColorScheme } from '@/hooks/useColorScheme'
+
+export default function PostDetailScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>()
+  const postId = parseInt(id!)
+  const colorScheme = useColorScheme()
+
+  const {
+    data: post,
+    loading: postLoading,
+    error: postError,
+    refetch: refetchPost
+  } = useApi(() => apiService.getPost(postId), [postId])
+
+  const {
+    data: comments,
+    loading: commentsLoading,
+    error: commentsError,
+    refetch: refetchComments
+  } = useApi(() => apiService.getPostComments(postId), [postId])
+
+  const handleUserPress = (userId: number) => {
+    router.push(`/user/${userId}`)
+  }
+
+  const renderComment = ({ item }: { item: Comment }) => (
+    <ThemedView style={styles.commentCard}>
+      <ThemedView style={styles.commentHeader}>
+        <ThemedText type='defaultSemiBold' style={styles.commentName}>
+          {item.name}
+        </ThemedText>
+        <ThemedText style={styles.commentEmail}>{item.email}</ThemedText>
+      </ThemedView>
+      <ThemedText style={styles.commentBody}>{item.body}</ThemedText>
+    </ThemedView>
+  )
+
+  if (postLoading) {
+    return <LoadingSpinner message='Loading post...' />
+  }
+
+  if (postError) {
+    return <ErrorView message={postError} onRetry={refetchPost} />
+  }
+
+  if (!post) {
+    return <ErrorView message='Post not found' />
+  }
+
+  return (
+    <ThemedView style={styles.container}>
+      {/* Header */}
+      <ThemedView style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+          <IconSymbol name='chevron.left' size={24} color={Colors[colorScheme ?? 'light'].tint} />
+        </TouchableOpacity>
+        <ThemedText type='title' style={styles.headerTitle}>
+          Post Details
+        </ThemedText>
+      </ThemedView>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        {/* Post Content */}
+        <ThemedView style={styles.postCard}>
+          <ThemedText type='title' style={styles.postTitle}>
+            {post.title}
+          </ThemedText>
+          <ThemedText style={styles.postBody}>{post.body}</ThemedText>
+
+          <TouchableOpacity style={styles.userButton} onPress={() => handleUserPress(post.userId)}>
+            <IconSymbol name='person.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
+            <ThemedText style={styles.userButtonText}>View User {post.userId}</ThemedText>
+            <IconSymbol name='chevron.right' size={16} color={Colors[colorScheme ?? 'light'].tint} />
+          </TouchableOpacity>
+        </ThemedView>
+
+        {/* Comments Section */}
+        <ThemedView style={styles.commentsSection}>
+          <ThemedText type='subtitle' style={styles.commentsTitle}>
+            Comments ({comments?.length || 0})
+          </ThemedText>
+
+          {commentsLoading ? (
+            <LoadingSpinner message='Loading comments...' />
+          ) : commentsError ? (
+            <ErrorView message={commentsError} onRetry={refetchComments} />
+          ) : comments && comments.length > 0 ? (
+            <FlatList
+              data={comments}
+              renderItem={renderComment}
+              keyExtractor={(item) => item.id.toString()}
+              scrollEnabled={false}
+              showsVerticalScrollIndicator={false}
+            />
+          ) : (
+            <ThemedText style={styles.noComments}>No comments yet</ThemedText>
+          )}
+        </ThemedView>
+      </ScrollView>
+    </ThemedView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+    paddingTop: 60,
+    paddingBottom: 10
+  },
+  backButton: {
+    marginRight: 16
+  },
+  headerTitle: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    padding: 20
+  },
+  postCard: {
+    padding: 20,
+    marginBottom: 20,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)'
+  },
+  postTitle: {
+    marginBottom: 16,
+    lineHeight: 28
+  },
+  postBody: {
+    marginBottom: 20,
+    lineHeight: 22
+  },
+  userButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 12,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)'
+  },
+  userButtonText: {
+    flex: 1,
+    marginLeft: 8,
+    marginRight: 8
+  },
+  commentsSection: {
+    marginBottom: 20
+  },
+  commentsTitle: {
+    marginBottom: 16
+  },
+  commentCard: {
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)'
+  },
+  commentHeader: {
+    marginBottom: 8
+  },
+  commentName: {
+    marginBottom: 2
+  },
+  commentEmail: {
+    fontSize: 12,
+    opacity: 0.6
+  },
+  commentBody: {
+    lineHeight: 18
+  },
+  noComments: {
+    textAlign: 'center',
+    opacity: 0.6,
+    fontStyle: 'italic',
+    padding: 20
+  }
+})

package/examples/sample-expo-app/app/user/[id].tsx

@@ -0,0 +1,270 @@
+import React from 'react'
+import { ScrollView, StyleSheet, TouchableOpacity, FlatList } from 'react-native'
+import { useLocalSearchParams, 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, Post } from '@/services/api'
+import { Colors } from '@/constants/Colors'
+import { useColorScheme } from '@/hooks/useColorScheme'
+
+export default function UserDetailScreen() {
+  const { id } = useLocalSearchParams<{ id: string }>()
+  const userId = parseInt(id!)
+  const colorScheme = useColorScheme()
+
+  const {
+    data: user,
+    loading: userLoading,
+    error: userError,
+    refetch: refetchUser
+  } = useApi(() => apiService.getUser(userId), [userId])
+
+  const {
+    data: posts,
+    loading: postsLoading,
+    error: postsError,
+    refetch: refetchPosts
+  } = useApi(() => apiService.getUserPosts(userId), [userId])
+
+  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={2}>
+        {item.body}
+      </ThemedText>
+      <ThemedText style={styles.postMeta}>Post ID: {item.id}</ThemedText>
+    </TouchableOpacity>
+  )
+
+  if (userLoading) {
+    return <LoadingSpinner message='Loading user...' />
+  }
+
+  if (userError) {
+    return <ErrorView message={userError} onRetry={refetchUser} />
+  }
+
+  if (!user) {
+    return <ErrorView message='User not found' />
+  }
+
+  return (
+    <ThemedView style={styles.container}>
+      {/* Header */}
+      <ThemedView style={styles.header}>
+        <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
+          <IconSymbol name='chevron.left' size={24} color={Colors[colorScheme ?? 'light'].tint} />
+        </TouchableOpacity>
+        <ThemedText type='title' style={styles.headerTitle}>
+          User Profile
+        </ThemedText>
+      </ThemedView>
+
+      <ScrollView style={styles.content} showsVerticalScrollIndicator={false}>
+        {/* User Info Card */}
+        <ThemedView style={styles.userCard}>
+          <ThemedView style={styles.userAvatar}>
+            <IconSymbol name='person.fill' size={32} color={Colors[colorScheme ?? 'light'].tint} />
+          </ThemedView>
+
+          <ThemedText type='title' style={styles.userName}>
+            {user.name}
+          </ThemedText>
+          <ThemedText style={styles.userUsername}>@{user.username}</ThemedText>
+
+          <ThemedView style={styles.userDetails}>
+            <ThemedView style={styles.detailRow}>
+              <IconSymbol name='envelope.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
+              <ThemedText style={styles.detailText}>{user.email}</ThemedText>
+            </ThemedView>
+
+            <ThemedView style={styles.detailRow}>
+              <IconSymbol name='phone.fill' size={16} color={Colors[colorScheme ?? 'light'].tint} />
+              <ThemedText style={styles.detailText}>{user.phone}</ThemedText>
+            </ThemedView>
+
+            <ThemedView style={styles.detailRow}>
+              <IconSymbol name='globe' size={16} color={Colors[colorScheme ?? 'light'].tint} />
+              <ThemedText style={styles.detailText}>{user.website}</ThemedText>
+            </ThemedView>
+          </ThemedView>
+
+          <ThemedView style={styles.companySection}>
+            <ThemedText type='subtitle' style={styles.sectionTitle}>
+              Company
+            </ThemedText>
+            <ThemedText style={styles.companyName}>{user.company.name}</ThemedText>
+            <ThemedText style={styles.companyCatchPhrase}>&ldquo;{user.company.catchPhrase}&rdquo;</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.addressSection}>
+            <ThemedText type='subtitle' style={styles.sectionTitle}>
+              Address
+            </ThemedText>
+            <ThemedText style={styles.addressText}>
+              {user.address.street}, {user.address.suite}
+            </ThemedText>
+            <ThemedText style={styles.addressText}>
+              {user.address.city}, {user.address.zipcode}
+            </ThemedText>
+          </ThemedView>
+        </ThemedView>
+
+        {/* Posts Section */}
+        <ThemedView style={styles.postsSection}>
+          <ThemedText type='subtitle' style={styles.postsTitle}>
+            Posts ({posts?.length || 0})
+          </ThemedText>
+
+          {postsLoading ? (
+            <LoadingSpinner message='Loading posts...' />
+          ) : postsError ? (
+            <ErrorView message={postsError} onRetry={refetchPosts} />
+          ) : posts && posts.length > 0 ? (
+            <FlatList
+              data={posts}
+              renderItem={renderPost}
+              keyExtractor={(item) => item.id.toString()}
+              scrollEnabled={false}
+              showsVerticalScrollIndicator={false}
+            />
+          ) : (
+            <ThemedText style={styles.noPosts}>No posts yet</ThemedText>
+          )}
+        </ThemedView>
+      </ScrollView>
+    </ThemedView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 20,
+    paddingTop: 60,
+    paddingBottom: 10
+  },
+  backButton: {
+    marginRight: 16
+  },
+  headerTitle: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    padding: 20
+  },
+  userCard: {
+    padding: 20,
+    marginBottom: 20,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.2)',
+    alignItems: 'center'
+  },
+  userAvatar: {
+    width: 80,
+    height: 80,
+    borderRadius: 40,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  userName: {
+    marginBottom: 4,
+    textAlign: 'center'
+  },
+  userUsername: {
+    fontSize: 16,
+    opacity: 0.7,
+    marginBottom: 20
+  },
+  userDetails: {
+    width: '100%',
+    marginBottom: 20
+  },
+  detailRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  detailText: {
+    marginLeft: 8,
+    flex: 1
+  },
+  companySection: {
+    width: '100%',
+    marginBottom: 16,
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)'
+  },
+  sectionTitle: {
+    marginBottom: 8
+  },
+  companyName: {
+    marginBottom: 4,
+    fontWeight: '600'
+  },
+  companyCatchPhrase: {
+    fontSize: 14,
+    opacity: 0.8,
+    fontStyle: 'italic'
+  },
+  addressSection: {
+    width: '100%',
+    padding: 16,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)'
+  },
+  addressText: {
+    marginBottom: 2
+  },
+  postsSection: {
+    marginBottom: 20
+  },
+  postsTitle: {
+    marginBottom: 16
+  },
+  postCard: {
+    padding: 16,
+    marginBottom: 12,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255, 255, 255, 0.05)',
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)'
+  },
+  postTitle: {
+    marginBottom: 8
+  },
+  postBody: {
+    marginBottom: 8,
+    lineHeight: 18
+  },
+  postMeta: {
+    fontSize: 12,
+    opacity: 0.6
+  },
+  noPosts: {
+    textAlign: 'center',
+    opacity: 0.6,
+    fontStyle: 'italic',
+    padding: 20
+  }
+})