LVLX onboarding

onboarding.tsx

import Spacer from '@/components/spacer';
import {
  lvlxPrimaryDarkGray,
  lvlxPrimaryGreen1,
  lvlxWhite,
} from '@/utils/colors';
import globalStyles from '@/utils/globalStyles';
import {faLongArrowLeft} from '@fortawesome/pro-regular-svg-icons';
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome';
import * as React from 'react';
import {
  Animated,
  Dimensions,
  ScrollView,
  TouchableOpacity,
  View,
} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import FitnessGoals from './fitness-goal';
import FitnessLevel from './fitness-level';
import GenderSelection from './gender-selection';
import LetsGetDownToBusiness from './lets-get-down-to-business';
import styles from './styles';
import TargetAreas from './target-areas';
import TrainingDays from './training-days';

const OnboardingScreen = () => {
  const [scrollIndex, setScrollIndex] = React.useState(0);
  const animationValue = new Animated.Value(0);

  const deviceWidth = Dimensions.get('window').width;
  const scrollViewRef = React.useRef<ScrollView>(null);

  const handleScroll = React.useCallback(
    (event: any) => {
      setScrollIndex(event.nativeEvent.contentOffset.x / deviceWidth);
    },
    [deviceWidth],
  );

  const onScrollToNext = React.useCallback(
    (index: number) => {
      scrollViewRef?.current?.scrollTo({
        x: index * deviceWidth,
        animated: true,
      });
    },
    [deviceWidth],
  );

  const onScrollToPrev = React.useCallback(() => {
    if (scrollIndex === 0) {
      return;
    }

    scrollViewRef?.current?.scrollTo({
      x: (scrollIndex - 1) * deviceWidth,
      animated: true,
    });
  }, [deviceWidth, scrollIndex]);

  return (
    <SafeAreaView
      style={styles.container}
      edges={['top', 'bottom', 'left', 'right']}>
      <View style={[globalStyles.innerContainer]}>
        <TouchableOpacity onPress={onScrollToPrev} style={styles.backBtn}>
          {scrollIndex !== 0 ? (
            <FontAwesomeIcon
              icon={faLongArrowLeft}
              color={lvlxWhite}
              size={25}
            />
          ) : null}
        </TouchableOpacity>
      </View>

      <View style={styles.progressBar}>
        <View
          style={[styles.progressBarItem, {backgroundColor: lvlxPrimaryGreen1}]}
        />
        <View
          style={[
            styles.progressBarItem,
            {
              backgroundColor:
                scrollIndex > 0 ? lvlxPrimaryGreen1 : lvlxPrimaryDarkGray,
            },
          ]}
        />
        <View
          style={[
            styles.progressBarItem,
            {
              backgroundColor:
                scrollIndex > 1 ? lvlxPrimaryGreen1 : lvlxPrimaryDarkGray,
            },
          ]}
        />
        <View
          style={[
            styles.progressBarItem,
            {
              backgroundColor:
                scrollIndex > 2 ? lvlxPrimaryGreen1 : lvlxPrimaryDarkGray,
            },
          ]}
        />
        <View
          style={[
            styles.progressBarItem,
            {
              backgroundColor:
                scrollIndex > 3 ? lvlxPrimaryGreen1 : lvlxPrimaryDarkGray,
            },
          ]}
        />
        <View
          style={[
            styles.progressBarItem,
            {
              backgroundColor:
                scrollIndex > 4 ? lvlxPrimaryGreen1 : lvlxPrimaryDarkGray,
            },
          ]}
        />
      </View>
      <Spacer size={39} />
      <ScrollView
        ref={scrollViewRef}
        scrollEnabled={false}
        horizontal
        showsHorizontalScrollIndicator={false}
        scrollEventThrottle={100}
        pagingEnabled={true}
        onScroll={Animated.event(
          [{nativeEvent: {contentOffset: {x: animationValue}}}],
          {useNativeDriver: false, listener: event => handleScroll(event)},
        )}>
        <GenderSelection onScrollToNext={onScrollToNext} />
        <FitnessGoals onScrollToNext={onScrollToNext} />
        <FitnessLevel onScrollToNext={onScrollToNext} />
        <TargetAreas onScrollToNext={onScrollToNext} />
        <TrainingDays onScrollToNext={onScrollToNext} />
        <LetsGetDownToBusiness />
      </ScrollView>
    </SafeAreaView>
  );
};

export default OnboardingScreen;