From 82a8ecec377f71e24d76f7c1fe68c6e4c6ba6389 Mon Sep 17 00:00:00 2001
From: arribion <arribion@gmail.com>
Date: Tue, 2 Sep 2025 13:54:48 +0300
Subject: [PATCH 1/2] Changed The Header and footer React Native main file Path
 to start at the Introduction from Setup

---
 docusaurus.config.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index bc68ece..b69d2f8 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -46,8 +46,8 @@ const config: Config = {
               label: "TypeScript",
             },
             {
-              to: "/docs/react-native/setup",
-              label: "React Native Setup",
+              to: "/docs/react-native/Introduction",
+              label: "React Native",
             },
             {
               to: "/docs/react-native/components",
@@ -102,7 +102,7 @@ const config: Config = {
             },
             {
               label: "React Native",
-              to: "/docs/react-native/setup",
+              to: "/docs/react-native/introduction",
             },
           ],
         },

From 2a5172b6c39b6e219a7c7a27f176f4df33b29b6c Mon Sep 17 00:00:00 2001
From: arribion <arribion@gmail.com>
Date: Fri, 5 Sep 2025 02:26:14 +0300
Subject: [PATCH 2/2] update flatlist content and added more content

---
 docs/React/Getting Started With React.md |  0
 docs/React/Introduction.md               |  0
 docs/React/States And Effects.md         |  0
 docs/react-native/components.md          | 99 ++++++++++++++++--------
 docusaurus.config.ts                     | 12 ++-
 5 files changed, 76 insertions(+), 35 deletions(-)
 create mode 100644 docs/React/Getting Started With React.md
 create mode 100644 docs/React/Introduction.md
 create mode 100644 docs/React/States And Effects.md

diff --git a/docs/React/Getting Started With React.md b/docs/React/Getting Started With React.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/React/Introduction.md b/docs/React/Introduction.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/React/States And Effects.md b/docs/React/States And Effects.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/react-native/components.md b/docs/react-native/components.md
index 8bf18a4..6077495 100644
--- a/docs/react-native/components.md
+++ b/docs/react-native/components.md
@@ -239,14 +239,33 @@ const styles = StyleSheet.create({
 
 ### FlatList
 
+📦 What Is FlatList?
 Efficiently renders large lists.
+FlatList is a performant React Native component designed to render large lists of data. Unlike ScrollView, which renders everything at once, FlatList virtualizes the list—only rendering items that are visible on screen. This makes it ideal for long or dynamic lists.
 
-props
+🧠 Key Props Explained
+
+- data - Array of items to display
+
+- renderItem - Function that returns the UI for each item
+
+- keyExtractor - Function to generate unique keys for each item
+
+- horizontal - Enables horizontal scrolling
+
+- numColumns - Displays items in a grid format
+
+- ListHeaderComponent - Adds a header above the list
+
+- ListFooterComponent - Adds a footer below the list
+
+- ItemSeparatorComponent - Adds a separator between items
+
+- ListEmptyComponent - Renders when the list is empty
+
+- onRefresh & refreshing - Enables pull-to-refresh functionality
 
-- data: Array of items.
-- renderItem: Function to render each item.
-- keyExtractor: Unique key for each item.
-- horizontal, numColumns: Layout options.
+- extraData - Triggers re-render when external state changes
 
 ```bash
 <FlatList
@@ -268,40 +287,58 @@ const data = [{ key: 'Item 1' }, { key: 'Item 2' }];
 ```
 
 ```jsx
-import React from 'react';
-import { FlatList, View, Text } from 'react-native';
+import { FlatList, Text, View } from 'react-native';
 
 const data = [
-  { id: '1', title: 'Item 1' },
-  { id: '2', title: 'Item 2' },
-  { id: '3', title: 'Item 3' },
+  { id: '1', title: 'Web Development' },
+  { id: '2', title: 'App Design' },
+  { id: '3', title: 'Consulting' },
 ];
 
-const ListExample = () => {
-  const renderItem = ({ item }) => (
-    <View style={styles.item}>
-      <Text>{item.title}</Text>
-    </View>
-  );
+const renderItem = ({ item }) => (
+  <View style={{ padding: 20 }}>
+    <Text>{item.title}</Text>
+  </View>
+);
 
-  return (
-    <FlatList
-      data={data}
-      renderItem={renderItem}
-      keyExtractor={item => item.id}
-    />
-  );
-};
+<FlatList
+  data={data}
+  renderItem={renderItem}
+  keyExtractor={item => item.id}
+/>
 
-const styles = StyleSheet.create({
-  item: {
-    padding: 20,
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-  },
-});
 ```
 
+🖼️ Grid Layout Example
+
+```jsx
+<FlatList
+  data={data}
+  renderItem={renderItem}
+  keyExtractor={item => item.id}
+  numColumns={2}
+  columnWrapperStyle={{ justifyContent: 'space-between' }}
+/>
+```
+
+**🚀 Performance Tips**
+
+- Use initialNumToRender to control how many items load initially.
+
+- Use maxToRenderPerBatch to limit rendering per frame.
+
+- Use removeClippedSubviews on Android to boost performance.
+
+- Use getItemLayout if item height is fixed for faster scroll-to-index.
+
+**🧰 When to Use FlatList vs ScrollView**
+
+Short, static content - ScrollView  
+
+Long, dynamic lists - FlatList 
+
+Sectioned lists - SectionList 
+
 ### SectionList
 
 Renders grouped data with section headers.
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index b69d2f8..930dafd 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -46,12 +46,12 @@ const config: Config = {
               label: "TypeScript",
             },
             {
-              to: "/docs/react-native/Introduction",
-              label: "React Native",
+              to: "/docs/react/Get-Started",
+              label: "React",
             },
             {
-              to: "/docs/react-native/components",
-              label: "RN Components",
+              to: "/docs/react-native/Introduction",
+              label: "React Native",
             },
           ],
         },
@@ -100,6 +100,10 @@ const config: Config = {
               label: "TypeScript",
               to: "/docs/Typescript/intro",
             },
+            {
+              label: "React",
+              to: "/docs/React/Introduction",
+            },
             {
               label: "React Native",
               to: "/docs/react-native/introduction",