rn-try-n-buy-abfrl/src/component/BottomPopupPersonalise.js

Virtual try-on plugin for ABFRL

import React, {useCallback, useRef, useState} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, FlatList, Image, Dimensions } from 'react-native';
import ImageButton from '../component/ImageButton';
import SceneUtils from '../utils/SceneUtils';

const BottomPopupPersonalise = ({
    onCrossPress,
    data,
    age_range_boy,
    age_range_girl,
    gender,
    renderSceneOnPersonaliseClick
}) => {
    const flatListRef = useRef();
    const [currentIndex, setCurrentIndex] = useState('0')
    const [showLeftArrow, setShowLeftArrow] = useState(false)
    const [showRightArrow, setShowRightArrow] = useState(true)

    const onPressScrollBtn = (action) => {
        if (action == 'Back') {
            if (flatListRef?.current){
                flatListRef?.current?.scrollToIndex({index: currentIndex-1})    
                setCurrentIndex(currentIndex-1)
            }
        } else {
            if (flatListRef?.current){
                flatListRef?.current?.scrollToIndex({index: currentIndex+1})    
                setCurrentIndex(parseInt(currentIndex)+1)
            }
        }
    }

    const onViewCallBack = React.useCallback((viewableItems) => {
        console.log(viewableItems)
        const _viewableItemsFirst = viewableItems?.viewableItems.filter((e) => e.index == '0')
        console.log("🚀 ~ file: BottomPopupPersonalise.js:34 ~ onViewCallBack ~ _viewableItemsFirst", _viewableItemsFirst)
        const _viewableItemsLast = viewableItems?.viewableItems.filter((e) => e.index == '4')
        console.log("🚀 ~ file: BottomPopupPersonalise.js:36 ~ onViewCallBack ~ _viewableItemsLast", _viewableItemsLast)
        if (_viewableItemsFirst.length > 0) {
            setShowRightArrow(true)
            setShowLeftArrow(false)
        } else if (_viewableItemsLast.length > 0) {
            setShowRightArrow(false)
            setShowLeftArrow(true)
        } else {
            setShowRightArrow(true)
            setShowLeftArrow(true)
        }

        // Use viewable items in state or as intended
    }, []) // any dependencies that require the function to be "redeclared"

    const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 })
    
    

    return <View style={styles.container}>
        <View style={{ position: 'absolute', right: 10, top: 10}}>
            <ImageButton
                imagepath={require('../assets/images/letter-x.png')}
                width={15}
                height={15}
                marginRight={10}
                onPress={onCrossPress}
                tintColor={'#fff'}
            />
        </View>
        <FlatList
            ref={flatListRef}
            data={data}
            onViewableItemsChanged={onViewCallBack}
            viewabilityConfig={viewConfigRef.current}
            style={{ marginTop: 28, marginBottom: 16, marginLeft: 16, marginRight: 16 }}
            horizontal
            renderItem={(item) => {
               return <TouchableOpacity style={{ width: 100, height: 30, padding:5, marginRight: 12, borderRadius: 6, backgroundColor: '#fff',
                    borderColor: (gender == '2' ? (age_range_boy == (item.index + 1) ? '#f7992e' : '#fff') : (age_range_girl == i(tem.index + 1) ? '#f7992e' : '#fff')), borderWidth: 2, alignItems: 'center'}}
                    onPress={() => {
                            setCurrentIndex(parseInt(item.index))
                            renderSceneOnPersonaliseClick(parseInt(item.index)+1)
                        }}>
                    <Text style={{color: SceneUtils.text_color, fontWeight: 'bold', fontSize: 12 }}>{item.item}</Text>
                </TouchableOpacity>
            }}
            extraData={data}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
        />
        <View style={{ width: '100%', height: 20, justifyContent: 'space-around', flexDirection: 'row', alignItems: 'center' }}>
            <TouchableOpacity disabled={!showLeftArrow} onPress={() => onPressScrollBtn('Back')}>
                <Image source={require('../assets/images/arrow.png')} style={{
                    width: 70, height: 10, transform: [{ rotate: '180deg' }],
                    tintColor: (!showLeftArrow )? '#000' : '#fff'
                }} />
            </TouchableOpacity>
            <TouchableOpacity disabled={!showRightArrow} onPress={() => onPressScrollBtn('Next')}>
                <Image source={require('../assets/images/arrow.png')} style={{
                    width: 70, height: 10, tintColor: (!showRightArrow) ? '#000' : '#fff' 
                }} />
            </TouchableOpacity>
        </View>
    </View>;
};

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        bottom: 0,
        left: 0, 
        right: 0,
        backgroundColor: 'rgba(30, 18, 0, 0.5)',
        marginHorizontal: 16,
        borderRadius: 4,
        paddingBottom: 10,
        zIndex: 10,
        width: Dimensions.get('screen').width,
        borderTopColor: '#f7992e',
        borderTopWidth: 1
    },
    headerContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    seperator: {
        height: 2,
        backgroundColor: '#d4d5d9',
        marginTop: -2,
        zIndex: 1,
    },
});

export default BottomPopupPersonalise;