OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Reanimated Carousel blocks navigation gesture

  • Thread starter Thread starter Sheriff oladimeji
  • Start date Start date
S

Sheriff oladimeji

Guest
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

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:

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.

<p>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</p>
<pre><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>
)}
/>
</code></pre>
<p>here is the navigation code:</p>
<pre><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;

</code></pre>
<p>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.</p>
 

Latest posts

Top