How can I make a Text and a Button on the same level
<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>