Untitled

import { StyleSheet, View, FlatList } from 'react-native';
import React from 'react';
import vndcTheme from 'app/assets/themes/vndc_theme';
import AnimatedImage from 'app/components/animation_image';

const ItemImagePost = React.memo(props => {
  const { item } = props;
  return (
    <View style={styles.container}>
      <AnimatedImage
        source={{
          uri: item.link_aws,
        }}
        style={styles.imgPost}
      />
    </View>
  );
});

const SwipeImagePost = React.memo(props => {
  const { data = [] } = props;
  const [index, setIndex] = React.useState(0);

  return (
    <View marginBottom={32}>
      <FlatList
        horizontal
        pagingEnabled
        data={data}
        renderItem={({ item }) => {
          return <ItemImagePost item={item} />;
        }}
        keyExtractor={(_, i) => String(i)}
        onMomentumScrollEnd={({ nativeEvent }) => {
          const { contentOffset, layoutMeasurement } = nativeEvent;
          const _index = Math.round(contentOffset.x / layoutMeasurement.width);
          setIndex(_index);
        }}
        showsHorizontalScrollIndicator={false}
        bounces={false}
      />
      <View style={styles.containerDot}>
        {data?.length > 1
          ? data.map((e, i) => {
              let isSelect = i === index;
              return (
                <View
                  key={i}
                  style={[
                    styles.dot,
                    {
                      backgroundColor: isSelect
                        ? vndcTheme.primary
                        : vndcTheme.line,
                    },
                  ]}
                />
              );
            })
          : null}
      </View>
    </View>
  );
});
export default SwipeImagePost;

const styles = StyleSheet.create({
  imgPost: {
    width: vndcTheme.deviceWidth,
    height: (vndcTheme.deviceWidth * 194) / 375,
  },
  container: {
    width: vndcTheme.deviceWidth,
    height: (vndcTheme.deviceWidth * 194) / 375,
    overflow: 'hidden',
  },
  containerDot: {
    flexDirection: 'row',
    paddingTop: 20,
    justifyContent: 'center',
  },
  dot: {
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 5,
  },
});