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

Virtual try-on plugin for ABFRL

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

const CheckSelected = require('../assets/images/check_selected.png');
const CheckUnSelected = require('../assets/images/check_unselected.png');

const showBottomPopupColorPalette = ({
    onCrossPress,
    data,
    thumbData,
    renderSceneOnColorPaletteClick,
    nobodyDetailsSavedBool,
    itemCat
}) => {

    const renderSeperator = () => <View style={styles.seperator} />;

    return <View style={styles.container}>
        <View style={{ position: 'absolute', right: 0, top: 10, flexDirection: 'row' }}>
        <Text
          style={{
            fontSize: 14,
            color: '#f7992e',
            paddingBottom: 18,
            paddingLeft: 22,
            paddingRight: 12,
            flex: 1,
            fontWeight: 'bold'
          }}>Available color options {`                     ${itemCat?.length > 0 && itemCat[itemCat.length-1]? itemCat[itemCat.length-1]: ''}`}</Text>
            <ImageButton
                imagepath={require('../assets/images/letter-x.png')}
                width={15}
                height={15}
                marginRight={10}
                onPress={onCrossPress}
                tintColor={'#fff'}
            />
        </View>
       {renderSeperator()}
        <FlatList
            data={data}
            style={{ marginTop: 20, marginBottom: 16, marginLeft: 16 }}
            horizontal
            renderItem={(item) => {
                return <TouchableOpacity style={{ width: 60, height: 80, marginRight: 12, backgroundColor: '#d7d7c1', borderRadius: 10 }}
                    onPress={() => renderSceneOnColorPaletteClick(item.item)}>
                    <Image source={{ uri: thumbData[item.index] }} style={{ width: undefined, height: undefined, flex: 1, borderRadius: 10 }} resizeMode='contain' />
                </TouchableOpacity>
            }}
            extraData={data}
            showsHorizontalScrollIndicator={false}
            keyExtractor={(item, index) => index.toString()}
        />
    </View>;
};

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        bottom: 0,
        left: -16, 
        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: 40,
        zIndex: 1,
    },
});

export default showBottomPopupColorPalette;