Estou fazendo uma tela aqui e quero exibir uma lista de especialidades médicas, só que não quero ter que fazer isto manualmente, então implementei o FlatList só que apesar de estar recebendo as informações, nada é renderizado. Já alterei o tamanho da view, coloquei borda, mudei o conteúdo a ser renderizado e nada.
import React, { Component } from 'react';
import { StyleSheet, Text, View,Image, Button } from 'react-native';
import { useNavigation } from '@react-navigation/native'
import { TextInput, RectButton, TouchableWithoutFeedback, ScrollView, TouchableNativeFeedback, FlatList } from 'react-native-gesture-handler';
import { Entypo } from '@expo/vector-icons';
import { Ionicons } from '@expo/vector-icons';
const specialties = [
"Dentista",
"Geriatra",
"Otorrino",
"Ginecologista",
"Dermatologista",
"Psicanalista",
"Psiquiatra",
"Oftalmologista",
"Pediatra",
"Clínico Geral",
"Cardiologista",
"Nutricionista",
"Urologista",
]
const initialState = {
specialty: "",
name: "",
city: "",
specialties: [...specialties]
}
export default class DocList extends Component {
state = {
...initialState
}
showSpecialty = (specialty) => {
let s = <RectButton style = {styles.specialtyBox}>
<Text style = {styles.specialty}>
teste
</Text>
</RectButton>;
return s;
}
render() {
return (
<View style={styles.container}>
<View style = {styles.top}>
<TouchableWithoutFeedback style = {{marginRight: 10,marginTop:10}}>
<Text style = {styles.buttonText}>HomeDoc</Text>
</TouchableWithoutFeedback>
</View>
<View style = {styles.content}>
<View style = {styles.body}>
<Text style = {styles.title}>Encontre seu Médico</Text>
<View style = {styles.inputBox}>
<Entypo name="key" size={24} color="#007575" style = {{marginLeft:5}}/>
<TextInput style = {styles.input} placeholder = "Digite o nome do seu médico"></TextInput>
</View>
<View style = {styles.specialityContainer}>
<FlatList
data = {this.state.specialties}
horizontal = {true}
keyExtractor = {(item,index) => `${index}`}
renderItem = {({item}) => {
<RectButton style = {styles.specialtyBox}>
<Text style = {styles.specialty}>
teste
</Text>
</RectButton>;
}}/>
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingVertical:25,
backgroundColor: "#28ADA6",
},
top: {
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center',
},
content: {
flex: 1,
paddingTop:20
},
body: {
width:'100%',
height: 200,
alignItems: 'center',
borderRadius: 20,
},
title: {
color: '#fff',
fontFamily: 'Archivo_700Bold',
fontSize: 20,
marginBottom:10,
},
button: {
justifyContent: 'center',
alignItems: 'center',
width: 240,
height: 50,
backgroundColor: '#007575',
borderRadius: 10,
marginTop: 10,
},
buttonText: {
color: '#fff',
fontFamily: 'Archivo_700Bold',
},
input: {
width: 200,
height:50,
backgroundColor: '#fff',
borderRadius: 10,
marginLeft: 10
},
inputBox: {
flexDirection: 'row',
justifyContent: 'flex-start',
marginHorizontal: 15,
marginVertical:10,
alignItems: 'center',
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 10,
borderColor: '#007575',
},
specialityContainer: {
height: 200,
width: '100%',
borderWidth:5,
borderColor:'red',
},
specialtyBox: {
flexDirection: 'row',
justifyContent: 'center',
alignItems:'center',
marginHorizontal: 15,
marginVertical:10,
alignItems: 'center',
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 10,
borderColor: '#007575',
},
specialty: {
width:100,
textAlign:'center'
}
});
Resolvido
O problema era a importação! Estava importando do 'react-native-gesture-handler', mudei o import para o 'react-native' e passou a funcionar!