Flatlist is not rendering - React Native

Question

I’m making a screen here and I want to display a list of medical specialties, only I don’t want to have to do this manually, so I implemented Flatlist only though I’m getting the information, nothing is rendered. I’ve already changed the view size, I’ve put border, I’ve changed the content to be rendered and nothing.

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'
    }
  });
  

Solved

The problem was the import! I was importing from the 'React-Native-Gesture-Handler', I changed the import to the 'React-Native' and started working!

Answer 1

Sorry, I was using a project I already had and I saw that I was pulling my data and not yours

1. Create a folder called data.js and save the data

   const specialties = {
   
    docs:[ 
        {
            id:1, 
            especialidade:"Dentista"
        },
        {
            id:2, 
            especialidade:"Geriatra"
        },
        {
            id:3,
            especialidade:"Otorrino"
        },
    ]
   }
   
   export {specialties}
   

2. Import to your page where you want to get the data

   import {specialties} from './data'

Now then you will add before the render()

`

 state = {
     ...initialState,
     docs:[]  <-- add
 }

`

componentDidMount(){
    this.loadProduct();
}

loadProduct = async() => {
    const res = specialties

    const {docs} = res

    this.setState({docs})
    // console.log(docs)
}

renderItens = ({item}) =>(
    <Text>{item.especialidade}</Text>
)

3. now just add that to the flatList

`

<FlatList
    data = {this.state.docs}
    horizontal = {true}
    keyExtractor = {(item,index) => `${index}`}
    renderItem = {this.renderItens}
 />

`