CODEWITHSUNDEEP
react-native
Diogo Carvalho
Diogo Carvalho

Reputation: 255

React Native - place two items side by side

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:

enter image description here

So, right now I'm just trying to place the "TEST" text right next to that side menu.

Here's my code:

<View style = {{flex: 1, width: Dimensions.get('window').width,
        height: Dimensions.get('window').height}}>

          <Workspace 
            img={require('./images/quarto.png')}/>
          
          <ScrollView>
            <Header>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
            </Header>
          </ScrollView>
          
          <ScrollView style = {{flexDirection: 'row'}}>
            {this.sideMenuShow()}
            <ScrollView style = {{alignSelf: 'flex-end'}}>
            <Text style = {{color: 'white'}}>TEST</Text>
            </ScrollView>
          </ScrollView>
          
          <Footer>
            <View style = {styles.logoContainerStyle}>
              <Image
                style = {styles.logoStyle}
                source = {require('./images/magicalStage.png')}
                />
            </View>
            <View 
            style = {{width: '70%', flexDirection: 'row', justifyContent:'flex-end', alignItems: 'flex-end'}}>
              <TouchableOpacity>
                <Text style = {{color: 'white'}}>Workspace  </Text>
              </TouchableOpacity>
              <TouchableOpacity>
                <Text style = {{color: 'white', textAlign: 'right'}}>Catalogue</Text>
              </TouchableOpacity>
            </View>
          </Footer>
        </View>

If it helps, the side menu code is:

sideMenuShow() {
  const furnitureList = <FurnitureList />;

     if(!this.state.hideMenu) {
       
        return(
        <SideMenu> 
          <MenuButton
          source = {require('./images/left-material.png')}
          onPress = {() => this.setState({hideMenu: true})}/>
          <Text style = {{color: 'white', fontSize: 16, fontWeight: 'bold'}}>Furniture</Text>
          
            <SideMenuItem 
              onPress = {() =>
                !this.state.hideList ?
                this.setState({hideList: true, hideListSofa: false, hideListBoxes: false})
                : this.setState({hideList: false})
                
                }
              text='Test'
              >
              </SideMenuItem>
              {
              this.state.hideList ? 
              <FurnitureList
              source = {require('./images/image.png')}/>
              : null
              }
        </SideMenu>
        );
        
       }
     else {
         return(
          <SmallSideMenu> 
            <MenuButton 
            source = {require('./images/right-material.png')}
            onPress = {() => this.setState({hideMenu: false})}/>
          </SmallSideMenu>
         );
     }
 }

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!

Upvotes: 2

Views: 9006

Answers (2)

Pranav Graymatter
Pranav Graymatter

Reputation: 1

{ flexDirection: 'row' } as mentioned in above answer works.

You need to apply this to parent.

For example: let's say your HTML equivalent looks like this:

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

then you've to apply flexDirection: 'row' to 'parent' NOT 'child'

This will make child1 and child2 render horizontally next to each other in same line.

Upvotes: 0

chrisby
chrisby

Reputation: 894

You placed your <Text style = {{color: 'white'}}>TEST</Text> Component inside a ScrollView.

Try to add contentContainerStyle={{ flexDirection: 'row'}} to the parent ScrollView or just remove the parent ScrollView. Hope it helps.

Upvotes: 1

Related Questions