Question 102254 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – How to create a Rounded Image inside another component in React Native?

enter image description here

I am trying to create this UI using @shopify/react-native-skia package.
(Specifically using @shopify/react-native-skia package)

While creating, I was unable to get a round Image inside the circle.. I want the avatar image inside the circle…Can anyone help me with this?

Here’s the code I tried :

const Home = () => {

    const [isLoading, setIsLoading] = useState(true)

    const image = //Image url


    useEffect(() => {

            image ? setIsLoading(false) : null

    }, [])

    return (

        <ScrollView style={{flex : 1, backgroundColor : '#010117'}}>

            {!isLoading && 

                <Canvas style={{height : h}}>

                    <Group >

                        <Circle cx={xmiddle} cy={h*0.1} r={radius}>

                            <Paint color={"#060d29"}/>

                            <Paint color={'#a1a1ab'} style='stroke' strokeWidth={2}/>

                        </Circle>

                    </Group>

                </Canvas>

            }

            {isLoading && <ActivityIndicator animating color={"#a1a1ab"} size="large" style={{top : h*0.4}}/>}

        </ScrollView>

    )

}
Tags:

2

Answers


  1. 0

    You can try to create everything from a component you put it in a circle shape then you add a border like this :

    <Group >
return (
...
<Group>
  <Image style={styles.logo} source={require(image)} />
</Group>
...
  );
}


const styles = StyleSheet.create({
  logo: {
    height: 100,
    width: 100,
    borderRadius:150,
    borderWidth: 5,
    borderColor:'white',
  }
});
    Login or Signup to reply.
  2. 0

    You can round your Image using Group component

    Here is documentation link: https://shopify.github.io/react-native-skia/docs/group#clip-rounded-rectangle

    Here is a code example where I place the image in the center of the screen and render circle image

        const size = 120;
    const padding = 0;
    const r = 60;

    const roundedRect = rrect(rect(padding, padding, size - padding * 2, size - padding * 2), r, r);

    return (
        <Canvas style={styles.container}>
            <Group origin={point(width / 2 - 60, height / 2 - 60)} clip={roundedRect}>
                <Image
                    x={width / 2 - 60}
                    y={height / 2 - 60}
                    image={profileImage}
                    height={120}
                    width={120}
                />
            </Group>

        </Canvas>
    );

    Here is the result:
    example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search