im trying to create a personality picker as seen in the image below. The intended use of it is that depending on the score of each personality from 0 to 5 a black line will be drawn and expand to each of the five circles to indicate the score.
Here is my code so far to create this, I have gotten the circles in line and I am currently creating the black lines however I am unable to do them dynamically and I am having to plot each point specifically which may be a problem for different screensizes. I am hoping there is a better way than what I am doing right now as it is a tonne of nested Views forming shapes. Any help would be great on how to make this simpiler / more dynamic!Thanks :)
return (<View style={{margin: 32}}><Text style={{fontFamily: 'Roboto_400Regular', fontSize: 36}}>Plot your{"\n"}personality</Text><View style={{flexDirection: 'row', justifyContent: 'space-between'}}><Text style={{ fontFamily: 'Roboto_400Regular', fontSize: 14, color: '#878787', paddingTop: 4, alignSelf: 'flex-end' }}>Use this to match with similar people?</Text><Switch trackColor={{false: "#878787", true: "#5BF675"}} thumbColor="#f4f3f4" ios_backgroundColor="#878787" onValueChange={toggleSwitch} value={isEnabled} /></View><View style={{alignItems: 'center', justifyContent: 'center', marginTop: 32}}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 275, width: 275, borderRadius: 275 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 225, width: 225, borderRadius: 225 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 175, width: 175, borderRadius: 175 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 125, width: 125, borderRadius: 125 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, height: 75, width: 75, borderRadius: 75 / 2, alignItems: 'center', justifyContent: 'center' }}><View style={{position: 'absolute', justifyContent: 'center', alignItems: 'center'}}><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '45deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '90deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '135deg'}], position: 'absolute', }} /><View style={{ borderColor: '#DBDBDB', borderWidth: 1, width: 275, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '180deg'}], position: 'absolute', }} /><View style={{position: 'absolute', justifyContent: 'center', alignItems: 'center'}}><View style={{ backgroundColor: '#000', borderWidth: 3, width: 90.5, bottom: -3, left: 0, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '0deg'}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, bottom: -52, right: -116, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '45deg'}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, alignItems: 'center', justifyContent: 'center', bottom: -72, left: -70, transform: [{ rotate: '90deg'}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '135deg'}, {translateX: 68}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '180deg'}, {scaleX: 0}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '225deg'}, {translateX: 68}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: 137.5, alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '270deg'}, {translateX: 68}], position: 'absolute', }} /><View style={{ backgroundColor: '#000', borderWidth: 3, width: (137.5), alignItems: 'center', justifyContent: 'center', transform: [{ rotate: '315deg'}, {translateX: 68}], position: 'absolute', }} /></View></View></View></View></View></View></View></View></View> );