title: How to align a TouchableOpacity with an icon to the right?
body: <p>I am trying to put my icon on the right side of the header. How do I do it? I am pretty new to react-native layout</p>
  
  <p>I have tried alignSelf: 'flex-end' and right: 0, none of them will work.</p>
  
  <pre><code>                    &lt;View style={Style.addModalContainer}&gt;
  
                          &lt;View style={Style.addModalHeader}&gt;
  
                              &lt;TouchableOpacity style={Style.addModalBackButton} hitSlop={{top: 10, bottom: 10, left: 10, right: 10}} onPress={() =&gt; this.openAddAvailabilityModal(false)}&gt;
  
                                  &lt;Ionicons name="ios-arrow-back" size={24} /&gt;
  
                              &lt;/TouchableOpacity&gt;
  
                          &lt;/View&gt;
  
                      &lt;/View&gt;
  </code></pre>
  
  <pre><code>    addModalContainer: {
          height: '90%',
          width: '95%',
          backgroundColor: 'white',
          alignSelf: 'center',
          borderColor: '#FFFFFF',
          borderWidth: StyleSheet.hairlineWidth,
          borderRadius: 5,
      },
      addModalHeader: {
          flexDirection: 'row',
          width: '100%',
          height: 50,
          alignItems: 'center',
          borderBottomColor: '#DDDDDD',
          borderBottomWidth: StyleSheet.hairlineWidth,
      },
      addModalBackButton: {
          alignSelf: 'flex-end',
          right: 0,
      },
  </code></pre>
  
  <p>I want the icon to be aligned on the right</p>