unioil-loyalty-rn-app/app/components/carousel/index.js

import React from 'react'
import { View, ScrollView, Text, StyleSheet, Image, ImageBackground, TouchableOpacity } from 'react-native'
import Theme from '../theme.style.js';
import Board from './board.js';
import Promo from './promo.js';

export const Carousel = (props) => {

  const { items, style } = props;
  const itemsPerInterval = props.itemsPerInterval === undefined ? 1 : props.itemsPerInterval;
  const [interval, setInterval] = React.useState(1);
  const [intervals, setIntervals] = React.useState(1);
  const [width, setWidth] = React.useState(0);

  const init = (width) => {
    // initialise width
    setWidth(width);
    // initialise total intervals
    const totalItems = items.length;
    setIntervals(Math.ceil(totalItems / itemsPerInterval));

  }

  const getInterval = (offset) => {
    for (let i = 0; i < intervals; i++) {
      if (i === (intervals - 1)) {
        return i + 1;
      }
      if (offset < (width / intervals) * i + 1) {
        return i + 1;
      }
      
    }
  }

  let bullets = [];
  for (let i = 1; i <= intervals; i++) {
    
    if(props.type == "board"){
      bullets.push(
      <Text
        key={i}
        style={{
          ...styles.bullet,
          opacity: interval === i ? 1 : 0.5,
          color: interval === i ? Theme.colors.primary : 'rgba(255, 255, 255, 0.9)',
          fontSize: interval === i ? 45 : 25
        }}
      >
        &bull;
      </Text>
    );
    }else if(props.type == "promo"){
      bullets.push(
      <Text
        key={i}
        style={{
          ...styles.bullet2,
          opacity: interval === i ? 1 : 0.5,
          color: interval === i ? Theme.colors.primary : 'rgba(0, 0, 0, 0.85)',
          fontSize: interval === i ? 50 : 35,
          fontWeight: 'bold'
        }}
      >
        &bull;
      </Text>
    );
    }
    
  }
    
  return (
    <View>
      {props.type == "board" ? 
      <Board 
        intervals={intervals}
        onContentSizeChange={(w, h) => init(w)}
        onScroll={data => {
          setWidth(data.nativeEvent.contentSize.width);
          setInterval(getInterval(data.nativeEvent.contentOffset.x));
        }}
        items={items}
        onPress={props.onPress}
        bullets={bullets}
      /> : 
      <Promo 
        intervals={intervals}
        onContentSizeChange={(w, h) => init(w)}
        onScroll={data => {
          setWidth(data.nativeEvent.contentSize.width);
          setInterval(getInterval(data.nativeEvent.contentOffset.x));
        }}
        items={items}
        onPress={props.onPress}
        bullets={bullets}
      /> }
    </View>
  )
}

const styles = StyleSheet.create({
  statsHead: {
    paddingTop: 10,
    paddingHorizontal: 12,
  },
  container: {
    height: '100%',
    width: '100%',
    backgroundColor: '#fbfbfb',
    shadowColor: '#fcfcfc',
    shadowOpacity: 1,
    shadowOffset: {
      width: 0,
      height: 5
    },
  },
  scrollView: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
    width: '100%',
    height: '100%'
  },
  bullets: {
    position: 'absolute',
    bottom: 0,
    display: 'flex',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    paddingHorizontal: 10,
    paddingTop: 5,
  },
  button: {
    position: 'absolute',
    bottom: 20,
    right: 35,
    display: 'flex',
    justifyContent: 'flex-end',
    flexDirection: 'row',
    paddingHorizontal: 10,
    paddingTop: 5,
  },
  bullet: {
    paddingHorizontal: 3,
    alignSelf: 'center',
    left: 20
  },
  bullet2: {
    paddingHorizontal: 5,
    alignSelf: 'center',
  }
});

export default Carousel;