how to Place Items on a circle in React Native - reactjs

Question

I am developing something similar to this
I have many ways to acheive this using css and Scss but i couldn't find anything for react native ,if anyone has any idea how to do this.Their help will be much appreciated.Thank you.

Answer 1

Use cos and sin function to place the images
Working example: https://snack.expo.io/#msbot01/trusting-bagel
import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';
import Highlighter from 'react-native-highlight-words';
const size = 200 ;
const symbolSize = 16;
const radius = size / 2;
const center = radius;
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
higightedTexts:''
}
}
componentDidMount(){
this.setupA();
this.setupB();
this.setupC();
this.setupD();
}
degToRad(deg) {
return deg * Math.PI / 180;
}
setupA(){
const angleRad = this.degToRad(0);
const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
this.setState({
x: x,
y: y
})
}
setupB(){
const angleRad = this.degToRad(90);
const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
this.setState({
x2: x,
y2: y
})
}
setupC(){
const angleRad = this.degToRad(180);
const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
this.setState({
x3: x,
y3: y
})
}
setupD(){
const angleRad = this.degToRad(270);
const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
this.setState({
x4: x,
y4: y
})
}
render() {
return (
<View style={{ flex: 1, justifyContent:'center', alignItems:'center' }}>
<View
style={[{backgroundColor:'red',
width: size,
height: size,
borderRadius: size / 2,
}]}
>
<Image
style={{width: 40,
height: 40,
borderRadius:20,
left: this.state.x-20,
top: this.state.y ,
position:'absolute'}}
source={{
uri:
'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
}}
/>
<Image
style={{width: 40,
height: 40,
borderRadius: 20,
left: this.state.x2,
top: this.state.y2-20 ,
position:'absolute'}}
source={{
uri:
'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
}}
/>
<Image
style={{width: 40,
height: 40,
borderRadius: 20,
left: this.state.x3,
top: this.state.y3 ,
position:'absolute'}}
source={{
uri:
'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
}}
/>
<Image
style={{width: 40,
height: 40,
borderRadius: 20,
left: this.state.x4-10,
top: this.state.y4,
position:'absolute'}}
source={{
uri:
'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
}}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({});

Answer 2

React native doesn't have any special library do this you can do this by using CSS:
You can do something like this:
import { Dimensions, View, Image } from 'react-native';
import React, { Component } from 'react';
class App extends Component{
render(){
return(
<View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
<View
style = {{
borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
width: Dimensions.get('window').width * 0.8,
height: Dimensions.get('window').width * 0.8,
borderWidth:5,
borderColor:"red",
justifyContent: 'center',
alignItems: 'center'
}}
underlayColor = '#ccc'
>
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.7}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,right: 20}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,left: 20}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.7}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,right: 20}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,left: 20}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,left:-20}} />
<Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,right:-20}} />
</View>
</View>
)
}
}
export default App;
Hope this helps!