title: How can I make a Text and a Button on the same level
body: <p>I'm new to react-native and using flex box, I normally use Grid supplied by bootstrap or other css frameworks.</p>
  
  <p>I'm trying to get the word <strong>Settings</strong> in the middle and my <strong>down arrow</strong> 
  on the right side to toggle away the modal but all I can get is this:</p>
  
  <p><a href="https://i.stack.imgur.com/yj7gM.png" rel="nofollow"><img src="https://i.stack.imgur.com/yj7gM.png" alt="enter image description here"></a></p>
  
  <p>React code:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Text, View } from 'react-native'
  import { styles } from './styles'
  import ViewContainer from 'Reddit/app/components/ViewContainer'
  import StatusBarBg from 'Reddit/app/components/StatusBarBg'
  import Icon from 'react-native-vector-icons/EvilIcons'
  
  class SettingsIndexScreen extends Component {
    render() {
      return (
        &lt;ViewContainer&gt;
          &lt;StatusBarBg /&gt;
          &lt;View style={styles.collapseIconContainer}&gt;
            &lt;Text&gt;Settings&lt;/Text&gt;
            &lt;Icon name="arrow-down" size={40} /&gt;
          &lt;/View&gt;
        &lt;/ViewContainer&gt;
      )
    }
  }
  
  export default SettingsIndexScreen
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>import { StyleSheet } from 'react-native'
  
  export const styles = StyleSheet.create({
    collapseIcon: {
  
    },
    toolbar: {
      flexDirection: 'column'
    },
    toolbarTitle: {
      textAlign: 'center',
      flex: 1,
      marginTop: 20
    },
    toolbarButton: {
      textAlign: 'right',
      marginRight: 8
    }
  });
  </code></pre>
  
  <p>Can't seem to figure out how to get them on the same level</p>