fix: 리스트 일부만 렌더되는 문제 해결

inu-appcenter · Sep 30, 2021 · cc70ca8 · cc70ca8
1 parent 26d8db5
commit cc70ca8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 19 deletions.
diff --git a/src/presentation/features/booking/OptionsDetail/BookingOptionItem.tsx b/src/presentation/features/booking/OptionsDetail/BookingOptionItem.tsx
@@ -59,7 +59,7 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    padding: 8,
+    padding: 12,
   },
   highlightedText: {
     ...palette.textPrimary,

diff --git a/src/presentation/features/booking/OptionsDetail/index.tsx b/src/presentation/features/booking/OptionsDetail/index.tsx
@@ -33,7 +33,7 @@ import React, {useEffect} from 'react';
 import {StackNavigationProp} from '@react-navigation/stack';
 import SpinningRefreshButton from '../../../components/SpinningRefreshButton';
 import {BookingNavigationParams} from '../BookingScreen';
-import {RefreshControl, StyleSheet, Text, View} from 'react-native';
+import {RefreshControl, SectionList, StyleSheet, Text, View} from 'react-native';
 
 type Props = {
   route: RouteProp<BookingNavigationParams, 'BookingOptionsDetail'>;
@@ -69,13 +69,12 @@ function OptionsDetail({route, navigation}: Props) {
           <SpinningRefreshButton onPress={refreshOptions} />
         </View>
       </View>
-      <SectionGrid
-        style={palette.whiteBackground}
-        spacing={8}
+      <SectionList
+        style={styles.list}
         sections={splitItemsIntoSections(data)}
         renderItem={i => <BookingOptionItem bookingOption={i.item} />}
-        itemDimension={200}
         refreshControl={<RefreshControl refreshing={refreshing} onRefresh={refreshOptions} />}
+        initialNumToRender={data.length}
         renderSectionHeader={SectionHeader}
       />
       <ConfirmModal navigation={navigation} />
@@ -111,4 +110,8 @@ const styles = StyleSheet.create({
   spinnerContainer: {
     justifyContent: 'center',
   },
+  list: {
+    ...palette.whiteBackground,
+    flex: 0, // https://github.com/facebook/react-native/issues/15990#issuecomment-456974250
+  },
 });
diff --git a/src/presentation/features/cafeteria/Detail/index.tsx b/src/presentation/features/cafeteria/Detail/index.tsx
@@ -27,10 +27,7 @@ import {CafeteriaListDetailNavigationParams} from '../CafeteriaScreen';
 
 type Props = {
   route: RouteProp<CafeteriaListDetailNavigationParams, 'CafeteriaDetail'>;
-  navigation: StackNavigationProp<
-    CafeteriaListDetailNavigationParams,
-    'CafeteriaDetail'
-  >;
+  navigation: StackNavigationProp<CafeteriaListDetailNavigationParams, 'CafeteriaDetail'>;
 };
 
 export default function Detail({route, navigation}: Props) {
@@ -41,9 +38,7 @@ export default function Detail({route, navigation}: Props) {
   });
 
   return (
-    <ScrollView
-      style={palette.whiteBackground}
-      contentContainerStyle={styles.detailContentContainer}>
+    <ScrollView style={palette.whiteBackground} contentContainerStyle={styles.detailContentContainer}>
       <Pager menus={cafeteria.menus} />
     </ScrollView>
   );

diff --git a/src/presentation/features/cafeteria/Reorder/index.tsx b/src/presentation/features/cafeteria/Reorder/index.tsx
@@ -25,9 +25,7 @@ import ItemSeparator from '../../../components/ItemSeparator';
 import CafeteriaView from '../CafeteriaView';
 import ReorderableRow from './ReorderableRow';
 import React, {useCallback, useEffect} from 'react';
-import DraggableFlatList, {
-  RenderItemParams,
-} from 'react-native-draggable-flatlist';
+import DraggableFlatList, {RenderItemParams} from 'react-native-draggable-flatlist';
 
 function Reorder() {
   const {cafeteriaStore} = useStores();

diff --git a/src/presentation/features/support/Contacts/index.tsx b/src/presentation/features/support/Contacts/index.tsx
@@ -41,9 +41,7 @@ export default function Contacts() {
         <ContactItem
           imageSource={require('../../../res/images/potato.png')}
           title="서비스 관리자"
-          body={
-            '대부분의 문제는 서비스 개발자/관리자에게\n직접 문의하시면 빠르게 해결됩니다.'
-          }
+          body={'대부분의 문제는 서비스 개발자/관리자에게\n직접 문의하시면 빠르게 해결됩니다.'}
           buttonText="전화하기"
           action={urlOpener(`tel:${Config.contacts.serviceAdminPhoneNumber}`)}
         />