Skip to content

Instantly share code, notes, and snippets.

@pridemusvaire
Created March 21, 2023 18:07
Show Gist options
  • Save pridemusvaire/fc11859ced7d3f2c047df65e8411dfd8 to your computer and use it in GitHub Desktop.
Save pridemusvaire/fc11859ced7d3f2c047df65e8411dfd8 to your computer and use it in GitHub Desktop.
LVLX onboarding
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment