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:![enter image description here]()