React native flatlist item shifting right

[volkandogan]

I want to show 3 items on screen and scroolling using animation. first 10 item show up normally but numbers start to shift to the right as scroll forward. I think it is a bug of flatlist.

 import React, {useState, useEffect} from 'react';
 import {
 StyleSheet,
 Text,
 View,
 FlatList,
 Platform,
 Dimensions,
 Animated,
 } from 'react-native';
const {width, height} = Dimensions.get('window');
const ITEM_SIZE =
  Platform.OS === 'ios' ? width * 0.33 - 32 : (width - 32) * 
   0.33;
  const ITEM_SPACING = ITEM_SIZE;

     const data = [
    {key: '1'},
    {key: '2'},
    {key: '3'},
    {key: '4'},
    {key: '5'},
    {key: '6'},
    {key: '7'},
    {key: '8'},
    {key: '9'},
    {key: '10'},
    {key: '11'},
    {key: '12'},
    {key: '13'},
    {key: '14'},
    {key: '15'},
    {key: '16'},
    {key: '17'},
    {key: '18'},
    {key: '19'},
    {key: '20'},
    {key: '21'},
    {key: '22'},
    {key: '23'},
    {key: '24'},
    {key: '25'},
    {key: '26'},
    {key: '27'},
    {key: '28'},
    {key: '29'},
    {key: '30'},
    {key: '31'},
    {key: '32'},
  ];
 const Onboarding = () => {
 const [selectedId, setSelectedId] = useState('23');
 const scrollX = React.useRef(new Animated.Value(0)).current;
return (
<View
  style={{
    flex: 1,
    marginHorizontal: 16,
    justifyContent: 'center',
    alignItems: 'center',
  }}>
  <FlatList
    showsHorizontalScrollIndicator={false}
    data={data}
    horizontal
    snapToInterval={ITEM_SIZE}
    keyExtractor={item => item.key}
    extraData={selectedId}
    decelerationRate={0}
    style={{flexGrow: 0}}
    bounces={false}
    onMomentumScrollEnd={ev => {
      const index = Math.round(ev.nativeEvent.contentOffset.x / ITEM_SIZE);
      setSelectedId(data[index].key);
    }}
    onScroll={Animated.event(
      [{nativeEvent: {contentOffset: {x: scrollX}}}],
      {useNativeDriver: false},
    )}
    scrollEventThrottle={16}
    contentContainerStyle={{
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: ITEM_SPACING,
    }}
    getItemLayout={(item, index) => ({
      length: ITEM_SIZE,
      offset: ITEM_SIZE * index,
      index,
    })}
    renderItem={({item, index}) => {
      const inputRange = [
        (index - 1) * ITEM_SIZE,
        index * ITEM_SIZE,
        (index + 1) * ITEM_SIZE,
      ];
      const opacity = scrollX.interpolate({
        inputRange,
        outputRange: [0.2, 1, 0.2],
      });
      return (
        <>
          <View style={[styles.item]}>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Animated.Text style={[styles.text, {opacity}]}>
                {item.key}
              </Animated.Text>
            </View>
          </View>
        </>
      );x
      width: 60,
      height: 60,
      borderRadius: 30,
      position: 'absolute',
      borderWidth: 10,
      borderColor: '#000',
    }}></View>
</View>
 );
};

 export default Onboarding;

 const styles = StyleSheet.create({
  container: {
   paddingTop: 22,
   },
 item: {
  fontSize: 13,
   width: ITEM_SIZE,
   height: 55,
   justifyContent: 'center',
    alignItems: 'center',
 },
 flatList: {
   justifyContent: 'center',
     alignItems: 'center',
  },
  text: {
   fontSize: 16,
  },
});

[ylkhayat]

@volkandogan Could you please provide more information about your project environment and the version of React/React Native you're using?
Maybe attach a snack on Expo - Snack to further illustrate the problem and assist with concrete modifications to your current code.

[NO1225]

I have the same issue, I want to render 5 items per horizontal page, (Date picker), and I found that items rendered from FlatList don't have the same width specified in the style, some are larger and some are a bit smaller (+- 0.5) which make the list shift when the number of items is large, (when entering the second month)
I have tried to enforce the width using various methods, such as giving the three properties (maxWidth, minWidth, width) and trying to set the size in the CellRendererComponent, nothing works

I checked the size using the element inspector from the phone.

I have the following
"expo": "~42.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
working on windows and testing on android 11, and the simulator

Here is a snippet of my code:

                            `<DefaultView
                                    style={{
                                        width: datesWidth
                                    }}>
                                    <FlatList
                                        data={dates}
                                        keyExtractor={(item, index) => item.toJSON()}
                                        horizontal
                                        showsHorizontalScrollIndicator={false}
                                        onMomentumScrollEnd={(e) => {
                                            console.log(e.nativeEvent);
                                            setCurrentDateIndex(Math.round(2 + e.nativeEvent.contentOffset.x / (e.nativeEvent.layoutMeasurement.width / 5)))
                                        }}
                                        contentContainerStyle={[{
                                            alignItems: 'center',
                                        }]}
                                        style={{
                                            width: datesWidth,
                                        }}
                                        onEndReachedThreshold={2}
                                        onEndReached={() => {
                                            if (dates.length > 90) return
                                            setDates([...dates, ...getDates(dates[dates.length - 1].clone().add(1, 'day'), 10)])
                                        }}
                                        getItemLayout={(data, index) => ({ length: (flatListLayout?.width ?? 0) / 5, offset: ((flatListLayout?.width ?? 0) / 5) * index, index })}
                                        snapToInterval={(flatListLayout?.width ?? 0) / 5}
                                        decelerationRate="fast"
                                        disableIntervalMomentum
                                        legacyImplementation
                                        onLayout={(e) => {
                                            console.log(e.nativeEvent)
                                            setFlatListLayout(e.nativeEvent.layout)
                                        }}
                                        CellRendererComponent={function MyCustomCellRenderer(props) {
                                            return (
                                                <DefaultView
                                                    style={{
                                                        width: (flatListLayout?.width ?? 0) / 5,
                                                        // maxWidth: dateElementWidth,
                                                        // minWidth: dateElementWidth,
                                                    }}
                                                    onLayout={props.onLayout}>
                                                    {props.children}
                                                </DefaultView>
                                            )
                                        }}
                                        renderItem={({ item, index }) => (
                                            <DefaultView style={{
                                                alignItems: 'center',
                                                alignContent: 'center',
                                            }}>
                                                <Text style={[
                                                    GlobalStyles.text,
                                                    GlobalStyles.regularText,
                                                    {
                                                        fontSize: FontSize.xxxSmall,
                                                        color: currentDateIndex == index ? useThemeColor('white') : useThemeColor('third_brandColor'),
                                                        width: "100%",
                                                        textAlign: 'center'
                                                    }
                                                ]}>
                                                    {item.format(StringFormats.ShortDay)}
                                                </Text>
                                                <Text style={[
                                                    GlobalStyles.text,
                                                    GlobalStyles.semiBoldText,
                                                    {
                                                        fontSize: FontSize.Regular,
                                                        color: currentDateIndex == index ? useThemeColor('white') : useThemeColor('third_brandColor'),
                                                        width: "100%",
                                                        textAlign: 'center'
                                                    }
                                                ]}>
                                                    {item.format(StringFormats.DayNumber)}
                                                </Text>
                                            </DefaultView>
                                        )}
                                    />
                                </DefaultView>`

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.