I have a screen that uses reanimated carousel the screen uses material top tab navigation which reqires me to swipe to go to the next screen but the Carousel blocks that
here is the code
<Carousel
loop={false}
width={width}
height={height - 200}
autoPlay={false}
vertical
data={[image, ...images]}
scrollAnimationDuration={10}
onSnapToItem={(index) => {
setCurrentIndex(index);
if (index > 0) {
setTimeout(() => {
setOverlayVisible((prev) => {
const newVisibility = [...prev];
newVisibility[index] = false;
return newVisibility;
});
}, 5000);
}
}}
renderItem={({ item: img, index }) => (
<View style={{ flex: 1 }} key={index}>
<Image
source={{ uri: img }}
style={{
width,
height: "100%",
flex: 1,
paddingTop: 20,
}}
resizeMode="contain"
/>
<Bubble
onClick={() => refRBSheet.current[2].open()}
imageIndex={index === 0 ? -1 : index - 1}
/>
<CommentOverlay
visible={index !== 0 && overlayVisible[index]}
comments={commentsForImages[index] || []}
/>
</View>
)}
/>
here is the navigation code:
import React from "react";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";
import MangaReader from "../screens/MangaReader";
import CommentScreen from "../screens/CommentScreen";
import RecordsScreen from "../screens/RecordsScreen";
import ScreenStore from "../store/ScreenStore";
import { useRoute } from "@react-navigation/native";
const Tab = createMaterialTopTabNavigator();
const SwipeNavigation = () => {
const { secondScreen } = ScreenStore();
const route = useRoute();
const params = route.params;
return (
<Tab.Navigator
initialRouteName="Reader"
screenOptions={{
headerShown: false,
tabBarStyle: { display: "none" },
}}
>
<Tab.Screen name="Reader" component={MangaReader} />
<Tab.Screen
name={secondScreen}
component={secondScreen === "Comment" ? CommentScreen : RecordsScreen}
initialParams={params}
/>
</Tab.Navigator>
);
};
export default SwipeNavigation;
I’m trying to access second screen when i swipe right , it works when i remove carousel . I could have use other alterantive like react native swiper or snap carousel but that would cause another issue.