Can't reuse my component, it shows just 1 time-CodePudding

For some reason when I call my component TouchSelect for the second time it doesn't show up so I can't reuse it. I've reused components many times before so I'm really puzzled by this. It seems the problem is related on FlatList because if I do the same but with map function, everything works perfectly and I can reuse my component with no problem.

I also noted that if I insert a text below the TouchSelect component I can't see it, if I place my text before the component I see it with no problem. Here it is the repository: https://github.com/Themrpie/surveyapp

export default function App() {

  

  return (
    <SafeAreaView style={styles.container}>
      <RadioSelect />
      <ChipSelect/>
      <Stars/>      
      <TouchSelect question='How likely are you to recommend our company?' />
      <TouchSelect question='THIS DOESNT SHOW' />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    
    
  },
  texto: {
    justifyContent:'center'
  }
});

Just in case I'm also posting the full code component:

import { FlatList, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import React, { useState } from 'react'
import { MD2Colors, Surface } from 'react-native-paper'

const options = [
    {
        id: 1,
        option: 1
    },
    {
        id: 2,
        option: 2
    },
    {
        id: 3,
        option: 3
    },
    {
        id: 4,
        option: 4
    },
    {
        id: 5,
        option: 5
    },
    {
        id: 6,
        option: 6
    },
    {
        id: 7,
        option: 7
    }, 
    {
        id: 8,
        option: 8
    },
    {
        id: 9,
        option: 9
    },
    {
        id: 10,
        option: 10
    },
    
   
]

const TouchSelect = ({question}) => {
    const [selected, setSelected] = useState()

  return (
      <Surface style={styles.container}>    
        <Text style={styles.question} >{question}</Text>      
         <FlatList data={options} keyExtractor={(item) => item.id} horizontal
            renderItem={({item}) =>(
                <TouchableOpacity style={ selected === item.id? [{...styles.option}, {backgroundColor:MD2Colors.lightGreen600}]: styles.option} 
                    onPress={() => setSelected(item.id)}  >
                    <Text style={styles.texto} >{item.option}</Text>
                </TouchableOpacity> )
            }
            />       
     </Surface>
  )
}

export default TouchSelect

const styles = StyleSheet.create({
    container: {
        marginVertical: 20,
        backgroundColor:'white',
        alignItems:'center'

    },
    option: {
        marginHorizontal:2,
        backgroundColor: MD2Colors.amberA200,
        padding: 8,        
        borderRadius: 100,        
        
    },
    question: {
        fontSize: 20,
        fontWeight: 'bold',
        marginBottom: 15,
        textAlign: 'center',
        
    },
    texto: {
        fontSize: 20,
        fontWeight: 'bold',
        textAlign:'center',
        
        
        
    }

})

If anybody can help me out with this issue I would be very appreciated.

CodePudding user response：

Wrap your App component in a ScrollView.

import { ScrollView } from 'react-native';  
export default function App() {

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView> // <---- Try to add this
        <RadioSelect />
        <ChipSelect/>
        <Stars/>      
        <TouchSelect question='How likely are you to recommend our company?' />
        <TouchSelect key={2} question='THIS DOESNT SHOW' />
      </ScrollView>
    </SafeAreaView>
  );
}