search

react-navigation / react-navigation

Routing and navigation for your React Native apps
https://reactnavigation.org
23.48k stars 5.01k forks source link

Carousel manuel swipe not working with react-navigation/material-top-tabs #11336

Open Jasermon opened 1 year ago

Jasermon commented 1 year ago

Current behavior

Describe the bug Actually I'm not sure how to explain it. I am using react-navigation/material-top-tabs in my project. I have placed the carousel on my homepage but the manual swipe is not working properly.

...
return (
    <Tab.Navigator
      screenOptions={{
        swipeEnabled: true,
      }}
...

If swipeEnabled is true, manual swipe is not working properly. If swipeEnabled is false, manual swipe is working perfectly.

https://user-images.githubusercontent.com/20345854/232549310-01a78431-cd61-43b2-bd49-ab7ef81fbe98.mp4

Expected behavior

Top Tabs must respect content for swipe action.

https://user-images.githubusercontent.com/20345854/232549410-bc83cf57-30ac-420c-b48b-7445831aab5e.mp4

Reproduction

https://snack.expo.dev/@lesques/material-top-tabs-and-carousel

Platform

Packages

Environment

"dependencies": {
  "@react-native-async-storage/async-storage": "1.17.11",
  "@react-navigation/bottom-tabs": "^6.5.7",
  "@react-navigation/material-top-tabs": "^6.6.2",
  "@react-navigation/native": "^6.1.6",
  "@react-navigation/native-stack": "^6.9.12",
  "@react-navigation/stack": "^6.3.16",
  "@types/react-native": "^0.71.5",
  "expo": "^48.0.10",
  "expo-splash-screen": "^0.18.1",
  "expo-status-bar": "~1.4.4",
  "react": "18.2.0",
  "react-native": "0.71.6",
  "react-native-appearance": "^0.3.4",
  "react-native-event-listeners": "^1.0.7",
  "react-native-gesture-handler": "~2.9.0",
  "react-native-ico-material-design": "^3.3.1",
  "react-native-pager-view": "6.1.2",
  "react-native-paper": "^5.6.0",
  "react-native-reanimated": "~2.14.4",
  "react-native-reanimated-carousel": "^3.3.0",
  "react-native-safe-area-context": "4.5.0",
  "react-native-screens": "~3.20.0",
  "react-native-svg": "13.4.0",
  "react-native-tab-view": "^3.5.1",
  "react-native-vector-icons": "^9.2.0",
  "touch": "^3.1.0"
},
Jasermon commented 1 year ago

Expo snack updated. It didn't work properly before, but now it does.

sagarj-iprogrammer commented 1 year ago

tabBarItemStyle:{ width:'auto' }, not showing tabBarIndicatorStyle: { backgroundColor: 'green', height: '100%', borderBottomWidth: 2, borderBottomColor: 'red', }, for dynamic tabs react native 0.72.2

DarioBuljovcic commented 1 month ago

hey did you find a way to fix this?