How to center a view inside another view in React Native?
<p>I want to center one view inside another one in React Native.</p>

<p>This is my code:</p>

<pre><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 (
      &lt;TouchableOpacity activeOpacity={0.4}
                        onPress={this._buttonPressAction}
                        style={styles.container}&gt;
        &lt;View style={styles.outerCircle}&gt;
          &lt;View style={styles.innerCircle} /&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
    );
  }
}
</code></pre>

<p>And this is how it looks:
<a href="https://i.stack.imgur.com/bl4nu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bl4nu.png" alt="non-centered-cirlces"></a></p>

<p>I want to have blue and red circles concentric. How do I achieve that?</p>