title: React Native - place two items side by side
body: <p>I'm trying to place an item on the right side of another, but instead it always stays on the bottom of the first item, like this:</p>
  <p><a href="https://i.stack.imgur.com/aYNAf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aYNAf.png" alt="enter image description here" /></a></p>
  <p>So, right now I'm just trying to place the &quot;TEST&quot; text right next to that side menu.</p>
  <p>Here's my code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;View style = {{flex: 1, width: Dimensions.get('window').width,
          height: Dimensions.get('window').height}}&gt;
  
            &lt;Workspace 
              img={require('./images/quarto.png')}/&gt;
            
            &lt;ScrollView&gt;
              &lt;Header&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
                &lt;HeaderItem img={require('./images/camera.png')}/&gt;
              &lt;/Header&gt;
            &lt;/ScrollView&gt;
            
            &lt;ScrollView style = {{flexDirection: 'row'}}&gt;
              {this.sideMenuShow()}
              &lt;ScrollView style = {{alignSelf: 'flex-end'}}&gt;
              &lt;Text style = {{color: 'white'}}&gt;TEST&lt;/Text&gt;
              &lt;/ScrollView&gt;
            &lt;/ScrollView&gt;
            
            &lt;Footer&gt;
              &lt;View style = {styles.logoContainerStyle}&gt;
                &lt;Image
                  style = {styles.logoStyle}
                  source = {require('./images/magicalStage.png')}
                  /&gt;
              &lt;/View&gt;
              &lt;View 
              style = {{width: '70%', flexDirection: 'row', justifyContent:'flex-end', alignItems: 'flex-end'}}&gt;
                &lt;TouchableOpacity&gt;
                  &lt;Text style = {{color: 'white'}}&gt;Workspace  &lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
                &lt;TouchableOpacity&gt;
                  &lt;Text style = {{color: 'white', textAlign: 'right'}}&gt;Catalogue&lt;/Text&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
            &lt;/Footer&gt;
          &lt;/View&gt;
  </code></pre>
  <p>If it helps, the side menu code is:</p>
  <pre class="lang-js prettyprint-override"><code>sideMenuShow() {
    const furnitureList = &lt;FurnitureList /&gt;;
  
       if(!this.state.hideMenu) {
         
          return(
          &lt;SideMenu&gt; 
            &lt;MenuButton
            source = {require('./images/left-material.png')}
            onPress = {() =&gt; this.setState({hideMenu: true})}/&gt;
            &lt;Text style = {{color: 'white', fontSize: 16, fontWeight: 'bold'}}&gt;Furniture&lt;/Text&gt;
            
              &lt;SideMenuItem 
                onPress = {() =&gt;
                  !this.state.hideList ?
                  this.setState({hideList: true, hideListSofa: false, hideListBoxes: false})
                  : this.setState({hideList: false})
                  
                  }
                text='Test'
                &gt;
                &lt;/SideMenuItem&gt;
                {
                this.state.hideList ? 
                &lt;FurnitureList
                source = {require('./images/image.png')}/&gt;
                : null
                }
          &lt;/SideMenu&gt;
          );
          
         }
       else {
           return(
            &lt;SmallSideMenu&gt; 
              &lt;MenuButton 
              source = {require('./images/right-material.png')}
              onPress = {() =&gt; this.setState({hideMenu: false})}/&gt;
            &lt;/SmallSideMenu&gt;
           );
       }
   }
  </code></pre>
  <p>I thought I'd get what I want by setting the flexDirection of the ScrollView wraping both items to 'row', but it's not working as I thought it would. Any help would be great!</p>