Description
when ReanimatedSwipeable on A Page. It will cause other page jittering.
when i remove ReanimatedSwipeable. all will be ok.
ScreenRecording_06-12-2025.10-24-57_1.MP4
MainPageCode:
<ReanimatedSwipeable renderRightActions={()=>{ return ( <View style={{backgroundColor:'blue',width:100,height:100}}> <Text>123</Text> </View> ) }} > <View style={{height:100,backgroundColor:'red'}}> <Text>123</Text> </View> </ReanimatedSwipeable>
OtherPageCode:
`const data = Array.from({length:100},(_,index)=>index)
function UserTest() {
console.log("AdminFunction Render")
const flashListRef = useRef<FlashList>(null);
const renderItem = ({item}:{item:number}) => {
return <View style={{height:100,backgroundColor:'red',justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black'}}>
{item}
}
return (
<FlashList
ref={flashListRef}
data={data}
renderItem={renderItem}
maintainVisibleContentPosition={{
autoscrollToBottomThreshold:0.3,
startRenderingFromBottom:true
}}
/>
<View style={{ height:140,backgroundColor:'blue'}}>
<TextInput style={{height:100,backgroundColor:'blue'}}/>
)
}
export default UserTest;`
Steps to reproduce
add a ReanimatedSwipeable to A page
route to other page. with some conponent.like buttons on flashList
A link to a Gist , an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://snack.expo.dev/@xtayaitak/gesture-bug-test
Gesture Handler version
2.24.0
React Native version
0.76.9
Platforms
iOS
JavaScript runtime
None
Workflow
Using Expo Prebuild or an Expo development build
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
Real device
Device model
Iphone 11
Acknowledgements
Yes
Description
when ReanimatedSwipeable on A Page. It will cause other page jittering.
when i remove ReanimatedSwipeable. all will be ok.
ScreenRecording_06-12-2025.10-24-57_1.MP4
MainPageCode:
<ReanimatedSwipeable renderRightActions={()=>{ return ( <View style={{backgroundColor:'blue',width:100,height:100}}> <Text>123</Text> </View> ) }} > <View style={{height:100,backgroundColor:'red'}}> <Text>123</Text> </View> </ReanimatedSwipeable>OtherPageCode:
`const data = Array.from({length:100},(_,index)=>index)
function UserTest() {
console.log("AdminFunction Render")
const flashListRef = useRef<FlashList>(null);
const renderItem = ({item}:{item:number}) => {
return <View style={{height:100,backgroundColor:'red',justifyContent:'center',alignItems:'center',borderWidth:1,borderColor:'black'}}>
{item}
}
return (
<FlashList
ref={flashListRef}
data={data}
renderItem={renderItem}
maintainVisibleContentPosition={{
autoscrollToBottomThreshold:0.3,
startRenderingFromBottom:true
}}
/>
<View style={{ height:140,backgroundColor:'blue'}}>
<TextInput style={{height:100,backgroundColor:'blue'}}/>
)
}
export default UserTest;`
Steps to reproduce
A link to a Gist, an Expo Snack or a link to a repository based on this template that reproduces the bug.
https://snack.expo.dev/@xtayaitak/gesture-bug-test
Gesture Handler version
2.24.0
React Native version
0.76.9
Platforms
iOS
JavaScript runtime
None
Workflow
Using Expo Prebuild or an Expo development build
Architecture
New Architecture (Fabric)
Build type
Debug mode
Device
Real device
Device model
Iphone 11
Acknowledgements
Yes