FlatList не отображается, даже если я добавил его в React Native

Question

Я добавил searchview, затем еще одну строку ниже, а затем я добавил плоский список в моем представлении под горизонтальным списком, и я хочу показать его во всей оставшейся высоте, но он не отображается, также нет ошибок в коде а также он не показывает никаких ошибок в консоли, вот код:

 <View style={styles.mainContainer}>

    <View style={styles.searchView}>

      <TextInput
        style={styles.searchInput}
        onChangeText={text => this.SearchFilterFunction(text)}
        value={this.state.searchText}
        underlineColorAndroid="transparent"
        placeholder="Search Services"
        placeholderTextColor={theme.colors.app_blue_light}
      />

      <Image source={Images.search} style={styles.searchImage} />
    </View>

    {/* MapView */}
    <View style={styles.MapToggleContainer}>

      <Text style={styles.titleShop}>Select your shop</Text>

      <Text style={styles.titleToggle}
        onPress={this.toggleView}>List View</Text>

    </View>

    <View style={styles.shopListView}>

      <FlatList
        horizontal
        style={styles.shopsList}
        data={this.state.data}
        renderItem={({ item: rowData }) => {
          return (

            <View style={styles.shopListItem}>

              <Image source={require('./logo.png')} style={styles.shopImage} />

            </View>
          );
        }}
        keyExtractor={(item, index) => index}
      />

    </View>

    <MapboxGL.MapView>
      <MapboxGL.Camera centerCoordinate={this.state.coordinates[0]} zoomLevel={14} />

      <MapboxGL.MarkerView id='marker1' coordinate={this.state.coordinates[0]}>
        <ImageBackground source={require('./chat.png')}
          style={{ borderColor: 'black', borderWidth: 0, width: 80, height: 80, alignContent: 'center' }}>
          <TouchableOpacity style={{ width: '100%', height: '100%', alignItems: 'center', justifyContent: 'center' }}
            onPress={() => {
              this.setState({ toolTipVisible: true })
            }}>
            <Tooltip
              animated
              isVisible={this.state.toolTipVisible}
              content={<View style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
                <View style={{ flexDirection: 'row' }}>
                  <Image source={require('./chat.png')} />
                  <View style={{ flexDirection: 'column' }}>
                    <Text style={{ marginHorizontal: 10, marginTop: 10 }}>123, Main st,</Text>
                    <Text style={{ marginHorizontal: 10, marginBottom: 10 }}>Chicago, IL 6061</Text>
                  </View>
                </View>
                <TouchableOpacity
                  style={{ backgroundColor: 'orange', margin: 10, alignItems: 'center' }}
                  onPress={() => { }}
                >
                  <Text style={{ margin: 10, color: 'white' }}>Select Shop</Text>
                </TouchableOpacity>
              </View>}
              placement="top"
              onClose={() => this.setState({ toolTipVisible: false })} >

              <Text style={{ color: 'white', fontWeight: 'bold', fontSize: 20 }} >$50.00</Text>

            </Tooltip>

          </TouchableOpacity>

        </ImageBackground>

      </MapboxGL.MarkerView>

    </MapboxGL.MapView>

 </View>

Стили

mainContainer: {
      flex: 1,
      backgroundColor: theme.colors.white
    },
toggleContainer: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginTop: '20@ms',
      marginBottom:'10@ms',
      marginHorizontal: '15@ms',
    },
    titleShop: {
      fontFamily: 'Muli-Bold',
      fontSize: '16@ms',
      color: theme.colors.gray4
    },
    titleToggle: {
      fontFamily: 'Muli-Bold',
      fontSize: '11@ms',
      color: theme.colors.gray4,
      textDecorationLine: 'underline',
      alignSelf:'center'
    },
MapToggleContainer:{
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginTop: '10@ms',
      marginBottom:'15@ms',
      marginHorizontal: '15@ms',
    },
    shopListView:{
      height:'60@ms'
    },
    shopsList:{
      marginLeft:'5@ms',
      marginRight:'15@ms',
    },
    shopListItem:{
      elevation:5,
      backgroundColor:'white',
      marginLeft:'10@ms',
      height:'50@ms',
      width:'50@ms',
      alignItems:'center',
      justifyContent:'center',
      borderRadius:'5@ms'
    },
    shopImage:{
      width:'30@ms',
      height:'30@ms',
    },

И вот результат, как вы можете видеть в списке ниже карты не видно

Answer 1

присвойте height и width стиль MapboxGL.MapView

<MapboxGL.MapView style={{width:Dimensions.get("window").width,height:400}}>