React Native Concentric circles - reactjs

Question

I'm building an app with React Native, and I was wondering how I'd go about coding 3 concentric circles like so:
They would need to be each be touchable.

Answer 1

There are many ways of achieving this. Even though this question isn't the most appropriate to be on StackOverflow, I did some code here to help you.
import React from 'react'
import {
StyleSheet,
TouchableOpacity,
View
} from 'react-native'
export default class AboutScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.circlesContainer}>
<TouchableOpacity style={styles.circle_1} />
<TouchableOpacity style={styles.circle_2} />
<TouchableOpacity style={styles.circle_3} />
</View>
</View>
)
}
}
// Base radius.
const BASE_SIZE = 300
const styles = StyleSheet.create({
container: {
flex:1,
alignItems:'center',
justifyContent: 'center',
backgroundColor: '#E56A00'
},
circlesContainer:{
width: BASE_SIZE,
height: BASE_SIZE,
alignItems: 'center',
},
circle_1:{
top:0,
position: 'absolute',
width:BASE_SIZE,
height:BASE_SIZE,
borderRadius: BASE_SIZE/2,
backgroundColor: '#FF8100'
},
circle_2:{
top:BASE_SIZE*0.1, // The amount remaining
left:BASE_SIZE*0.1,
position: 'absolute',
width:BASE_SIZE*0.8, // 80% of the base size
height:BASE_SIZE*0.8,
borderRadius: BASE_SIZE/2,
backgroundColor: '#FF9D2E'
},
circle_3:{
top:BASE_SIZE*0.2,
left:BASE_SIZE*0.2,
position: 'absolute',
width:BASE_SIZE*0.6,
height:BASE_SIZE*0.6, // 60% of the base size
borderRadius: BASE_SIZE*0.6/2,
backgroundColor: '#FFFFFF'
},
})
The result on my code looked like this:
Be aware that there are a lot of ways to optimise this code, but at least it might be a good start to you.
Good luck!

Answer 2

You can use a View with a borderRadius, surrounded by another View, also with a borderRadius.
<View style={styles.borderExternal}>
<View style={styles.myCircle} />
</View>