rn-try-n-buy-abfrl/src/screens/SizeDetails.js

Virtual try-on plugin for ABFRL

import React from 'react';
import {SafeAreaView, View, Image, Text, TouchableOpacity, Dimensions} from 'react-native';
import SceneUtils from "../utils/SceneUtils";

const width = Dimensions.get('window').width;

const horizontalData = [{
    title: 'Shoulder',
    width: 92,
    top: '16%'
},{
    title: 'Bust',
    width: 70,
    top: '20%'
},{
    title: 'Waist',
    width: 60,
    top: '33%'
},{
    title: 'Hip',
    width: 78,
    top: '40%'
}]

const SizeDetails = ({...props}) => {
    const renderLineWithText = ({title, width, top}) => (
        <View style={{position: 'absolute',alignItems: 'center', top: top, left: 0, right: 0}}>
          <Text style={{ color: '#FF007E', fontSize: 11, marginTop: 2}}>{title}</Text>
          <View style={{flexDirection: 'row', alignItems: 'center',}}>
            <Image style={{height: 6, width: 6}} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>
             <View style={{marginLeft: -4, marginRight: -4, width: width, height: 1, backgroundColor: 'black'}}/>
             <Image style={{height: 6, width: 6}} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowRightW.png`}}/>
          </View>
        </View>
    );

    return (
        <SafeAreaView style={{flex: 1, backgroundColor: '#FFF', justifyContent: 'center'}}>
          <TouchableOpacity
            style={{ marginRight: 20, position:'absolute', top:60, right: 0 }}
            onPress={() => props.navigation.goBack()}
          >
            <Image
              style={{width:17, height:17}}
              source={require("../assets/images/letter-x.png")}
            />
          </TouchableOpacity>
          <View style={{flexDirection: 'row'}}>
          <View style={{height: '85%', width: '100%'}}>

            <Text style={{ position: 'absolute', top: '30%', left:'9%', color: '#FF007E', fontSize: 11, marginTop: 2, transform: [{rotate: '-90deg'}] }}>Shirt Length</Text>
            <Image style={{height: 6, width: 6,left:'19.5%',  position: 'absolute', top: '16%', transform: [{rotate: '90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>
            <View style={{height: '27%', top: '16%', left:'20%', width: 1, alignSelf: 'center', position: 'absolute', backgroundColor: 'black'}}/>
            <Image style={{height: 6, width: 6,left:'19.5%',  position: 'absolute', top: '42%', transform: [{rotate: '-90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>

            <Text style={{ position: 'absolute', top: '60%', left:'5%', color: '#FF007E', fontSize: 11, marginTop: 2, transform: [{rotate: '-90deg'}] }}>Outfit Seen Length</Text>
            <Image style={{height: 6, width: 6,left:'19.5%',  position: 'absolute', top: '45%', transform: [{rotate: '90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>
            <View style={{height: '53%', top: '45%', left:'20%', width: 1, alignSelf: 'center', position: 'absolute', backgroundColor: 'black'}}/>
            <Image style={{height: 6, width: 6,left:'19.5%', position: 'absolute', top: '97%', transform: [{rotate: '-90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>


            <Text style={{ position: 'absolute', top: '60%', alignSelf: 'center', left: width/3, color: '#FF007E', fontSize: 11, marginTop: 2, transform: [{rotate: '-90deg'}] }}>Infit Seen Length</Text>
            <Image style={{height: 6, width: 6, alignSelf: 'center', position: 'absolute', top: '45%', transform: [{rotate: '90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>
            <View style={{height: '55%', top: '45%', width: 1, alignSelf: 'center', position: 'absolute', backgroundColor: 'black'}}/>
            <Image style={{height: 6, width: 6, alignSelf: 'center', position: 'absolute', top: '99%', transform: [{rotate: '-90deg'}] }} source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/ArrowLeftW.png`}}/>

                <Image
                    style={{height: '100%', resizeMode:'contain'}}
                    source={{uri: `${SceneUtils.BASE_IMAGE_URL}/assets/images/Women.png`}}
                />
                        {horizontalData.map(item => (
                            renderLineWithText(item)
                        ))}
            <Text style={{position: 'absolute',right:40, textAlign: 'left', top: horizontalData[0].top, marginTop: 6, color: '#FF007E', fontSize: 12}}>Fit On Shoulder</Text>
            <Text style={{position: 'absolute',right:40, top: horizontalData[1].top, color: '#FF007E', marginTop: 6, fontSize: 12}}>Fit On Bust       </Text>
            <Text style={{position: 'absolute',right:40, top: horizontalData[2].top, color: '#FF007E', marginTop: 6, fontSize: 12}}>Fit On Waist     </Text>
            <Text style={{position: 'absolute',right:40, top: horizontalData[3].top, color: '#FF007E', marginTop: 6, fontSize: 12}}>Fit On Hip        </Text>
          </View>
          
          </View>
        </SafeAreaView>
    )
}

export default SizeDetails;