I have spent hours trying to understand why my flat list refuses to scroll. I have see many solutions about adding "flexGrow: 1" to the contentContainerStyle prop of the list, sadly that doesnt solve for me here. I have tried many variations of using flex/flexGrow: 1 in the style prop too, but still no scrolling. I attach what my code for this page looks like:
import React, { Component } from "react";
import { Dimensions, FlatList, View, StyleSheet, TouchableOpacity } from "react-native";
import { Button, Block, Text } from "galio-framework";
import Theme from "../../constants/Theme";
import { StatusBar } from "expo-status-bar";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
import SvgCarIcon from "../../components/SvgCarIcon";
import DashIcons from "../../components/DashIcons";
export default class MakePayment extends Component {
constructor(props) {
super(props);
this.state = {
source: {
latitude: 0,
longitude: 0,
latitudeDelta: 0.005,
longitudeDelta: 0.005
},
rideOptions: [
{
title: "Ride A",
passengers: 4,
arrivalTime: "10:00 - 10:07 arrival",
price: "5.00",
isSelected: false
},
{
title: "Ride B",
passengers: 7,
arrivalTime: "10:00 - 10:07 arrival",
price: "7.50",
isSelected: false
},
{
title: "Ride C",
passengers: 6,
arrivalTime: "12:00 - 13:30 arrival",
price: "3.50",
isSelected: false
}
]
};
}
toggleOption = (INDEX) => {
let updatedRideOptions = this.state.rideOptions.slice().map((item, index) => {
INDEX === index ? item["isSelected"] = !item["isSelected"] : item["isSelected"] = false
return item;
})
this.setState({rideOptions: updatedRideOptions}, () => console.log(this.state.rideOptions));
}
componentDidMount() {
let { lat, lng } = this.props.route.params.source.geometry.location;
this.setState({
source: {
...this.state.source,
latitude: lat,
longitude: lng
}
}, () => console.log(this.state.source));
}
render() {
return (
<View style={styles.container}>
<StatusBar hidden/>
<MapView
provider={PROVIDER_GOOGLE}
showsCompass={true}
showsUserLocation={true}
style={styles.map}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
region={this.state.source}
/>
<View style={styles.menuContainer}>
<Text style={styles.header}>Time To Pick A Dash!</Text>
<FlatList
contentContainerStyle={{
width: "90%",
flexGrow: 1,
alignItems: "center",
borderColor: "red",
borderStyle: "solid",
borderWidth: 2
}}
scrollEnabled={true}
keyExtractor={((item, index) => String(index))}
data={this.state.rideOptions}
renderItem={({ item , index}) => {
return (
<TouchableOpacity
activeOpacity={0.9}
style={[styles.dashRideBox, item.isSelected && styles.btnSelected]}
onPress={() => this.toggleOption(index)}
>
<SvgCarIcon color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY}/>
<Block style={{ paddingRight: 25 }}>
<Text size={18} color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY}>{item.title}
<Text small style={item.isSelected && styles.textSelected}>{item.passengers}</Text>
</Text>
<Text size={14} style={item.isSelected ? styles.textSelected : styles.subText}>{item.arrivalTime}</Text>
</Block>
<Text color={item.isSelected ? Theme.COLOURS.WHITE : Theme.COLOURS.SECONDARY} size={24}>{item.price}</Text>
</TouchableOpacity>
);
}}
/>
</View>
<Block style={styles.paymentContainer}>
<Block style={{
flex: 0.4, flexDirection: "row", alignItems: "center"
}}>
<Block style={styles.card}>
<DashIcons name={"visa"} size={40}/>
<Text size={14} color={Theme.COLOURS.SUB_TEXT} bold>VISA ***** 4700</Text>
<TouchableOpacity
style={{
flex: 1,
alignItems: "center"
}}
onPress={() => console.log("Card drop down opened...")}
>
<DashIcons name={"dropdown-arrow"} size={14} color={"grey"}/>
</TouchableOpacity>
</Block>
<Button style={styles.recent}>
<DashIcons name={"clock"} size={22}/>
</Button>
</Block>
<Button style={styles.confirmBtn} color={"#F2F2F2"}>
<Text size={24} color={Theme.COLOURS.SECONDARY}>Confirm your dash</Text>
</Button>
</Block>
</View>
);
}
}
const { width: WIDTH } = Dimensions.get("window"); //Max Width of phone screen
const { height: HEIGHT } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
fontFamily: "Roboto",
backgroundColor: Theme.COLOURS.WHITE
},
menuContainer: {
flex: 0.3,
justifyContent: "space-between",
alignItems: "center",
width: "100%",
paddingHorizontal: 10,
elevation: 1
},
dashRideBox: {
flexGrow: 0.475,
backgroundColor: Theme.COLOURS.WHITE,
width: "100%",
paddingHorizontal: 5,
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
borderRadius: 10,
elevation: 3,
shadowRadius: 10
},
map: {
flex: 0.45,
width: WIDTH
},
paymentContainer: {
marginTop: 10,
flex: 0.25,
paddingHorizontal: 10,
justifyContent: "center",
alignItems: "center",
borderStyle: "solid",
borderWidth: 2,
borderColor: "rgba(0,0,0,0.1)"
},
header: {
fontWeight: "bold",
fontSize: 18,
color: Theme.COLOURS.SUB_HEADER,
paddingVertical: 10
},
subText: {
color: Theme.COLOURS.SUB_TEXT
},
card: {
flex: 0.7,
height: 45,
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
borderRadius: 30,
backgroundColor: Theme.COLOURS.WHITE,
elevation: 5,
paddingLeft: 10
},
recent: {
flex: 0.3,
borderRadius: 30,
backgroundColor: Theme.COLOURS.WHITE,
elevation: 5,
},
confirmBtn: {
flex: 0.6,
width: 343,
borderRadius: 30,
elevation: 3
},
btnSelected: {
backgroundColor: Theme.COLOURS.BUTTON
},
textSelected: {
color: Theme.COLOURS.WHITE
}
})
Any advice as to why the list doesn't scroll?
Link to expo snack to see current state: Expo Snack