Inconsistent behavior of Carousel on platform IOS vs Android when inside a Material Top Tab

[DexIlaganDev]

Describe the bug I created a second level nested Material Top Tab inside a first level Material Top Tab, Added the carousel on the second page, on IOS you can swipe the carousel image to horizontally change the current image but on Android this is not doable, when you swipe the carousel it goes or transitions to the next tab.

To Reproduce Steps to reproduce the behavior: 1.Create a Material Top Tab and inside the first page or tab, add a nested Material Top Tab again and inside, create 3 tabs of pages again. 2. Create a carousel on the 2nd page of the 2nd level Material Top Tab. 2. Swipe the carousel left or right 3. On IOS you can swipe the carousel with no problem, but on Android when you swipe the carousel it goes to either the left tab or the right tab depending on how you swipe and it does not allow swiping of the carousel. 4. Sending video

App.js

import { Dimensions, StyleSheet, Text, View, Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Carousel from 'react-native-reanimated-carousel';

export default function App() {
  return (
    <NavigationContainer>
        <FirstTab />
    </NavigationContainer>
  );
}



const Tab = createMaterialTopTabNavigator();
function FirstTab () {

  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  )

}


function HomeScreen () {

  return (
      <SecondTab />
  ) 

}

function SettingsScreen () {

  return (
    <View>
      <Text>Settings</Text>
    </View>
  ) 

}

const TabsTwo = createMaterialTopTabNavigator();
function SecondTab () {

  return (
    <TabsTwo.Navigator>
      <TabsTwo.Screen name="Page1" component={Page1} />
      <TabsTwo.Screen name="Slider" component={Slider} />
      <TabsTwo.Screen name="Page3" component={Page3} />
    </TabsTwo.Navigator>
  )

}

function Page1 () {
  return (
    <View>
      <Text>Page1</Text>
    </View>
  )
}


function Slider () {
  const width = Dimensions.get('window').width;

  //mock images
  const entries = [
    {
      title: 'Image 1',
      image: {uri:'https://picsum.photos/id/237/200/300'},
    },
    {
      title: 'Image 2',
      image: {uri:'https://picsum.photos/seed/picsum/200/300'},
    }
  ];

const renderItem = ({item}) => {
    return (
        <View style={{flex:1,borderWidth:1,borderColor:'red'}}>
            <Image resizeMode='cover' style={{width:'100%', height:50,flex:1}} source={item.image} />
        </View>
    );
}

  return (
    <View style={{ flex: 1}}>
            <Carousel
                loop
                width={width}
                height={width / 2}
                autoPlay={true}
                data={entries}
                scrollAnimationDuration={1000}
                onSnapToItem={(index) => console.log('current index:', index)}
                renderItem={renderItem}
            />
            <Text>Image</Text>
    </View>
  )
}

function Page3 () {
  return (
    <View>
      <Text>Page3</Text>
    </View>
  )
}

Screenshots Videos:

ANDROID ISSUE BUG: https://youtube.com/shorts/o4EAb3h8pwo?feature=share IOS Correct Behavior : https://youtube.com/shorts/tABuOZTDKfY

Versions: "@react-navigation/material-top-tabs": "^6.5.3", "@react-navigation/native": "^6.1.3", "expo": "~47.0.12", "expo-status-bar": "~1.4.2", "react": "18.1.0", "react-native": "0.70.5", "react-native-gesture-handler": "~2.8.0", "react-native-pager-view": "6.0.1", "react-native-reanimated": "~2.12.0", "react-native-reanimated-carousel": "^3.3.0", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-tab-view": "^3.3.4"

Smartphone (please complete the following information):

• Device: IPhone7
• Device: Android (any)

[nachovillaverde]

@DexIlaganDev Did you find a workaround for this behaviour?

[DexIlaganDev]

@nachovillaverde nope