React Native - place two items side by side - react-native

Question

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:
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!

Answer 1

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.

Answer 2

{ 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.