scrollnumber.js

import React, {useState, useRef, useEffect} from 'react';
import {
  View,
  Dimensions,
  Animated,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  Platform,
  Easing,
  StyleSheet,
  StatusBar,
  FlatList,
} from 'react-native';
const {width, height} = Dimensions.get('window');

const colors = {
  black: '323F4E',
  red: '#F76A6A',
  text: '#ffffff',
};

const timers = [...Array(13).keys()].map((i) => (i === 0 ? 1 : i * 5));
const ITEM_SIZE = width * 0.38;
const ITEM_SPACING = (width - ITEM_SIZE) / 2;

const Content = ({navigation}) => {
  const scrollX = useRef(new Animated.Value(0)).current;
  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <Animated.View style={styles.main}>
        <FlatList
          data={timers}
          horizontal
          style={styles.flatListStyle}
          showsHorizontalScrollIndicator={false}
          snapToInterval={ITEM_SIZE}
          decelerationRate="fast"
          contentContainerStyle={{
            paddingHorizontal: ITEM_SPACING,
          }}
          keyExtractor={(item) => item.toString()}
          renderItem={({item}) => {
            return (
              <View style={styles.textContainer}>
                <Text style={[styles.text]}>{item}</Text>
              </View>
            );
          }}
        />
      </Animated.View>
    </View>
  );
};
export default Content;

const styles = StyleSheet.create({
  main: {
    position: 'absolute',
    top: height / 3,
    left: 0,
    right: 0,
    flex: 1,
  },
  flatListStyle: {
    flexGrow: 0,
  },
  text: {
    fontSize: 80,
    color: colors.text,
  },
  textContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: ITEM_SIZE,
  },
});

import React from 'react'
import {
  View, Text, Dimensions, StyleSheet, Animated, TouchableOpacity, StatusBar,
  FlatList,
  NativeScrollEvent,
  NativeSyntheticEvent,
} from 'react-native';
const { width, height } = Dimensions.get('window');


import { useSelector, useDispatch, connect, ConnectedProps } from "react-redux";
import { AppState } from "../redux/reducers";

interface Props {
  count: number;
  addCount: Function;
}
type PropsFromRedux = ConnectedProps<typeof connector>
const colors = {
  black: '#323F4E',
  red: '#F76A6A',
  text: '#ffffff',
};

const timers = [...Array(10).keys()].map((i) => (i === 0 ? 1 : i + 1));
const ITEM_SIZE = 40;
const ITEM_SPACING = (width * .8) / 2;
const mapState = (state: AppState) => ({
  count: state.count,
})

interface scrollEvent {

}

const mapDispatch = {
  addCount: (count: number) => ({ type: 'ADD_COUNT', payload: count })
}


const connector = connect(mapState, mapDispatch)

const Test: React.FC<Props> = (props: Props) => {


  const scrollX = React.useRef(new Animated.Value(0)).current;

  const handleScrollEnd = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
    console.log(event.nativeEvent.contentOffset)
  }

  return (
    <View style={{ flex: 1, backgroundColor: colors.black }}>
      <StatusBar hidden />
      <Animated.View style={styles.main}>
        <Animated.FlatList
          data={timers}
          horizontal
          style={styles.flatListStyle}
          showsHorizontalScrollIndicator={false}
          onMomentumScrollEnd={handleScrollEnd}
          snapToInterval={ITEM_SIZE}
          initialScrollIndex={2}
          decelerationRate="fast"
          contentContainerStyle={{
            paddingLeft: 80,
            justifyContent: 'center',
            alignItems: 'center',
            // backgroundColor: 'red',
          }}
          onScroll={
            Animated.event(
              [{ nativeEvent: { contentOffset: { x: scrollX } } }],
              { useNativeDriver: true }
            )
          }
          keyExtractor={(item) => item.toString()}
          renderItem={({ item, index }) => {
            console.log('item', item, index)
            const inputRange = [
              (index - 2) * ITEM_SIZE,
              (index - 1) * ITEM_SIZE,
              (index) * ITEM_SIZE,
              (index + 1) * ITEM_SIZE,
              (index + 2) * ITEM_SIZE,
            ]

            const opacity = scrollX.interpolate({
              inputRange,
              outputRange: [0.3, 0.4, 1, 0.4, 0.3]
            })

            const scale = scrollX.interpolate({
              inputRange,
              outputRange: [0.4, 0.7, 1, 0.7, 0.4]
            })

            return (
              <View style={styles.textContainer}>
                <Animated.Text style={[styles.text,
                { opacity, transform: [{ scale }] }
                ]}>{item}</Animated.Text>
              </View>
            );
          }}
        />
      </Animated.View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {

  },
  main: {
    position: 'absolute',
    bottom: 30,
    width: 200,
    // left: 0,
    // right: 0,
    alignSelf: 'center',
    backgroundColor: 'blue',
    flex: 1,
  },
  flatListStyle: {
    flexGrow: 0,
  },
  text: {
    fontSize: 30,
    color: colors.text,
  },
  textContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 40,
    // backgroundColor: 'red',
  },

});
export default connector(Test)