FlatList not visible even if i added it in React Native - react-native

Question

I have added searchview then another row below that and then i have added flatlist in my view below the horizontal listview and i want to show it in full remaining height but it is not showing, there is also not any error in the code and also it doesn't show any error in console, here is a code :
<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>
Styles
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',
},
And here is a result, as you can see the mapview below list is not visible

Answer 1

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