fix: expo react native scroll in home page and all repo link (#1896)

* fix: expo react native scroll in home page and all repo link * fix: format code
thisdot · Aug 9, 2023 · 7b8f8d7 · 7b8f8d7
1 parent 296f472
commit 7b8f8d7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 40 deletions.
diff --git a/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx b/expo-zustand-styled-components/src/components/Organization/Repositories/Repositories.tsx
@@ -28,15 +28,17 @@ const Repositories = ({
       showsVerticalScrollIndicator={false}
       keyExtractor={(item, index) => item.id + index}
       renderItem={({ item }) => <RepoCard repo={item} />}
-      ListHeaderComponent={<RepoFilter languages={languages} filteredRepoCount={repos.length} repoBtnText="New" />}
+      ListHeaderComponent={
+        <RepoFilter languages={languages} filteredRepoCount={repos.length} repoBtnText="New" />
+      }
       ListFooterComponent={
         repos.length > 0 && (
-        <Pagination
-          goToNext={goToNext}
-          goToPrev={goToPrev}
-          hasNextPage={hasNextPage}
-          hasPrevPage={hasPrevPage}
-        />
+          <Pagination
+            goToNext={goToNext}
+            goToPrev={goToPrev}
+            hasNextPage={hasNextPage}
+            hasPrevPage={hasPrevPage}
+          />
         )
       }
     />

diff --git a/expo-zustand-styled-components/src/screens/Home/Home.tsx b/expo-zustand-styled-components/src/screens/Home/Home.tsx
@@ -1,6 +1,6 @@
 import { openURL } from 'expo-linking';
 import React, { useEffect } from 'react';
-import { Text, FlatList, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { Text, TouchableOpacity, useWindowDimensions, ScrollView } from 'react-native';
 import {
   GistsStyled,
   TitleStyled,
@@ -19,6 +19,7 @@ import { useGistsStore, useTopReposStore } from '../../hooks/stores';
 
 import RepoCard from '../../components/RepoCard';
 import LoaderErrorView from '../../components/LoaderErrorView';
+import LinkButton from '../../components/LinkButton/LinkButton';
 
 const Home = () => {
   const { width } = useWindowDimensions();
@@ -36,40 +37,43 @@ const Home = () => {
 
   return (
     <SafeAreaViewStyled>
-      <ContainerStyled screenWidth={width}>
-        <GistsStyled screenWidth={width}>
-          <GistsListContainerStyled>
-            <TitleStyled>Gists</TitleStyled>
-            {gistsIsLoading || gistsError ? (
-              <LoaderErrorView error={gistsError} />
-            ) : (
-              <FlatList
-                data={gists}
-                renderItem={({ item }) => (
-                  <TouchableOpacity onPress={() => openURL(item.url)}>
+      <ScrollView>
+        <ContainerStyled screenWidth={width}>
+          <GistsStyled screenWidth={width}>
+            <GistsListContainerStyled>
+              <TitleStyled>Gists</TitleStyled>
+              {gistsIsLoading || gistsError ? (
+                <LoaderErrorView error={gistsError} />
+              ) : (
+                gists.map((item) => (
+                  <TouchableOpacity key={item.url} onPress={() => openURL(item.url)}>
                     <Text>{item.name}</Text>
                   </TouchableOpacity>
-                )}
-              />
-            )}
-          </GistsListContainerStyled>
-        </GistsStyled>
-        <RepositoriesStyled screenWidth={width}>
-          <TitleStyled>Top Repositories</TitleStyled>
-          <RepositoriesListContainerStyled>
-            {topReposIsLoading || topReposError ? (
-              <LoaderErrorView error={topReposError} />
-            ) : (
-              <>
-                <FlatList data={topRepos} renderItem={({ item }) => <RepoCard repo={item} />} />
-                <ViewAllReposButtonStyled>
-                  <Text>View all repositories</Text>
-                </ViewAllReposButtonStyled>
-              </>
-            )}
-          </RepositoriesListContainerStyled>
-        </RepositoriesStyled>
-      </ContainerStyled>
+                ))
+              )}
+            </GistsListContainerStyled>
+          </GistsStyled>
+          <RepositoriesStyled screenWidth={width}>
+            <TitleStyled>Top Repositories</TitleStyled>
+            <RepositoriesListContainerStyled>
+              {topReposIsLoading || topReposError ? (
+                <LoaderErrorView error={topReposError} />
+              ) : (
+                <>
+                  {topRepos.map((item) => (
+                    <RepoCard repo={item} key={item.id} />
+                  ))}
+                  <ViewAllReposButtonStyled>
+                    <LinkButton to={`/${topRepos[0].owner.login}`}>
+                      <Text>View all repositories</Text>
+                    </LinkButton>
+                  </ViewAllReposButtonStyled>
+                </>
+              )}
+            </RepositoriesListContainerStyled>
+          </RepositoriesStyled>
+        </ContainerStyled>
+      </ScrollView>
     </SafeAreaViewStyled>
   );
 };