slide.tsx

import React, { useEffect, useRef, useState } from 'react';
import { Animated, FlatList, StyleSheet, View } from 'react-native';
import { Text } from 'app/components';
import { AnimatedGradient } from './box-helper';

const colors: string[] = [
  '#069EC6',
  '#2D569A',
  '#87C054',
  '#F78A53',
  '#A1286A',
  '#069EC6',
  '#2D569A',
  '#87C054',
  '#F78A53',
  '#A1286A',
  '#069EC6',
  '#2D569A',
  '#87C054',
  '#F78A53',
  '#A1286A',
  '#069EC6',
  '#2D569A',
  '#87C054',
  '#F78A53',
  '#A1286A',
];

const App = () => {
  const [colorPicker, setPicker] = useState<string>('#069EC6');
  const flatListRef: any = useRef();
  const animateBox = useRef(new Animated.Value(0)).current;
  const onViewableItemsChanged = ({ viewableItems }: any) => {
    const index = viewableItems[0].item;
    setPicker(index);
    // setIndexView(viewableItems[0]?.index);
    // // Do stuff
    // dispatchAction(
    //   setLastRead({
    //     ayah: Number(index),
    //     index: viewableItems[0]?.item?.index,
    //     surah: params?.data.latinName,
    //     data: params?.data,
    //   }),
    // );
  };
  const viewabilityConfigCallbackPairs: any = useRef([{ onViewableItemsChanged }]);
  const indexColor = colors.indexOf(colorPicker);
  const colorState = colors[indexColor + 3];

  const colorPolate = animateBox.interpolate({
    inputRange: [0, 1],
    outputRange: ['red', 'blue'],
  });

  useEffect(() => {
    setTimeout(() => {
      flatListRef.current.scrollToOffset({ offset: 35, animated: true });
    }, 10);
  }, []);

  return (
    <View style={styles.content}>
      {/* <Animated.View style={[styles.containerCard, { backgroundColor: colorPolate }]}>
        <Text type="bold" color={'white'}>
          Box
        </Text>
      </Animated.View> */}
      <AnimatedGradient
        orientation={{ start: { x: 0.3, y: 0 }, end: { x: 1.2, y: 0.1 } }}
        colors={[colorState, colorState]}
        style={styles.containerCard}
      />
      <AnimatedGradient
        orientation={{ start: { x: 0.3, y: 0 }, end: { x: 1.2, y: 0.1 } }}
        colors={[colorState, colorState]}
        style={styles.picker}
      />
      <FlatList
        ref={flatListRef}
        horizontal
        style={styles.listContainer}
        showsHorizontalScrollIndicator={false}
        data={colors}
        keyExtractor={(item, idx: number) => idx.toString()}
        viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
        renderItem={({ item }) => {
          return <View style={[styles.lineCard, { backgroundColor: item }]} />;
        }}
      />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  content: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  containerCard: {
    height: 200,
    width: 300,
    backgroundColor: '#2D569A',
    borderRadius: 15,
    elevation: 20,
    padding: 20,
    margin: 20,
  },
  lineCard: {
    width: 60,
    height: 20,
    borderRadius: 20,
    marginLeft: 5,
  },
  listContainer: {
    height: 100,
  },
  picker: {
    width: 30,
    height: 70,
    backgroundColor: 'red',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    borderBottomRightRadius: 200,
    borderBottomLeftRadius: 200,
    elevation: 20,
  },
});