FlatList/ScrollView doesn't scroll between Touchables

Question

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.

Answer 1

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.