TouchableOpacity doesn't work in the sticky part of the header.

[hp9784587468]

TouchableOpacity is not detecting click in android. Working fine on iOS

• "react-native": "0.60.0"

• "@monterosa/react-native-parallax-scroll": "^1.8.0"

• Android Issue

• Updating react-native version is not an option in the project.

<ParallaxScroll
          headerHeight={(width * 300) / 414}
          parallaxHeight={(width * 300) / 414 + 35}
          isHeaderFixed={false}
          fadeOutParallaxBackground={true}
          fadeOutParallaxForeground={true}
          renderHeader={({ animatedValue }) => (
            <View
              style={{
                flex: 1,
                flexDirection: "column",
                height: (width * 300) / 414 + 35,
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                  height: (width * 300) / 414,
                  backgroundColor: color.white,
                }}
              >
                <VideoLibraryHeader {...headerProps} />
              </View>
              <View
                style={{
                  flexDirection: "row",
                  height: 35,
                  backgroundColor: color.white,
                }}
              >
                <View
                  style={{
                    flex: 1,
                    height: 35,
                    flexDirection: "row",
                    justifyContent: "center",
                    alignContent: "center",
                    alignItems: "center",
                    borderBottomWidth: 2,
                    borderBottomColor:
                      this.state.selected_tab_index == 0
                        ? colorNew.darkPink
                        : "#efefef",
                  }}
                >
                  <TouchableOpacity
                    style={{ flex: 1 }}
                    onPress={() => {
                      this.setState(
                        {
                          selected_tab_index: 0,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: "SF Pro Text",
                        fontSize: 13,
                        fontWeight: "700",
                        fontStyle: "normal",
                        lineHeight: 30,
                        letterSpacing: 0.1,
                        textAlign: "center",
                        color:
                          this.state.selected_tab_index == 0
                            ? colorNew.darkPink
                            : color.darkGrey,
                      }}
                    >
                      {"workouts".toUpperCase()}
                    </Text>
                  </TouchableOpacity>
                </View>
                <View
                  style={{
                    flex: 1,
                    flexDirection: "row",
                    justifyContent: "center",
                    alignContent: "center",
                    alignItems: "center",
                    borderBottomWidth: 2,
                    borderBottomColor:
                      this.state.selected_tab_index == 1
                        ? colorNew.darkPink
                        : "#efefef",
                  }}
                >
                  <TouchableOpacity
                    style={{ flex: 1 }}
                    onPress={() => {
                      this.setState(
                        {
                          selected_tab_index: 1,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: "SF Pro Text",
                        fontSize: 13,
                        fontWeight: "700",
                        fontStyle: "normal",
                        lineHeight: 30,
                        letterSpacing: 0.1,
                        textAlign: "center",
                        color:
                          this.state.selected_tab_index == 1
                            ? colorNew.darkPink
                            : color.darkGrey,
                      }}
                    >
                      {"recovery".toUpperCase()}
                    </Text>
                  </TouchableOpacity>
                </View>
                <View
                  style={{
                    flex: 1,
                    flexDirection: "row",
                    justifyContent: "center",
                    alignContent: "center",
                    alignItems: "center",
                    borderBottomWidth: 2,
                    borderBottomColor:
                      this.state.selected_tab_index == 2
                        ? colorNew.darkPink
                        : "#efefef",
                  }}
                >
                  <TouchableOpacity
                    style={{ flex: 1 }}
                    onPress={() => {
                      this.setState(
                        {
                          selected_tab_index: 2,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: "SF Pro Text",
                        fontSize: 13,
                        fontWeight: "700",
                        fontStyle: "normal",
                        lineHeight: 30,
                        letterSpacing: 0.1,
                        textAlign: "center",
                        color:
                          this.state.selected_tab_index == 2
                            ? colorNew.darkPink
                            : color.darkGrey,
                      }}
                    >
                      {"how to".toUpperCase()}
                    </Text>
                  </TouchableOpacity>
                </View>
                <View
                  style={{
                    flex: 1,
                    flexDirection: "row",
                    justifyContent: "center",
                    alignContent: "center",
                    alignItems: "center",
                    borderBottomWidth: 2,
                    borderBottomColor:
                      this.state.selected_tab_index == 3
                        ? colorNew.darkPink
                        : "#efefef",
                  }}
                >
                  <TouchableOpacity
                    style={{ flex: 1 }}
                    onPress={() => {
                      this.setState(
                        {
                          selected_tab_index: 3,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }}
                  >
                    <Text
                      style={{
                        fontFamily: "SF Pro Text",
                        fontSize: 13,
                        fontWeight: "700",
                        fontStyle: "normal",
                        lineHeight: 30,
                        letterSpacing: 0.1,
                        textAlign: "center",
                        color:
                          this.state.selected_tab_index == 3
                            ? colorNew.darkPink
                            : color.darkGrey,
                      }}
                    >
                      {"youtube".toUpperCase()}
                    </Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
          )}
        >
          <View
            style={{
              flex: 1,
              marginBottom: 50,
              backgroundColor: color.white,
            }}
          >
            <SwipeGesture
              gestureStyle={{
                backgroundColor: color.white,
              }}
              onSwipePerformed={(action) => {
                let selected = this.state.selected_tab_index;

                switch (action) {
                  case "left": {
                    console.log("left Swipe performed");
                    if (selected >= 0 && selected <= 3) {
                      this.setState(
                        {
                          selected_tab_index: selected + 1,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }

                    break;
                  }
                  case "right": {
                    console.log("right Swipe performed");
                    if (selected >= 0 && selected <= 3) {
                      this.setState(
                        {
                          selected_tab_index: selected - 1,
                        },
                        () => {
                          this.getData();
                        }
                      );
                    }
                    break;
                  }
                  case "up": {
                    console.log("up Swipe performed");
                    break;
                  }
                  case "down": {
                    console.log("down Swipe performed");
                    break;
                  }
                  default: {
                    console.log("Undeteceted action");
                  }
                }
              }}
            >
              {this.state.selected_tab_index == 0 ? (
                this._renderFlatlist(this.state.menuArray)
              ) : this.state.selected_tab_index == 1 ? (
                this._renderFlatlist(this.state.recoveryData)
              ) : this.state.selected_tab_index == 2 ? (
                this._renderFlatlist(this.state.howtoData)
              ) : this.state.selected_tab_index == 3 ? (
                this._renderFlatlist(this.state.youtubeData)
              ) : (
                <Text>{""}</Text>
              )}
            </SwipeGesture>
          </View>
        </ParallaxScroll>

[MursiDirect]

Hi @hp9784587468 , I hope you have found some solution for this issue, cause I am still facing it.