How to center a view inside another view in React Native?

Question

I want to center one view inside another one in React Native.

This is my code:

const styles = StyleSheet.create({   container: {     flex: 1,     flexDirection: 'column',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: 'yellow',   },   outerCircle: {     backgroundColor: 'blue',     width: 100,     height: 100,     borderRadius: 100/2,   },   innerCircle: {     backgroundColor: 'red',     width: 80,     height: 80,     borderRadius: 80/2,   } });  export default class RecorderButton extends React.Component {    _buttonPressAction() {     Alert.alert("button pressed");   }    render() {     return (       <TouchableOpacity activeOpacity={0.4}                         onPress={this._buttonPressAction}                         style={styles.container}>         <View style={styles.outerCircle}>           <View style={styles.innerCircle} />         </View>       </TouchableOpacity>     );   } } 

And this is how it looks:

I want to have blue and red circles concentric. How do I achieve that?

Answer 1

You are already centering in the container. Follow the same for outerCircle as well.

  outerCircle: {     backgroundColor: 'blue',     width: 100,     height: 100,     borderRadius: 100/2,     justifyContent: 'center',     alignItems: 'center'   },