I'm trying to map images in an array horizontally, but they're being mapped vertically no matter what I do.
const numberOfRows = Math.ceil(images.length / 3);
const result = Array(numberOfRows)
.fill()
.map((_, rowIndex) => (
<View key={rowIndex}>
{images
.slice(rowIndex * 5, rowIndex * 5 + 5)
.map((image, imageIndex) => (
<TouchableOpacity
key={imageIndex}
onPress={() => alert("image pressed!")}
>
<Image
source={{
uri:
"https://miro.medium.com/max/814/1*Cxm5opOziPF5iavnDSYHLg.png"
}}
style={{ width: 100, height: 100 }}
/>
</TouchableOpacity>
))}
</View>
));
What am I doing wrong here?
The standard flex-direction of a View is vertical. By adding flexDirection: 'row' to your parent View, you can overwrite this behavior.
Code
<View key={rowIndex} style={{flexDirection: 'row'}}>
...
</View>
Working Snack:
https://snack.expo.io/rygY2Vb3H
By default react-native View flex-direction was column. So to align vertically add flexDirection: 'row' to view :
<View key={rowIndex} style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap'}}>
... // your image map code
</View>
You just need to add flexDirection to your View.
<View key={rowIndex} style={{flex: 1, flexDirection: 'row'}}>
...
</View>
You can read more about flexDirection from here.
Related
So i am currently making a messaging application and this needs to be able to live messages, I am using a flat list to display these items and everytime i append an item to the messageFetch it takes ages for the flat list to load, (at any time there could be 100's to 1000's of items in the list). How can I speed this up? Also the components are of diffrent sizes.
flatlist component:
<View style={styles.container}>
<View style={styles.topBar} focusable>
<Text style={{ fontFamily: "Roboto-Regular", fontSize: 17, color: "white" }}>{name}</Text>
</View>
<View style={styles.mainChat} focusable>
<View style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]}>
<ActivityIndicator style={[styles.loading, { display: loadedFinished ? "none" : "flex" }]} />
</View>
<FlatList
inverted
ref={list}
data={messageFetch.reverse()}
renderItem={Message}
keyExtractor={(item) => item.index}
/>
</View>
</View>
loadedFinished only runs once and stops at about 3 seconds.
Message Component:
function Message({ item }) {
if (item.embed.type != undefined) {
return <Text>hello<Text>
}
return (
<View style={[mesgStyles.mainMessage, { flexDirection: item.original ? "row-reverse" : "row" }]}>
<Image style={mesgStyles.userPfp} resizeMode="contain" source={{ uri: item.pfp }}></Image>
<View style={mesgStyles.spacer} />
<View style={mesgStyles.messageBody}>
<Text style={mesgStyles.mainText}>{item.text}</Text>
</View>
</View>
);
}
Any help would be greatly appreciated. Thanks
in my react-native app I have a scrollview where my list items are row wrapped (flexDirection:'row',flexWrap:'wrap'), however because of this my scrollview won't scroll for some reason...
My scrollview:
<View style={{flex:1}}>
<ScrollView vertical={true} contentContainerStyle={{ borderWidth:1,flex:1,flexDirection:'row',flexWrap:'wrap',alignItems: 'flex-start'}}>
{root.userStore.passionOptions.map((item,index) => {return (
<Text key={item} onPress={ ()=>{ Alert.alert('kaka') } } style={{ fontSize:18,padding:5,paddingLeft:10,paddingRight:10,color:'rgb(125,125,125)',borderRadius:35,borderWidth:1,borderColor:'rgba(0,0,0,0.1)',margin:5 }}>{item}</Text>
)
})}
</ScrollView>
</View>
EDIT:I tried removing flexWrap and flexDirection property and it won't scroll neither
It works for me like this i made the scrollView the outter component
<ScrollView>
<View
lightColor="#eee"
style={{ paddingHorizontal: 7, paddingVertical: 5 }}
>
{children}
</View>
</ScrollView>
Reason not to work:
Your flexDirection is conflicting with ScrollDirection.
Solution:
So to avoid conflict you can have another View inside ScrollView and do the flexWrap logic
<ScrollView>
<View
style={{
borderWidth:1,
flex:1,
flexDirection:'row',
flexWrap:'wrap',
alignItems: 'flex-start'
}}
>
...Your Views over here...
</View>
</ScrollView>
I have a FlatList component, consisting of 3 sections:
<View style={{ flex: 1 }}>
<FlatList
ListHeaderComponent={Comp1}
ListFooterComponent={<Comp2 style={{ flexGrow: 1, justifyContent: 'flex-end' }}/>}
renderItem={Comp3}
contentContainerStyle={{ flexGrow: 1 }}
/>
</View>
By default, the ListFooterComponent will render right after the ListHeaderComponent, if data.length is 0.
I need to render it at the bottom all the time.
One workaround I've found so far is to provide an empty view for ListEmptyComponent. In this case, it looks fine, until I add at least one item - then it sticks to the top again.
Is it possible to attach ListFooterComponent to the bottom by default?
The blue color is the FlatList, the red color - ListFooterComponent
If it needs to be on the bottom of the screen at all times, you can wrap the separate parts in a ScrollView
render() {
return (
<ScrollView style={{flex: 1}}>
<Comp1/>
<FlatList
style={{flex: 1}}
renderItem={Comp3}
/>
<Comp2/>
</ScrollView>
);
}
Before rederising your View, a good idea is to set your height according to the size of the screen. Something like:
const {height} = Dimensions.get ('window');
The View would look like this:
<View style = {{flex: 1, height: height}}>
Add position: 'relative' to the View:
<View style = {{flex: 1, height: height, position: 'relative'}}>
Then add ListFooterComponentStyle to FlatList:
ListFooterComponentStyle = {{
backgroundColor: '# ccc',
position: 'absolute,
width: '100%',
bottom: 0
}}
Show a complete example function component:
const {height} = Dimensions.get('window'); //capture the screen size
return (
<SafeAreaView style={{flex:1,height:height,backgroundColor:'#f5f5f5', position:'relative'}}>
<FlatList
data = {YOUR_DATA}
renderItem = {renderItem}
keyExtractor = {item => item.idItem}
numColumns = {2} // Divide list items into 2 columns (optional)
onEndReached = {LOAD_MORE_DATA}
onEndReachedThreshold = {0.1} //0.1 = 10%
ListFooterComponent = {YOUR_COMPONENT_FOOTER}
ListFooterComponentStyle={{
backgroundColor:'#ccc',
position:'absolute',
width:'100%',
bottom:0
}}
/>
</SafeAreaView>
)
add flexGrow: 1 to contentContainerStyle of Flatlist
add flexGrow: 1 to ListFooterComponentStyle of Flatlist
add flex: 1 and justifyContent: "flex-end" to View of container used in ListFooterComponent
<FlatList
contentContainerStyle = {{flexGrow: 1}}
listFooterComponentStyle = {{flexGrow: 1}}
listFooterComponent = {()=>(
<View style={{
flex:1,
justifyContent: "flex-end"
}}>
...Component you want at bottom
</View>
)}
/>
I have 2 columns in flatList and I'm trying to align the header component besides the items itself,
Like this
But I got the "add image" above then the items below it,
I'm trying to solve it by using flexWrap in content container style but since I was using numColumns i got a warning that tells flexWrap not supported and use numColumns instead.
so i don't know how can i solve it, so if anybody can help in this case!
here's a snack
Code snippet
const renderItems = ({ item, index }) => {
return (
<View style={{ flex: 0.5, margin: 4 }}>
<View style={[styles.imgContainer, { borderWidth: 0 }]}>
<Image
style={styles.imgStyle}
source={{
uri:
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR1K8ypPsfNVQU8lVxl1i2_ajismMS_w6FA4Q&usqp=CAU',
}}
/>
</View>
</View>
);
};
const renderHeader = () => (
<TouchableOpacity
// onPress={appeandImgs}
style={styles.imgContainer}>
<Image
style={styles.imgStyle}
source={{
uri: 'https://static.thenounproject.com/png/3322766-200.png',
}}
/>
</TouchableOpacity>
);
const keyExtractor = (item, index) => String(index);
<FlatList
data={[1,2,3]}
style={styles.flatList}
numColumns={2}
renderItem={renderItems}
ListHeaderComponentStyle={{
backgroundColor: '#ff0',
width: ScreenWidht / 2 - 20,
}}
keyExtractor={keyExtractor}
ListHeaderComponent={renderHeader}
columnWrapperStyle={{
backgroundColor: '#f07',
}}
contentContainerStyle={{
flexGrow: 1,
paddingBottom: 12,
paddingTop: 15,
}}
/>
i'm having trouble formatting one of my screens.
I want to place 3 textinputs in a row, and right below them a button and a checkbox, there's a picture below for more details (it's a crossed box and a question mark as of now, don't mind it i'll fix it later). But i'm getting a huge unwanted margin between the two rows, and i can't get rid of it.
This is the code
<View style = {styles.container}>
<View style={styles.rowInit2}>
<View style={{flex:1}}>
<TextInput style ={styles.input}
maxLength={25}
onChangeText={UserEmail => this.setState({UserEmail})}
placeholder = 'Item'
underlineColorAndroid='rgba(0,0,0,0.1)'/>
</View>
<View style={{flex:1}}>
<TextInput style ={styles.input2}
maxLength={3}
onChangeText={UserEmail => this.setState({UserEmail})}
placeholder = 'Cantidad'
underlineColorAndroid='rgba(0,0,0,0.1)'/>
</View>
<View style={{flex:1}}>
<TextInput style ={styles.input2}
maxLength={5}
placeholder = 'Precio'
onChangeText={UserEmail => this.setState({UserEmail})}
underlineColorAndroid='rgba(0,0,0,0.1)'/>
</View>
</View>
<View style = {styles.row}>
<View style={{flex:1}}>
<CheckBox
checkedIcon={() => {return (<Icon type='feather' name= 'check' />)}}
uncheckedIcon={() => {return (<Icon type='feather' name= 'check' />)}}
checked={this.state.checked}
onPress={() => this.setState({checked: !this.state.checked})}
containerStyle={{backgroundColor:'transparent', width:'20%'}}
/>
</View>
<View style={{flex:1}}>
<Icon
containerStyle ={styles.iconStyle}
name= 'add-circle'
color='#0419ba'
onPress={() => console.log('hello')}
/>
</View>
</View>
</View>
and this is the css
export default{
container:{
flex:1,
backgroundColor:'#fff'
},
itemVendido:{
color:'tomato',
fontWeight:'500',
},
rowInit2:{
flex: 1,
flexGrow: 1,
width:'100%',
marginTop:'5%',
justifyContent:'space-between',
flexDirection:'row',
padding:'2%',
},
input:{
width:'90%',
borderRadius: 25,
backgroundColor: 'rgba(0,0,0,0)',
fontSize:16,
},
input2:{
width:'65%',
borderRadius: 25,
backgroundColor: 'rgba(0,0,0,0)',
fontSize:16,
},
row:{
flex: 1,
flexGrow: 1,
width:'100%',
justifyContent:'space-between',
flexDirection:'row',
padding:'2%',
},
iconStyle:{
fontSize:30,
padding:'3%',
},
}
this is how it looks like
thanks in advance!
I just created a new container using flexShrink:1
Thanks anyway!