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

Question

I want to center one view inside another 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 here is what it looks like:

I want the blue and red circles to be concentric. How do I achieve this?

Answer 1

You are already centered in the container. Follow the same for outerCircle.

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