Animated Flatlist automatically paging on button press ?

[serverlocal017]

Hello,

I have a Navbar at the top and if I swipe on my flatlist the indicator goes with animation to the next navigation text. it works fine, but if I press my flatlist is not going to the next page. How can I solve it ?

First Pic

After I Press on the navigation button in the top:

Code:

`import React from 'react';import { Dimensions, ListRenderItem, Pressable, StyleSheet, Text, View, Animated as An, StyleProp } from 'react-native';
import { GestureHandlerRootView, FlatList } from 'react-native-gesture-handler';
import Animated, { StyleProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';

const AnimatedFlatlist = Animated.createAnimatedComponent(FlatList);

interface IArr {
id: string;
text: string;
}

const arr: IArr[] = [
{
id: '1',
text: 'DATA'
},
{
id: '2',
text: 'SERVER'
},
{
id: '3',
text: 'Auto'
},
{
id: '4',
text: 'CENTER'
}
];

const { width, height } = Dimensions.get('window');

const renderItem: ListRenderItem = ({ item }) => {
return (

{item.text}

)
};

interface INav {
rNav: {
transform: {
translateX: number;
}[]
},
onPress: (i: number) => void;
}

const Header = ({ rNav, onPress }: INav) => {
return (

<View style={[{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-around', marginVertical: 20, backgroundColor: '#ccc',
width}]}>
{
arr.map((el, i) => (
<Pressable onPress={() => onPress(i)} key={i}>
{el.text}

))
}

<Animated.View style={[{backgroundColor: 'red', height: 8, width: width / 4}, rNav]} />

)
};

export default function App() {
const translateX = useSharedValue(0);

const gestureEvent = useAnimatedScrollHandler((e) => {
  translateX.value = e.contentOffset.x
});

const onPress = (i: number) => {
  translateX.value = i * width
};

const rNav = useAnimatedStyle(() => {
  return {
    transform: [{ translateX: translateX.value * 0.25 }]
  }
});

return (
  <GestureHandlerRootView style={s.container}>
    <Header onPress={(i) => onPress(i)} rNav={rNav} />
     <AnimatedFlatlist
       onScroll={gestureEvent} 
       keyExtractor={(item, i) => item.id}
       data={arr}
       horizontal
       pagingEnabled
       renderItem={renderItem}
     />
   </GestureHandlerRootView>
 )

}
`