Source: screens/dashboard/DashboardScrollBar.js

import React, { useState, useEffect } from 'react';
import { Animated, Dimensions, StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';

import { calculateEstimatedDashboardData, splitNumber } from '../../utils/dashboard/dashboard';

const SCREEN_WIDTH = Dimensions.get('window').width;
const xOffset = new Animated.Value(0);

const transitionAnimation = index => {
  return {
    transform: [
      { perspective: 800 },
      {
        scale: xOffset.interpolate({
          inputRange: [
            (index - 1) * SCREEN_WIDTH,
            index * SCREEN_WIDTH,
            (index + 1) * SCREEN_WIDTH
          ],
          outputRange: [0.25, 1, 0.25]
        })
      }
    ]
  };
};

/**
 * Scrollable horizontal view.
 * Shows the dashboard data that is known on fixrates homepage.
 */
const DashboardScrollBar = () => {
  const { dashboard } = useSelector(state => state.init);
  const { organisationType } = useSelector(state => state.init.sessionData);
  const [estimated, setEstimated] = useState(calculateEstimatedDashboardData(dashboard));

  useEffect(() => {
    const interval = setInterval(() => {
      setEstimated(calculateEstimatedDashboardData(dashboard));
    }, 3000);
    return () => {
      clearInterval(interval);
    };
  }, []);

  let dashboardbar;
  if (organisationType === 'BANK') {
    dashboardbar = [
      {
        title: 'Samlet innskudd via Fixrate',
        content: `${splitNumber(dashboard.calculatedBalance.toFixed())} kr`
      },
      {
        title: 'Gjennomsnittsrente i dag',
        content: `${splitNumber(dashboard.calculatedInterestRateLastDay)}%`
      },
      { title: 'NIBOR3M', content: `${splitNumber(dashboard.currentNibor)}%` }
    ];
  } else {
    dashboardbar = [
      {
        title: 'Innskudd inkl. renter',
        content: `${splitNumber(estimated.estimatedTotalBalance.toFixed())} kr`
      },
      {
        title: 'Renter i dag',
        content: `${splitNumber(estimated.estimatedInterestSinceMidnight.toFixed())} kr`
      },
      {
        title: 'Renter denne måneden',
        content: `${splitNumber(estimated.estimatedInterestLastMonth.toFixed())} kr`
      },
      {
        title: 'Gjennomsnittsrente i dag',
        content: `${dashboard.calculatedInterestRateLastDay.toFixed(2)}%`
      },
      { title: 'NIBOR3M', content: `${splitNumber(dashboard.currentNibor)}%` }
    ];
  }

  return (
    <View style={styles.scrollView}>
      <Animated.ScrollView
        scrollEventThrottle={16}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: xOffset } } }], {
          useNativeDriver: true
        })}
        showsHorizontalScrollIndicator={false}
        horizontal
        pagingEnabled
        decelerationRate="fast"
      >
        {dashboardbar.map((e, i) => (
          <View key={i} style={styles.scrollPage}>
            <Animated.View style={[styles.screen, transitionAnimation(i)]}>
              <Text style={styles.text}>{e.title}</Text>
              <Text style={styles.secondaryText}>{e.content}</Text>
            </Animated.View>
          </View>
        ))}
      </Animated.ScrollView>

      <View style={styles.dotView}>
        {dashboardbar.map((_, i) => {
          const opacity = xOffset.interpolate({
            inputRange: [(i - 1) * SCREEN_WIDTH, i * SCREEN_WIDTH, (i + 1) * SCREEN_WIDTH],
            outputRange: [0.25, 1, 0.25],
            extrapolate: 'clamp'
          });
          return <Animated.View key={i} style={[{ opacity }, styles.dot]} />;
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: '#566681'
  },
  scrollPage: {
    width: SCREEN_WIDTH,
    color: '#566681'
  },
  screen: {
    height: 100,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#566681'
  },
  text: {
    fontSize: 25,
    fontWeight: 'bold',
    fontFamily: 'MuseoSansRounded-900',
    color: '#fff'
  },
  secondaryText: {
    fontSize: 22,
    fontWeight: 'bold',
    fontFamily: 'MuseoSansRounded-700',
    color: '#fff'
  },
  dotView: {
    flexDirection: 'row',
    justifyContent: 'center'
  },
  dot: {
    height: 10,
    width: 10,
    backgroundColor: 'white',
    margin: 8,
    borderRadius: 5
  }
});

export default DashboardScrollBar;