2

I'm using the react-native-svg library to create a kind of alphabetical slider for viewing friends in an app.

Essentially you move a circle around a circular path, each 13.84 (360/26) degrees moves you along a letter of the alphabet, there is an outer circle where I am displaying circles, these circles represent your friends whose name start with the selected letter.

I've got this working with circles, i'm now having trouble moving this concept on to work with the friend object's image.

This react-native-svg repository does not include the Pattern SVG element, which is what I was initially planning on experimenting with to fulfil this feature, since finding out it does not include this element I have experimented with replacing the Circle element with an Image element, but the positioning & sizing of the image completely messes up the positioning logic which is working for the circles.

I've posted two code snippets below, the 'master' render method which contains all of this SVG functionality, and the code which generates said circles (need to be images) below that.

I've also included some images to give some context behind what i'm trying to achieve at the bottom of the question - the black circles I am trying to convert to images.

Render method for the 'master' component below:

<Svg onLayout={this.onLayout} width={width} height={height}>

                    <Circle cx={cx} cy={cy} r={r} stroke={outlineStroke} strokeWidth={outlineStrokeWidth} fill="none"/>

                    <Circle cx={cx} cy={cy} r={r*0.75} stroke={outlineStroke} strokeWidth={outlineStrokeWidth} fill="none"/>


                    <Path 
                        id="foo" 
                        stroke={meterColor} 
                        strokeWidth={5} 
                        fill="none"
                        d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}
                    />




                    <Text 
                        x={r/2 + 40} 
                        y={r/2} 
                        fontSize="80"
                        fill="#0f0"
                    >
                        {this.props.text}
                    </Text>

                    <G x={endCoord.x-7.5} y={endCoord.y-7.5}>
                        <Circle cx={7.5} cy={7.5} r={28} fill={meterColor} {...this._panResponder.panHandlers}/>
                    </G>

                    {this.generateAvatars()}


                </Svg>

Relevant this.generateAvatars() code below (from above snippet) - this isn't a complete snippet as I don't want to saturate the question with irrelevant code.

 ...

 friends_to_display.push({
     x: Math.sin( (i * unit) * Math.PI / 180) * r + center_x,
     y: Math.cos( (i * unit) * Math.PI / 180) * r + center_y
 });

 ...

 return (

        <G>
            {
                friends_to_display.map((p) => {

                    return (
                        <Circle 
                            cx={p.x}
                            cy={p.y}
                            r={15}
                        />


                    );
                })
            }
        </G>
    );

enter image description here enter image description here

If anyone can advise an alternative technology for achieving this using react-native then I am all ears!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.