react-native-parallax-scroll
react-native-parallax-scroll copied to clipboard
Published
20 hours ago •
monterosalondon
monterosalondon
TouchableOpacity doesn't work in the sticky part of the header.
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>
Hi @hp9784587468 , I hope you have found some solution for this issue, cause I am still facing it.
