React native Flatlist doesn't scroll-CodePudding

I have an weather app in react native that uses react-native-app-intro-slider that is basically a vertical FlatList. This is my App render

return (
<AppIntroSlider style = {{backgroundColor:'#4c669f'}} 
   renderItem = {_renderItem} 
   data = {dataToRender} 
   showDoneButton = {false} 
   showPrevButton = {false} 
   showNextButton = {false}/>
)

And the Slider items that i'm rendering look like this

_renderItem = ( {item} ) => {
    return (
      <View style={{flex:1}}>
      <Text style={{fontSize:20, marginTop:20, color:'white',fontSize:25, alignSelf:'center'}}>{item.name}</Text>

        <View style={{ flexDirection:'row', marginTop:15, alignItems:'center', justifyContent:'center'}}>
          <Image source={{uri: 'http://openweathermap.org/img/wn/'   item.icon   '@2x.png'}} style={{width:90, height:90}}/>
          <Text style={{color:'white', fontSize:60}}>{`${_.round(item.temp)}°C`}</Text>
        </View>

        <View>
        <Text style={{alignSelf:'center', justifyContent:'center', color:'white', fontSize:20}}>{item.clouds}</Text>     
          <View style={{display:'flex', alignItems:'flex-start', marginLeft:40 }}>

          <View style={{ marginTop:40, flexDirection:'row'}}>
              <Icon name='wind' size={28}/>
              <Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.wind} km/h</Text>
          </View>
          <View style={{ marginTop:10, flexDirection:'row'}}>
              <Icon name='temperature-low' size={28} />
              <Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_min,1)} °C</Text>
          </View>
          <View style={{ marginTop:10, flexDirection:'row' }}>
              <Icon name='temperature-high' size={28} />
              <Text style={{marginLeft:5, fontSize:22, color:'white'}}>{_.round(item.temp_max,1)} °C</Text>
          </View>
          <View style={{ marginTop:10, flexDirection:'row' }}>
              <Icon name='compress-alt' size={28} />
              <Text style={{marginLeft:5, fontSize:22, color:'white'}}>{item.air_pressure} hPa</Text>
          </View>
          </View>
        </View>

          <View>
               <FlatList
                data={dataToRender16}
                renderItem={renderFlatListItem}/> 
          </View>
        
      </View>
    );
  }

And the issue is that the FlatList in the rendered item (in the second code snippet) is not scrolling down, I've tried changing some styles but none of that worked

CodePudding user response：

First of your dataToRender16 must have some unique id ,and you must add keyExtractor to your FlatList. checkout the following example:

  <FlatList
    keyExtractor={(item, index) => item.id}
    data={dataItems}
    renderItem={itemData => (
      <ItemComponent
        id={itemData.item.id}
        onDelete={removeItemHandler}
        title={itemData.item.value}
      />
    )}
  />

CodePudding user response：

Adding flex:1 to styles of the that FlatList is netsted is solved the issue

          <View style={{flex:1, alignItems:'center', paddingTop:50}}>
               <FlatList
                data={dataToRender16 }
                renderItem={renderFlatListItem}/>        
          </View>