Folks, I have an issue here, my flatList item rendering correctly but when I scroll to the various indexes I it adds extra spaces to left of the current index pushing part of the current index to the next index, and the next index will also have extra space on the left and so on. can some one help out?[
This is index1 of the flatList and you can see the extra space on the left pushing part of the items in the index to the next index]
(https://i.sstatic.net/tCPXXHTy.png)

type hereimport {
  Animated,
  FlatList,
  View,
  ViewToken,
  useWindowDimensions,
} from 'react-native';
import React, {useRef, useState} from 'react';
import CustomTextInput from './TextInput';
import ImageRender from './ImageRender';
import CustomText from './Text';
import {ChatIcon, HeartIcon, SendIcon} from '../assets/icons';
import Paginator from './Paginator';

interface CardProps {
  id: string;
  profileImage?: any;
  profileName?: string;
  caption: string;
  likes: number | string;
  comment: number | string;
  share: number | string;
}

interface Props {
  data: CardProps[];
  imageUrl: any;
}

const Card: React.FC<Props> = ({data, imageUrl}) => {
  const [cptn, setCptn] = useState('');
  const scrollX = useRef(new Animated.Value(0)).current;
  const slideRef = useRef(null);
  const [currentIndex, setCurrentIndex] = useState(0);
  const viewableIndexChange = ({
    viewableItems,
  }: {
    viewableItems: ViewToken[];
  }) => {
    if (viewableItems && viewableItems.length > 0) {
      setCurrentIndex(viewableItems[0].index ?? 0);
    }
  };

  const viewabilityConfig = useRef({
    viewAreaCoveragePercentThreshold: 50,
  }).current;

  const {width} = useWindowDimensions();

  return (
    <View style={styles.container}>
      <View style={styles.upperUpper}>
        <View style={styles.upper}>
          <View style={styles.upperProfile}>
            <ImageRender
              source={require('../assets/images/image1.png')}
              width={34}
              circular={true}
              height={34}
            />
            <CustomText text="Albert Flores" size="medium" variant="body" />
          </View>
          <View style={styles.ellipse}>
            <ImageRender
              source={require('../assets/images/ellipse24.png')}
              width={3}
              height={3}
              circular={false}
            />
            <ImageRender
              source={require('../assets/images/ellipse24.png')}
              width={3}
              height={3}
              circular={false}
            />
            <ImageRender
              source={require('../assets/images/ellipse24.png')}
              width={3}
              height={3}
              circular={false}
            />
          </View>
        </View>
        <CustomText text={cptn} variant="body" size="medium" weight="bold" />
      </View>
      <View style={styles.main}>
        <View style={{marginTop: -15}}>
          <CustomTextInput
            bottomSheet={true}
            placeholder="Add Caption"
            size="large"
            value={cptn}
            onChangeText={text => setCptn(text)}
            homeCaption={true}
          />
        </View>
        <ImageRender source={imageUrl} width="100%" height={220} />
        <FlatList
          data={data}
          renderItem={({item}) => {
            return (
              <View style={[styles.flatListItem, {width}]}>
                <View style={styles.cardFooter}>
                  <View style={styles.profile}>
                    <ImageRender
                      circular={true}
                      source={item.profileImage}
                      width={22}
                      height={22}
                    />
                    <CustomText
                      text={item.profileName}
                      variant="body"
                      size="smaller"
                      weight="bold"
                    />
                  </View>
                  <View style={styles.caption}>
                    <CustomText
                      text={item.caption}
                      variant="body"
                      weight="bold"
                      size="large"
                    />
                  </View>
                  <View style={styles.stats}>
                    <View style={styles.likeChat}>
                      <View style={styles.like}>
                        <HeartIcon size={16} />
                        <CustomText
                          text={item.likes}
                          size="small"
                          variant="body"
                        />
                      </View>
                      <View style={styles.comments}>
                        <ChatIcon size={16} />
                        <CustomText
                          text={item.comment}
                          size="small"
                          variant="body"
                        />
                      </View>
                    </View>
                    <View style={styles.share}>
                      <SendIcon size={16} />
                      <CustomText
                        text={item.share}
                        size="small"
                        variant="body"
                      />
                    </View>
                  </View>
                </View>
              </View>
            );
          }}
          horizontal
          keyExtractor={item => item.id}
          showsHorizontalScrollIndicator={false}
          pagingEnabled={true}
          bounces={false}
          onScroll={Animated.event(
            [{nativeEvent: {contentOffset: {x: scrollX}}}],
            {useNativeDriver: false},
          )}
          scrollEventThrottle={32}
          onViewableItemsChanged={viewableIndexChange}
          viewabilityConfig={viewabilityConfig}
          ref={slideRef}
        />
      </View>
      <View style={{alignItems: 'center'}}>
        <Paginator data={data} currentIndex={currentIndex} />
      </View>
    </View>
  );
};

const styles = {
  container: {
    flex: 1,
    width: '90%',
    gap: 10,
  },
  upperUpper: {
    flexDirection: 'column',
    gap: 12,
  },
  upper: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 20,
  },
  ellipse: {
    flexDirection: 'row',
    gap: 2,
  },
  upperProfile: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  main: {
    width: '100%',
    minHeight: 415,
    gap: -17,
    borderRadius: 8,
    marginTop: 10,
    backgroundColor: '#fff',
  },
  cardFooter: {
    paddingVertical: 13,
    gap: 8,
    paddingHorizontal: 12,
    width: '90%',
  },
  flatListItem: {
    justifyContent: 'center',
    aliignItems: 'center',
  },
  profile: {
    width: 124,
    flexDirection: 'row',
    gap: 8,
    alignItems: 'center',
  },
  stats: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  likeChat: {
    flexDirection: 'row',
    gap: 24,
    alignItems: 'center',
  },
  like: {
    flexDirection: 'row',
    gap: 4,
    alignItems: 'center',
  },
  comments: {
    flexDirection: 'row',
    gap: 4,
    alignItems: 'center',
  },
  share: {
    flexDirection: 'row',
    gap: 4,
    alignItems: 'center',
  },
  secondCardMain: {
    width: '100%',
    height: 116,
    borderWidth: 1,
    borderRadius: 8,
    marginTop: 10,
    backgroundColor: '#ff',
    paddingVertical: 13,
    paddingHorizontal: 12,
  },
};
export default Card;

Im expecting no each item to take the full width of it container and not add extra spaces on the left