React-native-gesture-handler buttons not working
cbarceloc opened this issue · 2 comments
cbarceloc commented
React-native-gesture-handler buttons located at header and flat list are not working (They did in v2). If I place react native buttons instead, they work. How can I do to make React-native-gesture-handler buttons work? Thank you
zyslife commented
@cbarceloc I've added the React-native-gesture-handler buttons to the header view, and it works.
So,I'd like you to provide a demo code.I can run the code.
cbarceloc commented
// if I use a RectButton in the example it does not show the alert
import * as React from "react";
import { View, StyleSheet, Dimensions, Text, Alert } from "react-native";
import { SceneMap } from "react-native-tab-view";
import { HScrollView } from "react-native-head-tab-view";
import { CollapsibleHeaderTabView } from "react-native-tab-view-collapsible-header";
import { RectButton } from "react-native-gesture-handler";
const FirstRoute = () => (
<HScrollView index={0}>
<View style={[styles.scene, { backgroundColor: "#ff4081" }]} />
</HScrollView>
);
const SecondRoute = () => (
<HScrollView index={1}>
<View style={[styles.scene, { backgroundColor: "#673ab7" }]} />
</HScrollView>
);
const initialLayout = { width: Dimensions.get("window").width };
export default function TabViewExample() {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: "first", title: "First" },
{ key: "second", title: "Second" }
]);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute
});
return (
<CollapsibleHeaderTabView
renderScrollHeader={() => (
<View style={{ paddingTop: 100, height: 200, backgroundColor: "red" }}>
<RectButton onPress={() => Alert.alert("hello")}>
<Text>PRESS HERE</Text>
</RectButton>
</View>
)}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={initialLayout}
/>
);
}
const styles = StyleSheet.create({
scene: {
flex: 1
}
});
// package.json
{
"main": "index.js",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"start": "react-native start",
"test": "jest",
"debug": "open 'rndebugger://set-debugger-loc?host=localhost&port=8081' ",
"start:android:development": "react-native run-android",
"start:android:developmentrelease": "react-native run-android --variant developmentrelease",
"start:android:beta": "react-native run-android --variant betarelease",
"start:android:production": "react-native run-android --variant productionrelease",
"start:ios:development": "react-native run-ios --scheme 'danceInDevelopment'",
"start:ios:beta": "react-native run-ios --scheme 'danceInBeta'",
"start:ios:production": "react-native run-ios --scheme 'danceIn'",
"distribute:android:development": "cd android && fastlane distribute env:'dev'",
"distribute:android:beta": "cd android && fastlane distribute env:'beta'",
"distribute:android:production": "cd android && fastlane distribute env:'prod'",
"distribute:ios:development": "cd ios && fastlane distribute env:'dev'",
"distribute:ios:beta": "cd ios && fastlane distribute env:'beta'",
"distribute:ios:production": "cd ios && fastlane distribute env:'prod'"
},
"dependencies": {
"@hookform/resolvers": "^1.3.2",
"@invertase/react-native-apple-authentication": "^2.1.1",
"@miblanchard/react-native-slider": "^1.5.0",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-native-community/google-signin": "^4.0.3",
"@react-native-community/viewpager": "5.0.11",
"@react-native-firebase/app": "^12.7.3",
"@react-native-firebase/auth": "^12.7.3",
"@react-native-firebase/crashlytics": "^12.7.3",
"@react-native-firebase/installations": "^12.7.3",
"@react-native-firebase/messaging": "^12.7.3",
"@react-native-masked-view/masked-view": "0.2.4",
"@react-navigation/bottom-tabs": "^6.0.1",
"@react-navigation/material-top-tabs": "^6.0.1",
"@react-navigation/native": "^6.0.1",
"@react-navigation/stack": "^6.0.1",
"axios": "^0.20.0",
"buffer": "^6.0.3",
"color": "^3.1.3",
"dinero": "^1.0.1",
"dinero.js": "^1.8.1",
"expo": "^42.0.0",
"expo-image-manipulator": "~9.2.2",
"expo-image-picker": "~10.2.2",
"expo-linear-gradient": "~9.2.0",
"expo-linking": "~2.3.1",
"expo-localization": "~10.2.0",
"expo-location": "~12.1.2",
"expo-splash-screen": "~0.11.2",
"expo-status-bar": "~1.0.4",
"expo-updates": "~0.8.2",
"geolib": "^3.3.1",
"i18next": "^19.7.0",
"ismounted": "^0.1.8",
"lodash.clonedeep": "^4.5.0",
"lodash.debounce": "^4.0.8",
"lodash.isempty": "^4.4.0",
"lodash.isequal": "^4.5.0",
"lodash.snakecase": "^4.1.1",
"lodash.throttle": "^4.1.1",
"lodash.truncate": "^4.4.2",
"moment": "^2.27.0",
"moment-duration-format": "^2.3.2",
"moment-range": "^4.0.2",
"numeral": "^2.0.6",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-hook-form": "^6.13.1",
"react-moment-proptypes": "^1.7.0",
"react-native": "0.63.4",
"react-native-animated-numbers": "^0.2.0",
"react-native-animated-pagination-dot": "^0.1.8",
"react-native-animated-spinkit": "^1.4.1",
"react-native-branch": "5.0.0",
"react-native-collapsible-tab-view": "^4.2.1",
"react-native-config": "^1.4.2",
"react-native-easy-toast": "^2.0.0",
"react-native-error-boundary": "^1.1.3",
"react-native-fast-image": "^8.3.4",
"react-native-fbsdk": "^2.0.0",
"react-native-flash-message": "^0.1.16",
"react-native-gesture-handler": "^1.10.3",
"react-native-head-tab-view": "^4.0.0-rc.13",
"react-native-hyperlink": "^0.0.19",
"react-native-image-crop-picker": "^0.36.2",
"react-native-image-pan-zoom": "^2.1.12",
"react-native-linear-gradient": "^2.5.6",
"react-native-logs": "^3.0.3",
"react-native-map-link": "^2.7.17",
"react-native-maps": "0.28.0",
"react-native-modalize": "^2.0.6",
"react-native-portalize": "^1.0.7",
"react-native-reanimated": "2.0.0",
"react-native-safe-area-context": "3.2.0",
"react-native-screens": "~3.4.0",
"react-native-simple-radio-button": "^2.7.4",
"react-native-size-matters": "^0.3.1",
"react-native-skeleton-content": "^1.0.20",
"react-native-skeleton-placeholder": "^5.0.0",
"react-native-snap-carousel": "^4.0.0-beta.6",
"react-native-svg": "12.1.1",
"react-native-svg-uri": "^1.2.3",
"react-native-swiper": "^1.6.0",
"react-native-tab-view": "^2.15.2",
"react-native-tab-view-collapsible-header": "^2.0.1",
"react-native-textinput-effects": "^0.6.1",
"react-native-typography": "^1.4.1",
"react-native-unimodules": "~0.14.5",
"react-native-web": "~0.13.12",
"react-query": "^3.5.6",
"react-redux": "^7.2.1",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"redux-devtools-extension": "^2.13.8",
"redux-reducers": "^0.3.0",
"slugid": "^2.0.0",
"snakecase-keys": "^3.2.1",
"styled-components": "^4.4.1",
"use-deep-compare-effect": "^1.6.1",
"yup": "^0.32.8"
},
"devDependencies": {
"@babel/core": "~7.9.0",
"@welldone-software/why-did-you-render": "^6.2.1",
"babel-jest": "~25.2.6",
"babel-plugin-module-resolver": "^4.0.0",
"eslint": "^7.21.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-airbnb-base": "^14.0.0",
"eslint-config-prettier": "^6.5.0",
"eslint-import-resolver-babel-module": "^5.2.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"jest": "~25.2.6",
"prettier": "^1.19.1",
"react-native-dotenv": "^0.2.0",
"react-native-svg-transformer": "^0.14.3",
"react-query-native-devtools": "^0.3.2",
"react-test-renderer": "~16.13.1"
},
"jest": {
"preset": "react-native"
},
"private": true
}