title: How to center a view inside another view in React Native?
body: <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>