I have a FlatList that contains Touchables as its renderItems. For some reason, unless you start the scroll on one of the touchables, then the scroll doesn't work. That is, if I click the space between items (the padding/margin) and try to scroll, it doesn't work.
<Modal
onStartShouldSetResponder={() => true}
animationType="slide"
transparent={true}
visible={modalVisible}>
<View onStartShouldSetResponder={() => true} style={styles.modalView}>
<Text style={styles.modalText}>Comments</Text>
<FlatList
onStartShouldSetResponder={() => true}
data={comments}
renderItem={(item) => {
return <Comment key={item.item.text} item={item.item} />;
}}></FlatList>
</View>
</Modal>
As you can see, I tried putting onStartShouldSetResponder everywhere, but it doesn't seem to do anything.
For reference, this is what the Comment component looks like:
const Comment = ({item}) => {
console.log('NOTHING MAKES SENSSEEE');
console.log('comment id, cluck id', item.cluck, data.id, data.username);
return (
<View key={item.text} style={styles.commentWrapperStyle}>
<View style={{flex: 1, flexDirection: 'row'}}>
<Image
source={{
uri: item.user.photoURL,
}}
style={styles.profileStyle}
/>
<TouchableOpacity
onPress={() => {
setReplyPlaceholder(`Reply to ${item.user.name}`);
inputEl.current.focus();
setSendFunction(
() =>
function (event) {
if (event.nativeEvent.text.trim() !== '') {
const user = firebase.auth().currentUser;
var db = firebase.firestore();
const id = 'UbWIMWFCOGbs00S2ZcPN';
const newReplies = item.replies + 1;
console.log(item.replies, item.children);
item.children.push({
user: {
name: user.displayName,
photoURL: user.photoURL,
userId: user.uid,
},
cluck: data.id,
text: event.nativeEvent.text,
likes: 2,
});
db.collection('comments').doc(id).update({
replies: newReplies,
children: item.children,
});
setComment('');
}
},
);
}}
style={{}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<Text style={styles.textBold}>{item.user.name}</Text>
<Text style={styles.textBold}>
{renderPostTime(new Date(), item.date)}
</Text>
</View>
<Text style={styles.commentTextStyle}>{item.text}</Text>
</TouchableOpacity>
</View>
<RepliesButton item={item} />
</View>
);
};
Starting the scroll on the image doesn't do anything either. For some reason, the scroll only responds to the Touchable.
I fixed it, with generous use of the gesture responder system: https://reactnative.dev/docs/gesture-responder-system.
Specifically, I had to replace my FlatList with a View wrapped in a scrollview. The View had the prop onMoveShouldSetResponder={(evt)=>true}:
<ScrollView>
<View onMoveShouldSetResponder={(evt)=>true}>
...
</View>
</ScrollView>
My original TouchableWithoutFeedback that wrapped everything I had to replace with another
<View onStartShouldSetResponder={()=>{
setState(true);
return false;
}}
>
...
</View>
The setState before returning false was important, because it let me do what I wanted to do, without stopping ScrollView from taking control of the touch if it needed to.
Anyway, all this broke my internal Touchable that I originally had as the renderItem components, so I had to replace those as well with similar Views with response props.