FlatList that renders components that contain FlatList - react-native

Question

I am having trouble getting an 'nested' FlatList to scroll. I have disabled the parent FlatList scrolling by passing scrollEnabled = {false} but that had no effect. I think the parent FlatList is intercepting the scroll events and I have not been able to find anything online that could be a possible solution.
export const createStyles = () => {
return {
baseStyles: {
height: 70,
overflow: 'hidden',
width: 200,
paddingHorizontal: 5,
borderWidth: 2,
borderColor: StyleConst.colors.grey.lighter3,
borderRadius: 3,
},
};
};
export const createItemStyle = (index, len) => {
console.log(index, len);
if (index !== len - 1) {
return {
borderBottomColor: StyleConst.colors.grey.lighter2,
borderBottomWidth: 1,
width: 150,
}
}
}
export class Dropdown extends Component {
static propTypes = {
data: arrayOf(object),
handleChange: func,
valueExtractor: func.isRequired,
}
renderItem = (item) => {
return (
<TouchableWithoutFeedback onPress={() => this.props.handleChange(this.props.valueExtractor(item))}>
<View key = {item.id}>
<Text>
{item.item.value}
</Text>
</View>
</TouchableWithoutFeedback>
)
}
render() {
const styles = createStyles();
return (
<View style={styles.baseStyles}>
<FlatList
data={this.props.data}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
onScrollBeginDrag={() => console.log("start")}
/>
</View>
)
}
}