I'm searching a way to make an horizontal ListView or FlatList In React-native.
like the image below:
I tried to managed it with Flex but it's make me stranges results, and always with a vertical ListView
If you got any idea, let me know.
Regards,
The answer is to add the horizontal property set to true.
Yeah now it's described in the doc: https://reactnative.dev/docs/flatlist#horizontal
So obviously a FlatList is a Child of a ScrollView so he got the Horizontal Bool.
<FlatList
horizontal={true}
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
/>
Ciao
Thanks for the last answer, ListView is now deprecated.
solution with FlatList:
<FlatList
style={styles.videos_flatList}
horizontal={true}
data={data1}
renderItem={({item}) =>
<RowItem/>
}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 20,
backgroundColor: "#CED0CE",
}}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>
FlatList answers are above, but it is not the only way to make horizontal list in RN.
If you want to make display elements in React Native displayed in horizontal list the simplest way possible, you only need the Flex Direction as Row:
myElement: {
display: 'flex',
flexDirection: 'row',
},
Related
I am building a app in react native.
i have several buttons with touchable opacity.
it contains text in touchable opacity.
but when I click on touchable opacity, the text is highlighted , and the touchable opacity is not pressed.
please help me.
Thank you.
Well, this is an incomum behavior. Since as you didn't share the code, I would suggest you take a look at the official documentation for check if you did it all right
https://reactnative.dev/docs/touchableopacity
Some example:
const onPress = () => console.log('button pressed');
<TouchableOpacity
style={{
alignItems: "center",
padding: 10,
backgroundColor: "#DDDDDD"
}}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
I try to make FlatList where circles are different sizes, for each cirle, i need to have own zIndex.
Numbers in circles, show zIndex number, as you see its not working.
I use zIndex on <TouchableWithoutFeedback>
Here is my component:
<TouchableWithoutFeedback
onPress={() => dispatch(selectHockeyPlayer(item))}
style={[
styles.listItem,
{
width: playerWidth,
height: playerWidth,
transform: [{scale: scaleNum + 1.2}],
zIndex: Math.floor(scaleNum + 2),
},
isRated ? styles.isRated : null,
styles.circle,
activePlayer(item, styles.selectedListItem),
]}>
Place a View inside of TouchableWithoutFeedback and apply TouchableWithoutFeedback styles to the View
Do this
<TouchableWithoutFeedback
onPress={() => dispatch(selectHockeyPlayer(item))}>
<View
style={[
styles.listItem,
{
width: playerWidth,
height: playerWidth,
transform: [{scale: scaleNum + 1.2}],
zIndex: Math.floor(scaleNum + 2),
},
isRated ? styles.isRated : null,
styles.circle,
activePlayer(item, styles.selectedListItem),
]}>
Allright, i figured out what was the problem, FlatList doesnt work with zIndex, so i had to use ScrollView.
I was trying to customize jitsi-meet. Here toolbar contains video mute, audio mute, and other buttons. How to place the container with blue background in the bottom of the screen?
If I remove height property then this whole thing is placed in the bottom of the screen but in this case I don't get spacing around items in toolbar.
toolbar: {
alignItems: 'flex-start',
flexDirection: 'column',
justifyContent: 'space-around',
marginBottom: 10,
paddingHorizontal: 5,
backgroundColor: 'dodgerblue',
height: '70%',
},
If I put height:'100%' it takes whole screen. Other elements are commented here. This screen in stacked top of a camera screen.
toolbar: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: 10,
paddingVertical: 5,
width:'100%',
backgroundColor: 'dodgerblue',
}
if you want to align the content in a horizontal row then you should give the flexDirection='row'. In react native default flexDirection is column so there is no need to mention it explicitly.
It's hard to understand without posting what you're fully rendering, but it seems like you need to wrap the toolbar view in a parent view, and fix the parent view to start at the bottom of the page through justifyContent: 'flex-end'
<View style={{justifyContent:'flex-end', flex:1}}>
<View style={{styles.toolbar}}>
</View>
</View>
Alternatively, you could set the parent view to flexDirection: 'column-reverse'.
So I have a horizontal scrollview at the top of the view. The ScrollView contains nodes that have a specified width. I then have a border on the bottom of the ScrollView, like you can see in this screen cap: http://i.imgur.com/pOV1JFP.png
As you can see the child nodes of the ScrollView at the top don't reach the border. However, if I change the ScrollView to a View with flexDirection: 'row', then the child nodes fill the height fine. I've tried changing a few properties on the scrollview, such as:
Setting padding:0 on contentContainerStyle
automaticallyAdjustContentInsets={false}
Changing the values of contentInsets directly
None of those seem to fix the issue.
The scrollview code & style:
var styles = StyleSheet.create({
nav: {
padding: 0,
marginTop: 30,
flex: 1,
borderBottomWidth: 1,
borderColor: '#000000'
}
});
<ScrollView
style={[{width: screen.width}, styles.nav]}
horizontal={true}
showsHorizontalScrollIndicator={true}
automaticallyAdjustContentInsets={false}>
{dayNavItems}
</ScrollView>
The child components (makes up dayNavItems)
const styles = StyleSheet.create({
container: {
paddingLeft: 15,
paddingRight: 15,
width: 50,
justifyContent: 'center'
},
odd: {
backgroundColor: '#ccc'
},
selected: {
backgroundColor: '#39b54a'
},
text: {
fontFamily: 'Optima'
}
});
class DayNavItem extends React.Component {
static propTypes = {
day: React.PropTypes.object.isRequired,
odd: React.PropTypes.bool,
selectDay: React.PropTypes.func.isRequired,
selected: React.PropTypes.bool
};
render() {
const d = new Date(this.props.day.created_at);
const viewStyles = [styles.container];
if (this.props.selected) {
viewStyles.push(styles.selected);
} else if (this.props.odd) {
viewStyles.push(styles.odd);
}
return (
<TouchableOpacity style={viewStyles} onPress={() => this.props.selectDay(this.props.day.uuid)}>
<View>
<Text style={styles.text}>{getMonth(d)}</Text>
<Text style={styles.text}>{d.getDate()}</Text>
</View>
</TouchableOpacity>
);
}
}
Adding contentContainerStyle={{flexGrow: 1}} will do the trick.
<ScrollView contentContainerStyle={{flexGrow: 1}}>
</ScrollView>
There is a property called contentContainerStyle for ScrollView. I just solved a similar issue where I set flex: 1 to the ScrollView's styles, ScrollView's contentContainerStyle, and the child View component.
The other answers are correct, but just to provide a clarifying example:
<ScrollView contentContainerStyle={{ flex: 1 }}>
{children}
</ScrollView>
Setting flex: 1 for ScrollView's contentContainerStyle property did the trick for me.
I always end up creating this component in all my projects:
import * as React from 'react'
import { ScrollView, ScrollViewProps, StyleSheet } from 'react-native'
export function FullHeightScrollView(
props: {
children: React.ReactNode
} & Omit<ScrollViewProps, 'contentContainerStyle'>
) {
return (
<ScrollView contentContainerStyle={styles.grow} {...props}>
{props.children}
</ScrollView>
)
}
const styles = StyleSheet.create({
grow: { flexGrow: 1 },
})
Use it in place of React Native's ScrollView.
If ScrollView is wrapped inside of a SafeAreaView, put flex: 1 on SafeAreaView, this did the trick for me after hours of debugging...
Parent:
Child (styles ScrollView I implemented has nothing to do with the current issue you reported):
I have made a simple package for those who just want, like me, a working out of the box ScrollView, without having to apply all the time the styles to make it work properly.
https://github.com/SrBrahma/pagescrollview
Usage:
import { PageScrollView } from 'pagescrollview';
<PageScrollView>
{/** Your contents */}
</PageScrollView>