Initial commit

screens/PostsScreen.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { apiService } from '../services/api';
+
+export default function PostsScreen({ filter }: { filter: string }) {
+  const [posts, setPosts] = useState([]);
+
+  useEffect(() => {
+    apiService.getPosts().then(setPosts);
+  }, []);
+
+  const filtered = posts.filter((p: any) => p.title.toLowerCase().includes(filter.toLowerCase()));
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={filtered}
+        keyExtractor={(item: any) => item.id.toString()}
+        renderItem={({ item }: any) => (
+          <View style={styles.item}>
+            <Text style={styles.title}>{item.title}</Text>
+            <Text>{item.body}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  item: { padding: 16, borderBottomWidth: 1 },
+  title: { fontWeight: 'bold' },
+});

screens/TodosScreen.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { apiService } from '../services/api';
+
+export default function TodosScreen({ filter }: { filter: string }) {
+  const [todos, setTodos] = useState([]);
+
+  useEffect(() => {
+    apiService.getTodos().then(setTodos);
+  }, []);
+
+  const filtered = todos.filter((t: any) => t.title.toLowerCase().includes(filter.toLowerCase()));
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={filtered}
+        keyExtractor={(item: any) => item.id.toString()}
+        renderItem={({ item }: any) => (
+          <View style={styles.item}>
+            <Text>{item.completed ? '✅' : '⬜'} {item.title}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  item: { padding: 16, borderBottomWidth: 1 },
+});

screens/UsersScreen.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { apiService } from '../services/api';
+
+export default function UsersScreen({ filter }: { filter: string }) {
+  const [users, setUsers] = useState([]);
+
+  useEffect(() => {
+    apiService.getUsers().then(setUsers);
+  }, []);
+
+  const filtered = users.filter((u: any) => u.name.toLowerCase().includes(filter.toLowerCase()));
+
+  return (
+    <View style={styles.container}>
+      <FlatList
+        data={filtered}
+        keyExtractor={(item: any) => item.id.toString()}
+        renderItem={({ item }: any) => (
+          <View style={styles.item}>
+            <Text style={styles.name}>{item.name}</Text>
+            <Text>{item.email}</Text>
+          </View>
+        )}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, padding: 16 },
+  item: { padding: 16, borderBottomWidth: 1 },
+  name: { fontWeight: 'bold' },
+});