From a863df7aff98affd1cdf1a2e6b4cbb183d5a7d49 Mon Sep 17 00:00:00 2001
From: PerfectOctogon <blazecoc777@gmail.com>
Date: Thu, 16 May 2024 19:54:17 -0300
Subject: [PATCH 1/3] Added flatlist

---
 App.js | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/App.js b/App.js
index 4c282a2..784cb06 100644
--- a/App.js
+++ b/App.js
@@ -1,18 +1,34 @@
-import { SafeAreaView, Text } from 'react-native';
-import tw, { useDeviceContext } from 'twrnc';
+import { FlatList, SafeAreaView, Text, View } from 'react-native';
+import 'react-native-reanimated';
 import { Provider } from 'react-redux';
+import tw, { useDeviceContext } from 'twrnc';
 import { store } from './store';
-import 'react-native-reanimated'; 
+
+//This is the note object. Can be added dynamically
+const Note = ({item}) => {
+  <View style = {[tw`w-full h-12 mb-1 mr-1 rounded-lg p-4 bg-purple-400`]}>
+    <Text>{item.id}</Text>
+  </View>
+}
+
+const generateData = (count) => Array.from({length : count}, (_, i) => ({id : "Lorem ipsum dolor sit amet " + i.toString()}));
+const data = generateData(20);
 
 function App() {
   useDeviceContext(tw);
 
+  
+
   return (
     <Provider store={store}>
       <SafeAreaView>
-        <Text style={tw`w-screen mt-16 text-center text-xl`}>
-          Your app code goes here.
-        </Text>
+        <FlatList
+          data = {data}
+          keyExtractor = {(item) => item.id}
+          renderItem = {({item}) => <Note item={item}/>}
+          numColumns = {1}
+          contentContainerStyle={tw`p-4`}
+        />
       </SafeAreaView>
     </Provider>
   )

From a06bc6eecf997a32824e3587656e8e731449b7e4 Mon Sep 17 00:00:00 2001
From: PerfectOctogon <blazecoc777@gmail.com>
Date: Thu, 16 May 2024 19:56:20 -0300
Subject: [PATCH 2/3] Added flatlist

---
 App.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/App.js b/App.js
index 784cb06..72d3b9c 100644
--- a/App.js
+++ b/App.js
@@ -11,7 +11,7 @@ const Note = ({item}) => {
   </View>
 }
 
-const generateData = (count) => Array.from({length : count}, (_, i) => ({id : "Lorem ipsum dolor sit amet " + i.toString()}));
+const generateData = (count) => Array.from({length : count}, (_, i) => ({id : " Lorem ipsum dolor sit amet " + i.toString()}));
 const data = generateData(20);
 
 function App() {

From 1d63d7cdd111c856be791ae3765213e64e784df2 Mon Sep 17 00:00:00 2001
From: PerfectOctogon <blazecoc777@gmail.com>
Date: Fri, 17 May 2024 11:41:35 -0300
Subject: [PATCH 3/3] Flatlist works

---
 App.js | 41 +++++++++++++++++++++++++++--------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/App.js b/App.js
index 72d3b9c..e5c9f0c 100644
--- a/App.js
+++ b/App.js
@@ -1,3 +1,4 @@
+import { NavigationContainer } from '@react-navigation/native';
 import { FlatList, SafeAreaView, Text, View } from 'react-native';
 import 'react-native-reanimated';
 import { Provider } from 'react-redux';
@@ -6,29 +7,41 @@ import { store } from './store';
 
 //This is the note object. Can be added dynamically
 const Note = ({item}) => {
-  <View style = {[tw`w-full h-12 mb-1 mr-1 rounded-lg p-4 bg-purple-400`]}>
-    <Text>{item.id}</Text>
-  </View>
+  return (
+    <View style = {[tw`w-1/3 aspect-square mb-1 mr-1 rounded-lg bg-purple-400`]}>
+      <Text>{item.note}</Text>
+    </View>
+  )
 }
 
-const generateData = (count) => Array.from({length : count}, (_, i) => ({id : " Lorem ipsum dolor sit amet " + i.toString()}));
+const generateData = (count) => Array.from({length : count}, (_, i) => ({id : (i + 1).toString(), note : "Lorem ipsum dolor sit amet"}));
 const data = generateData(20);
 
-function App() {
-  useDeviceContext(tw);
+const Stack = createNativeStackNavigator();
 
-  
+function HomeScreen({navigation}){
+  return(
+    <FlatList
+            data = {data}
+            keyExtractor = {(item) => item.id}
+            renderItem = {({item}) => <Note item={item}/>}
+            numColumns = {3}
+            contentContainerStyle={tw`p-4`}
+    />
+  )
+}
 
+function App() {
+  useDeviceContext(tw);
   return (
     <Provider store={store}>
       <SafeAreaView>
-        <FlatList
-          data = {data}
-          keyExtractor = {(item) => item.id}
-          renderItem = {({item}) => <Note item={item}/>}
-          numColumns = {1}
-          contentContainerStyle={tw`p-4`}
-        />
+        <NavigationContainer>
+          <Stack.Navigator initialRouteName="Home">
+            <Stack.Screen name="Home" component={HomeScreen}/>
+            <Stack.Screen name="Details" component={DetailsScreen}/>
+          </Stack.Navigator>
+        </NavigationContainer>
       </SafeAreaView>
     </Provider>
   )