How to make boxes scroll horizontally? - ios

Question

I'm new to react native, and I'm trying to make a social media app. I want to make it where you can scroll vertically to view certain posts, and then scroll horizontally to see other posts by the same user. I downloaded a UI framework, and it scrolls vertically, but how would I make the posts scroll horizontally?
Home.js
import React from 'react';
import {View,Text,Image,ImageBackground,TouchableOpacity} from 'react-native';
import {ScrollView,TextInput} from 'react-native-gesture-handler';
import Icon from '#expo/vector-icons/Entypo';
import Posts from '../screens/Posts'
export default class Home extends React.Component{
state={
popularSelected:true
}
onTabPressed=()=>{
this.setState({popularSelected:!this.state.popularSelected})
}
render(){
return(
<ScrollView
showsVerticalScrollIndicator={false}
style={{
height:"100%",
backgroundColor:"#b5f8d9"
}}
>
<View style={{
height:260,
width:"100%",
paddingHorizontal:35
}}>
<View style={{
flexDirection:"row",
width:"100%",
paddingTop:40,
alignItems:"center"
}}>
<View style={{
width:"50%"
}}>
<Image source={require('../images/Untitled.png')}
style={{width:20,height:20}}/>
</View>
<View style={{
width:"50%",
alignItems:"flex-end",
}}>
<Icon name = "dots-two-vertical"
size={22}
color="#d2d2d2"
style={{
marginRight:-7,
marginTop:7
}}/>
</View>
</View>
<View>
<Image source={require('../images/logoVizzey.jpg')} style={{width:200, height:80}}/>
</View>
{/* <Text style={{
fontFamily:"Bold",
fontSize:25,
color:"#FFF",
paddingVertical:25
}}>Vizzey</Text> */}
<View style={{
flexDirection:"row",
borderColor:"#9ca1a2",
borderRadius:20,
borderWidth:0.2,
paddingVertical:5,
alignItems:"center"
}}>
<TextInput
placeholder="search inispiration ..."
style={{
paddingHorizontal:20,
fontFamily:"Medium",
fontSize:11,
width:"90%",
color:"#9ca1a2"
}}
/>
<Icon name="magnifying-glass"
size={15}
color="#9ca1a2"/>
</View>
</View>
<View style={{
backgroundColor:"#FFF",
borderTopLeftRadius:40,
borderTopRightRadius:40,
height:1000,
paddingHorizontal:35
}}>
<View style={{
flexDirection:"row",
paddingTop:20
}}>
<TouchableOpacity
onPress={this.onTabPressed}
style={{
borderBottomColor:this.state.popularSelected ? "#044244":"#FFF",
borderBottomWidth:4,
paddingVertical:6
}}
>
<Text style={{
fontFamily:"Bold",
color:this.state.popularSelected ? "#044244":"#9ca1a2"
}}>MOST POPULAR</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onTabPressed}
style={{
borderBottomColor:this.state.popularSelected ? "#FFF":"#044244",
borderBottomWidth:4,
paddingVertical:6,
marginLeft:30
}}
>
<Text style={{
fontFamily:"Bold",
color:this.state.popularSelected ? "#9ca1a2":"#044244"
}}>RECENT</Text>
</TouchableOpacity>
</View>
<View style={{
flexDirection:"row"
}}>
<Posts
onPress={()=>this.props.navigation.navigate('Detail')}
name="Max Bator"
profile={require('../images/p1.jpg')}
photo={require('../images/5.jpg')}
/>
<View style={{
height:160,
backgroundColor:"#3c636c",
width:20,
marginLeft:20,
marginTop:120,
borderTopLeftRadius:20,
borderBottomLeftRadius:20
}}>
</View>
</View>
<View style={{
flexDirection:"row"
}}>
<View style={{
height:160,
backgroundColor:"#3c636c",
width:20,
marginLeft:-40,
marginRight:20,
marginTop:120,
borderTopRightRadius:20,
borderBottomRightRadius:20
}}>
</View>
<Posts
onPress={()=>this.props.navigation.navigate('Detail')}
name="Erka Berka"
profile={require('../images/p2.jpg')}
photo={require('../images/6.jpg')}
/>
</View>
<View style={{
flexDirection:"row"
}}>
<Posts
onPress={()=>this.props.navigation.navigate('Detail')}
name="Max Bator"
profile={require('../images/p1.jpg')}
photo={require('../images/3.jpg')}
/>
<View style={{
height:160,
backgroundColor:"#3c636c",
width:20,
marginLeft:20,
marginTop:120,
borderTopLeftRadius:20,
borderBottomLeftRadius:20
}}>
</View>
</View>
</View>
</ScrollView>
)
}
}
Posts.js
import React from 'react';
import {View,Text,Image,ImagBackground, ImageBackground} from 'react-native';
import Icon from "#expo/vector-icons/Entypo"
import {TouchableOpacity} from 'react-native-gesture-handler';
export default class Posts extends React.Component{
state={
liked:false
}
onLike=()=>{
this.setState({liked:!this.state.liked})
}
render(){
const {name,profile,photo,onPress} = this.props
return(
<View>
<View style={{
flexDirection:"row",
paddingTop:25,
alignItems:"center"
}}>
<View style={{width:"20%"}}>
<Image
source={profile}
style={{
width:45,
height:45,
borderRadius:13
}}
/>
</View>
<View style={{
width:"60%"
}}>
<Text style={{
fontFamily:"Bold",
fontSize:14,
color:"#044244"
}}>{name}</Text>
<Text style={{
fontFamily:"Medium",
fontSize:12,
color:"#9ca1a2"
}}>
2 mins ago
</Text>
</View>
<View style={{
width:"20%",
alignItems:"flex-end"
}}>
<Icon
name="sound-mix"
color="#044244"
size={20}
/>
</View>
</View>
<View style={{
flexDirection:"row",
width:"100%",
paddingTop:20
}}>
<ImageBackground
source={photo}
style={{
width:"100%",
height:220,
}}
imageStyle={{
borderRadius:30
}}
>
<View style={{
height:"100%",
flexDirection:"row",
alignItems:'flex-end',
justifyContent:"flex-end"
}}>
<TouchableOpacity
onPress={onPress}
style={{
marginBottom:20,
borderRadius:5,
padding:5,
backgroundColor:"#e8e8e8"
}}
>
<Icon name="forward"
color="#044244"
size={20}/>
</TouchableOpacity>
<TouchableOpacity
onPress={this.onLike}
style={{
marginBottom:20,
borderRadius:5,
padding:5,
backgroundColor:"#e8e8e8",
marginLeft:10,
marginRight:20
}}
>
<Icon name= {this.state.liked === true ? "heart":"heart-outlined"}
color= {this.state.liked===true? "red":"#044244"}
size={20}/>
</TouchableOpacity>
</View>
</ImageBackground>
</View>
</View>
)
}
}
Here is a picture of the UI:

Answer 1

Add horizontal attribute to ScrollView or any Scroll component.
<ScrollView horizontal></ScrollView>

Answer 2

I see that you have added ImageBackground twice in your imports in post.js file
to make it scroll horizontally, use the property horizontal
<ScrollView
horizontal
>
//other code goes here
</ScrollView>
see docs
https://reactnative.dev/docs/scrollview