Browse Source

Ahora se renderizan los flatlist en el celular. Necesitaba tener dimensiones explicitas. Se las puse como un atributo dentro del tag de flatlist, immediatamente despues de abrit el tag.

ErnestoOrtiz2 3 years ago
parent
commit
9cca722510
1 changed files with 12 additions and 3 deletions
  1. 12
    3
      screens/main/Home_page.js

+ 12
- 3
screens/main/Home_page.js View File

1
 import React, {useState, useEffect, useRef} from 'react'
1
 import React, {useState, useEffect, useRef} from 'react'
2
-import { Button, Text, View, StyleSheet, SafeAreaView} from 'react-native'
2
+import { Button, Text, View, StyleSheet, Dimensions} from 'react-native'
3
 import {FlatList, ListViewBase } from 'react-native'
3
 import {FlatList, ListViewBase } from 'react-native'
4
 import {TouchableOpacity} from 'react-native-gesture-handler'
4
 import {TouchableOpacity} from 'react-native-gesture-handler'
5
 import {List, Divider} from 'react-native-paper'
5
 import {List, Divider} from 'react-native-paper'
132
          //});
132
          //});
133
   }
133
   }
134
 
134
 
135
+  const dimensions = Dimensions.get('window');
136
+  const screenWidth = dimensions.width;
137
+
135
   
138
   
136
   return (
139
   return (
137
       <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
140
       <ImageBackground style={styles.stdcontainer} source={require('../../assets/yellow-white.jpg')}>
138
-        <FlatList
141
+        <FlatList style={{
142
+             flex: 1,
143
+             width: screenWidth,
144
+         }}
139
           data={threads}
145
           data={threads}
140
           keyExtractor = {item => item._id}
146
           keyExtractor = {item => item._id}
141
           ItemSeparatorComponent={() => <Divider />}
147
           ItemSeparatorComponent={() => <Divider />}
153
           </TouchableOpacity>
159
           </TouchableOpacity>
154
         )}
160
         )}
155
         />
161
         />
156
-        <FlatList
162
+        <FlatList style={{
163
+             flex: 1,
164
+             width: screenWidth,
165
+         }}
157
           data={appointments}
166
           data={appointments}
158
           keyExtractor = {item => item._id}
167
           keyExtractor = {item => item._id}
159
           ItemSeparatorComponent={() => <Divider />}
168
           ItemSeparatorComponent={() => <Divider />}