I’m building a fashion stylist app in react naitve, and I want to add a feature where, when a user clicks on a specific color, the clothes color of a JavaScript modal changes dynamically. This would allow users to visualize how different colors look in real time.
I have no idea where to start with implementing this. Could someone guide me on how to achieve this functionality using JavaScript and react native?
2
You can create an SVG for cloth, and pass the color value to the SVG. As an example consider below.
import React from 'react';
import { Svg, Path } from 'react-native-svg';
import { View, StyleSheet } from 'react-native';
const ShirtSVG = ({ color = 'green' }) => (
<View style={styles.container}>
<Svg width="200" height="200" viewBox="0 0 200 200">
{/* Shirt body */}
<Path d="M60 20 L80 20 L100 50 L120 20 L140 20 L160 50 L150 140 L50 140 L40 50 Z"
fill={color}
stroke="#000"
strokeWidth="2"
/>
{/* Collar */}
<Path
d="M80 20 L100 50 L120 20"
fill="#fff"
stroke="#000"
strokeWidth="2"
/>
{/* Left sleeve */}
<Path
d="M60 20 L40 50 L50 60 L65 45"
fill={color}
stroke="#000"
strokeWidth="2"
/>
{/* Right sleeve */}
<Path
d="M140 20 L160 50 L150 60 L135 45"
fill={color}
stroke="#000"
strokeWidth="2"
/>
</Svg>
</View>
);
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
});
export default ShirtSVG;