TouchableWithoutFeedback component breaks FlatList scrolling...

[rbed23]

after the App.js views are wrapped in the TouchableWithoutFeedback component, if the list becomes longer than the Item container for the FlatList, scrolling breaks...

I fixed it by wrapping the ToDoItem component in another TouchableWithoutFeedback, which makes the items 'touchable' again, allowing them to scroll...

export default function ToDoItem ({ item, pressHandler }) {

    return (
            
        **<TouchableWithoutFeedback>**
        <View style={styles.item}>
            <Text style={styles.desc}>{item.text}</Text>
            <View style={styles.marked}>
                <TouchableOpacity onPress={() => pressHandler(item.id)}>
                <Text>Done</Text>           
                </TouchableOpacity>
                {/* <Button 
                    title="Done"
                    onPress={()=> pressHandler(item.id)}/> */}
              </View>
        </View>
        **</TouchableWithoutFeedback>**

            
    )
}

However, if a user tries scrolling from the "list" view (pressing 'between' two items to scroll), then scrolling is still disabled. I havent been able to figure out how to fix that, except for minimizing the 'marginTop' style for the items (bringing them closer together)...

Any ideas on how to make any press within the App.js list view?

I tried wrapping it in another Touchable component, as well as adding a 'onStartShouldSetResponder' prop to the 'list' View, both unsuccessfully...

from App.js

    <TouchableWithoutFeedback 
      onPress={()=> {
        if (isKeyboardVisible) {
          Keyboard.dismiss();
          console.log('keyboard dismissed');
        }
      }}
      accessible={false}>
      <View 
        style={styles.container}>
        {/* {header} */}
        <Header />
        <View 
          style={styles.content}>
          {/* {add todo form} */}
          <AddToDo 
            submitHandler={submitHandler}
          />

          <TouchableWithoutFeedback
            onPress={()=>{}}>
          <View
            onStartShouldSetResponder={() => true}
            style={styles.list}>
            {/* {todo list items} */}
            <FlatList
              data={toDos}
              renderItem={( {item} ) => (
                <ToDoItem 
                  item={item} 
                  pressHandler={pressHandler}
                />
              )}
            />
          </View>
          </TouchableWithoutFeedback>
          </View>
      </View>
    </TouchableWithoutFeedback>

[VictorioMolina]

+1

[sionel]

+1

[litinskii]

+1