refactor: Replace FlatList with View for branches tab rendering

Replaced FlatList component with a simple View and map iteration for rendering repository branches. This change simplifies the implementation by removing the need for FlatList-specific props like keyExtractor, onEndReached, and ListFooterComponent while maintaining the same functionality. The branches are now rendered using a standard map operation with proper key props for each branch item.

Author: involvex

CHANGELOG.md

@@ -1,8 +1,10 @@
+## [0.0.11](https://github.com/involvex/awesome-github-app/compare/0.0.10...0.0.11) (2026-03-09)
+
 ## [0.0.10](https://github.com/involvex/awesome-github-app/compare/0.0.9...0.0.10) (2026-03-09)
 
 ### Features
 
-- add infinite scroll pagination and notification support ([a7557fc](https://github.com/involvex/awesome-github-app/commit/a7557fc8fdb4e39e2ad034baab151da3453ab64d))
+- add infinite scroll pagination and notification support ([b56f3ec](https://github.com/involvex/awesome-github-app/commit/b56f3ec78efdee1d6fe573621a41c8e1daef39f2))
 
 ## [0.0.9](https://github.com/involvex/awesome-github-app/compare/0.0.8...0.0.9) (2026-03-09)
 

android/app/build.gradle

@@ -92,8 +92,8 @@ android {
         applicationId 'com.involvex.awesomegithubapp'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 10
-        versionName "0.0.10"
+        versionCode 11
+        versionName "0.0.11"
 
         buildConfigField "String", "REACT_NATIVE_RELEASE_LEVEL", "\"${findProperty('reactNativeReleaseLevel') ?: 'stable'}\""
     }

app.json

@@ -3,7 +3,7 @@
     "name": "awesome-github-app",
     "slug": "awesome-github-app",
     "owner": "involvex",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "orientation": "portrait",
     "userInterfaceStyle": "automatic",
     "githubUrl": "https://github.com/involvex/awesome-github-app.git",
@@ -28,7 +28,7 @@
         "backgroundColor": "#ffffff"
       },
       "userInterfaceStyle": "automatic",
-      "versionCode": 10
+      "versionCode": 11
     },
     "web": {
       "output": "single",
@@ -37,7 +37,7 @@
     },
     "ios": {
       "bundleIdentifier": "com.involvex.awesomegithubapp",
-      "buildNumber": "10",
+      "buildNumber": "11",
       "infoPlist": {
         "ITSAppUsesNonExemptEncryption": false
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "awesome-github-app",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": true,
   "keywords": [
     "github",

src/app/repo/[owner]/[repo]/index.tsx

@@ -1,6 +1,13 @@
+import {
+  useRepo,
+  useRepoTopics,
+  useRepoReadme,
+  useRepoContents,
+  useCreateFork,
+  useBranches,
+} from "../../../../lib/api/hooks";
 import {
   ActivityIndicator,
-  FlatList,
   Linking,
   Pressable,
   ScrollView,
@@ -9,14 +16,6 @@ import {
   Text,
   View,
 } from "react-native";
-import {
-  useRepo,
-  useRepoTopics,
-  useRepoReadme,
-  useRepoContents,
-  useCreateFork,
-  useBranches,
-} from "../../../../lib/api/hooks";
 import { LanguageDot } from "../../../../components/ui/LanguageDot";
 import { Markdown } from "../../../../components/ui/Markdown";
 import { useLocalSearchParams, useRouter } from "expo-router";
@@ -319,23 +318,8 @@ function BranchesTab({ owner, repo }: { owner: string; repo: string }) {
   }
 
   return (
-    <FlatList
-      data={branches}
-      keyExtractor={item => item.name}
-      contentContainerStyle={styles.tabContent}
-      onEndReached={() => {
-        if (hasNextPage && !isFetchingNextPage) fetchNextPage();
-      }}
-      onEndReachedThreshold={0.3}
-      ListFooterComponent={
-        isFetchingNextPage ? (
-          <ActivityIndicator
-            style={{ paddingVertical: 16 }}
-            color={theme.primary}
-          />
-        ) : null
-      }
-      ListEmptyComponent={
+    <View style={styles.tabContent}>
+      {branches.length === 0 ? (
         <View style={styles.emptyState}>
           <Ionicons
             name="git-branch-outline"
@@ -346,50 +330,73 @@ function BranchesTab({ owner, repo }: { owner: string; repo: string }) {
             No branches
           </Text>
         </View>
-      }
-      renderItem={({ item }) => (
-        <View
-          style={[
-            styles.branchRow,
-            { backgroundColor: theme.surface, borderColor: theme.border },
-          ]}
-        >
-          <Ionicons
-            name="git-branch-outline"
-            size={16}
-            color={theme.muted}
-          />
-          <Text
-            style={[styles.branchName, { color: theme.text }]}
-            numberOfLines={1}
+      ) : (
+        branches.map(item => (
+          <View
+            key={item.name}
+            style={[
+              styles.branchRow,
+              { backgroundColor: theme.surface, borderColor: theme.border },
+            ]}
           >
-            {item.name}
-          </Text>
-          {item.name === defaultBranch && (
-            <View
-              style={[
-                styles.branchBadge,
-                {
-                  backgroundColor: theme.primary + "20",
-                  borderColor: theme.primary,
-                },
-              ]}
-            >
-              <Text style={[styles.branchBadgeText, { color: theme.primary }]}>
-                default
-              </Text>
-            </View>
-          )}
-          {item.protected && (
             <Ionicons
-              name="lock-closed-outline"
-              size={14}
+              name="git-branch-outline"
+              size={16}
               color={theme.muted}
             />
-          )}
-        </View>
+            <Text
+              style={[styles.branchName, { color: theme.text }]}
+              numberOfLines={1}
+            >
+              {item.name}
+            </Text>
+            {item.name === defaultBranch && (
+              <View
+                style={[
+                  styles.branchBadge,
+                  {
+                    backgroundColor: theme.primary + "20",
+                    borderColor: theme.primary,
+                  },
+                ]}
+              >
+                <Text
+                  style={[styles.branchBadgeText, { color: theme.primary }]}
+                >
+                  default
+                </Text>
+              </View>
+            )}
+            {item.protected && (
+              <Ionicons
+                name="lock-closed-outline"
+                size={14}
+                color={theme.muted}
+              />
+            )}
+          </View>
+        ))
+      )}
+      {isFetchingNextPage && (
+        <ActivityIndicator
+          style={{ paddingVertical: 16 }}
+          color={theme.primary}
+        />
+      )}
+      {hasNextPage && !isFetchingNextPage && (
+        <Pressable
+          style={[
+            styles.loadMoreBtn,
+            { borderColor: theme.border, backgroundColor: theme.surface },
+          ]}
+          onPress={() => fetchNextPage()}
+        >
+          <Text style={[styles.loadMoreText, { color: theme.primary }]}>
+            Load more
+          </Text>
+        </Pressable>
       )}
-    />
+    </View>
   );
 }
 
@@ -921,6 +928,17 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: "600",
   },
+  loadMoreBtn: {
+    alignItems: "center",
+    paddingVertical: 12,
+    marginTop: 8,
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+  },
+  loadMoreText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
   breadcrumb: { marginBottom: 8 },
   breadcrumbContent: { flexDirection: "row", alignItems: "center" },
   breadcrumbItem: { flexDirection: "row", alignItems: "center" },