Closed hotaryuzaki closed 1 year ago
Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?
Hey! 👋
The issue doesn't seem to contain a minimal reproduction.
Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?
Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?
i create a new project but i cannot reproduces the issue, so maybe it relates to other libraries
Could you prepare a copy-pastable reproduction or post a link to a repository where the issue is happening?
i think i solved the issue, but i'm still not sure of the source of the issue. but from my analysis that issue relates to update state, memo function, and ripple animation, that makes RectButton not well re-render.
so here is my function component for Tab before fixing:
const TabOrders = memo(() => {
let render = [];
const status = [
{ id: 1, name: "Semua", status: "all" },
{ id: 2, name: "Pesanan Baru", status: "new" },
{ id: 3, name: "Siap Dikirim", status: "ready" },
{ id: 4, name: "Sedang Dikirim", status: "shipping" },
{ id: 5, name: "Dikomplain", status: "complain" },
{ id: 6, name: "Selesai", status: "complete" },
{ id: 7, name: "Dibatalkan", status: "cancel" }
];
status.map((record) => {
render.push(
<View
key={`tab_${record.id}`}
onLayout={event => {
const layout = event.nativeEvent.layout;
refLayout.current = {
...refLayout.current,
[record.id]: [
layout.x,
layout.y,
layout.width,
layout.height
]
};
}}
>
<RectButton
onPress={() => {
setTab(record);
setAnimate(record.id);
}}
>
<View
style={{
...styles.tabBox,
...tab.id === record.id &&
{
borderBottomColor: "red",
},
}}
>
<Text
style={{
...styles.tabTitle,
...tab.id === record.id &&
{
color: "red",
},
}}
>
{record.name}
</Text>
</View>
</RectButton>
</View>
);
});
return render;
}, () => true);
onPress will update the states, and useEffect will handle the tab animation, set state for loading overlay, and hit an API to get the data. what i do to fixing this issue is to change the memo with useCallback like here
const TabOrders = useCallback(({ tabSelected }) => {
let render = [];
const status = [
{ id: 1, name: "Semua", status: "all" },
{ id: 2, name: "Pesanan Baru", status: "new" },
{ id: 3, name: "Siap Dikirim", status: "ready" },
{ id: 4, name: "Sedang Dikirim", status: "shipping" },
{ id: 5, name: "Dikomplain", status: "complain" },
{ id: 6, name: "Selesai", status: "complete" },
{ id: 7, name: "Dibatalkan", status: "cancel" }
];
status.map((record) => {
render.push(
<View
key={`tab_${record.id}`}
onLayout={event => {
const layout = event.nativeEvent.layout;
refLayout.current = {
...refLayout.current,
[record.id]: [
layout.x,
layout.y,
layout.width,
layout.height
]
};
}}
>
<RectButton
onPress={() => {
setTab(record);
setAnimate(record.id);
}}
>
<View
style={{
...styles.tabBox,
...tabSelected.id === record.id &&
{
borderBottomColor: Colors.corporateColorRed,
},
}}
>
<OpenSansMedium
style={{
...styles.tabTitle,
...tabSelected.id === record.id &&
{
color: Colors.corporateColorRed,
},
}}
>
{record.name}
</OpenSansMedium>
</View>
</RectButton>
</View>
);
});
return render;
}, []);
and i create a new project but still i cannot reproduce the issue, i installed react navigation and the same version of gesture handler. so my analysis, is not just the memo but there is another that makes the issue occurred
guess it is related to https://github.com/software-mansion/react-native-gesture-handler/issues/2585
I'm not sure if it is related to #2585. The problem there was the cancellation of RectButtons
. You can of course check if this PR helps.
It would be great if you could prepare repro that we can copy-paste and check since provided code still contains things such as layoutRef
, setAnimate
and so on.
Description
i use RectButton or BaseButton and the touch does not work after a few clicks; sometimes it needs a lot of clicks, but sometimes not. please see the video i attached
https://github.com/software-mansion/react-native-gesture-handler/assets/17826213/79677984-1124-47ca-bc66-82f1959d1541
Steps to reproduce
Snack or a link to a repository
no
Gesture Handler version
2.9.0
React Native version
0.71.4
Platforms
Android
JavaScript runtime
V8
Workflow
Expo bare workflow
Architecture
Paper (Old Architecture)
Build type
Debug mode
Device
Real device
Device model
No response
Acknowledgements
Yes