Nisha Shree
Nisha Shree

Reputation: 1

How to give testID to flatList wrapped inside ScrollView

const TableViewComponent = ({
  tableHead,
  tableData,
  onPressColumn,
  activeTab,
  verticalTestID,
  horizontalTestID,
}) => {
  return (
    <View style={styles.container}>
      {activeTab == 0 ? (
        <View>
          <TouchableOpacity onPress={onPressColumn} style={styles.button}>
            <Column />
            <Text style={{ paddingStart: 5, color: "#EF314C" }}>
              Column Options
            </Text>
          </TouchableOpacity>
          <ScrollView horizontal={true} testID={horizontalTestID} nestedScrollEnabled={true}>
            <View style={styles.tableContainer}>
              {tableHead?.length > 0 && (
                <Table>
                  <Row
                    data={tableHead}
                    style={styles.header}
                    widthArr={Array(tableHead.length - 1).fill(130)}
                    textStyle={{ ...styles.text, color: "#EF314C", padding: 5 }}
                    borderStyle={{ borderWidth: 1, borderColor: colors.GREY }}
                  />
                </Table>
              )}
              {tableData?.length >= 0 && (
                <FlatList
                  style={styles.dataWrapper}
                  contentContainerStyle={{ flexGrow: 1 }}
                  nestedScrollEnabled={true}
                  keyboardShouldPersistTaps="handled"
                  data={tableData}
                  keyExtractor={(item, index) => index.toString()}
                  renderItem={({ item: rowData, index }) => (
                    <View style={{ borderWidth: 1, borderColor: colors.GREY }}>
                      <Row
                        key={index}
                        data={rowData}
                        widthArr={Array(rowData.length - 1).fill(130)}
                        style={styles.row}
                        textStyle={styles.text}
                      />
                    </View>
                  )}
                />

              )}
            </View>
          </ScrollView>
        </View>
      ) : (
        ""
      )}
    </View>
  );
};

TableViewComponent is a custom component. I am able to scroll horizontally but not vertically because the FlatList is wrapped inside a ScrollView.

ScrollView handles horizontal scrolling. FlatList is used for vertical scrolling. After adding testIDs: Horizontal scrolling works automatically. Vertical scrolling does not work in Detox automation testing.

How can I assign testIDs in a way that allows Detox automation testing to scroll both vertically and horizontally automatically, without modifying the rendering logic?

Upvotes: 0

Views: 12

Answers (0)

Related Questions