"Slider Jumping" issue with Expo & React Naive & NativeWind & TailwindCSS

[bohdan-heiko-solid]

Issue is reproducible only on real device (IOS) . All works fine in IOS simulator

Example:

import { colors } from '@/constants/colors'
import image from '@/icons/png-icons/sign-in/carousel-fourth-block.png'

import { Dimensions, Image, Text, View } from 'react-native'
import { useSharedValue } from 'react-native-reanimated'
import { CarouselRenderItem } from 'react-native-reanimated-carousel'
import Carousel from 'react-native-reanimated-carousel/src/components/Carousel'

const width = Dimensions.get('window').width - 20
const defaultDataWith6Colors = ['#B0604D', '#899F9C', '#B3C680', '#5C6265', '#F5D399', '#F1F1F1']

interface Options {
  item?: any
  index?: any
}
export const renderItem = ({ item, index }: Options = {}) => (
  <View key={item} style={{ height: 400 }}>
    <Text
      style={{
        fontSize: 24,
      }}
    >
      {index}
      {item}
      asd asd as dasd as asd asd as das dsad sa das das
    </Text>
    <Image
      source={image}
      style={{
        width: width - 40,
        height: 300,
        borderWidth: 1,
        borderColor: 'red',
      }}
      resizeMode="contain"
    />
  </View>
)

function Screen() {


  const progress = useSharedValue<number>(0)

  return (
          <View>
          
            <Carousel
              autoPlayInterval={2000}
              scrollAnimationDuration={4000}
              data={defaultDataWith6Colors}
              height={500}
              autoPlay
              pagingEnabled={true}
              snapEnabled={true}
              width={width}
              style={{
                width: width,
                borderWidth: 1,
                backgroundColor: colors.green[200],
              }}
              mode="parallax"
              modeConfig={{
                parallaxScrollingScale: 0.9,
                parallaxScrollingOffset: 50,
              }}
              onProgressChange={progress}
              renderItem={({ item, index }) => {
                return <View key={index}>{renderItem({ item, index })}</View>
              }}
            />
    
        </View>
  )
}

export const HomeScreen = Screen

package.json:

  "dependencies": {
    "@expo/vector-icons": "^14.0.2",
    "@gorhom/bottom-sheet": "^5.0.6",
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-clipboard/clipboard": "^1.16.0",
    "@react-navigation/native": "^7.0.0",
    "@react-navigation/native-stack": "^7.1.9",
    "expo": "^52.0.35",
    "expo-blur": "~14.0.1",
    "expo-build-properties": "~0.13.1",
    "expo-constants": "~17.0.3",
    "expo-dev-client": "~5.0.12",
    "expo-font": "~13.0.1",
    "expo-haptics": "~14.0.0",
    "expo-linear-gradient": "~14.0.2",
    "expo-linking": "~7.0.3",
    "expo-secure-store": "^14.0.1",
    "expo-splash-screen": "~0.29.22",
    "expo-status-bar": "~2.0.0",
    "expo-symbols": "~0.2.2",
    "expo-system-ui": "~4.0.8",
    "nativewind": "^4.1.23",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-native": "0.76.7",
    "react-native-exception-handler": "^2.10.10",
    "react-native-gesture-handler": "^2.23.1",
    "react-native-keyboard-controller": "^1.15.2",
    "react-native-modal": "^13.0.1",
    "react-native-reanimated": "^3.16.7",
    "react-native-reanimated-animated-accordion": "^0.3.0",
    "react-native-reanimated-carousel": "^4.0.2",
    "react-native-safe-area-context": "4.12.0",
    "react-native-sass-transformer": "^3.0.0",
    "react-native-screens": "~4.4.0",
    "react-native-svg": "15.8.0",
    "react-native-web": "~0.19.13",
    "react-native-webview": "13.12.5",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7",
  },
  "devDependencies": {
    "react-test-renderer": "18.3.1",
    "sass": "^1.81.0",
    "tailwindcss": "^3.3.2",
    "typescript": "^5.3.3"
  },
  "private": true
}

babel.config.js:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: [['babel-preset-expo', { jsxImportSource: 'nativewind' }], 'nativewind/babel'],
    plugins: ['react-native-reanimated/plugin'],
  }
}

app is also wrapped with GestureHandlerRootView

IMG_0803.MP4

[dosubot]

Hey @bohdan-heiko-solid! I'm here to help you with any bugs or questions you have while we wait for a human maintainer. Let's solve this together!

I found a similar closed issue regarding performance problems on real devices, specifically with laggy transitions. The suggested solution was to use the windowSize prop to improve performance by controlling the number of views rendered at a time. This can help avoid overloading and improve performance when dealing with multiple elements. It was recommended to use values between 3 and 5 for the windowSize prop ^[1].

In your case, you might want to try adjusting the windowSize prop in your Carousel component to see if it resolves the "Slider Jumping" issue on real iOS devices. Additionally, ensure that your modeConfig settings are optimized for your use case, as they can also impact performance.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[bohdan-heiko-solid]

I tried values ​​5 4 3 2 for windowSize prop, but it didn't help. Could the new architecture or using a reanimated version 3 cause the problem?

[dosubot]

There are no specific known issues or limitations documented regarding the use of React Native Reanimated version 3 with the new architecture in the context of the React Native Reanimated Carousel. However, compatibility issues can sometimes arise when using newer versions of libraries or when integrating with the new architecture in React Native, especially on real devices.

Given that adjusting the windowSize prop did not resolve the issue, you might want to explore other potential causes, such as:

1. Reanimated Version Compatibility: Ensure that all libraries and dependencies are compatible with React Native Reanimated version 3. Sometimes, mismatches in versions can lead to unexpected behavior.

2. NativeWind and TailwindCSS: Check if there are any known compatibility issues between these libraries and React Native Reanimated Carousel. Although no specific issues are documented, conflicts can occur when multiple libraries manipulate styles or animations.

3. Performance Optimization: Besides windowSize, consider optimizing other props like scrollAnimationDuration and autoPlayInterval to see if they affect the performance on real devices.

4. Debugging on Real Devices: Use debugging tools to profile the app on a real device to identify any performance bottlenecks or errors that might not appear in the simulator.

If the issue persists, it might be helpful to isolate the problem by creating a minimal reproducible example and testing different configurations to pinpoint the cause.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[jiroscripts]

@bohdan-heiko-solid Did you find a way to improve your carousel performance ?