Is it possible to implement ReactNative layout containing two components, where 2nd component overlaps 1st one and has the same width, possibly also same height (without hardcoding width/height of course)? It is easy to implement something like that in native Android, but I can't find example for ReactNative. I'd be surprised if it is not possible though.
You could try below
<View style={{ flex: 1 }} >
<View style={{ flex: 1 }}>
// 1st component
<View>
<View style={StyleSheet.absolueFill}>
// 2st component
<View>
<View>
Related
This is my code:
<RecyclerListView
layoutProvider={this._layoutProvider}
dataProvider={this.state.dataProvider}
rowRenderer={this._rowRenderer}
></RecyclerListView>
And I get the error:
LayoutException: RecyclerListView needs to have a bounded size.
Currently height or, width is 0.Consider adding style={{flex:1}} or,
fixed dimensions
According to a few issues from Github it solves easy (wrap it and set minHeight/minWidth = 1 in a wrapper).
<View style={{ minHeight: 1, minWidth: 1 }}>
<RecyclerListView ... />
</View>
PS: For my case (vertical list) I added 'minHeight: 1' only.
Wrap your recyclerlistview in a view
You can give height to the view or you can give height to the style under recyclerlistview. Example:
<View style={{
marginTop:5,
marginBottom:5,
backgroundColor:"#f3f3f3",
height:"100%"}> //Here
<RecyclerListView
dataProvider={this.state.dataProvider}
layoutProvider={this.layoutProvider}
rowRenderer={this.rowRenderer}
style={{height:"100%",}} //or Here, If you add here then the last row of your rendered data list will not have any issue and may fulfill your all issues
onEndReached={this.fetchMore}
onEndReachedThreshold={0.5}
renderFooter={()=>{
<Text style={{padding:10, fontWeight:"bold", textAlign:"center"}}>
Loading... </Text>
}}
My goal is to get a newsflash component with animations.
I'm implementing a View that contains moving text.
The ScrollView does perform well the animation, however, the inner text doesn't displayed from the start:
<Animated.View style={flex: 4}>
<ScrollView
style={{flex: 1 }}
horizontal={true}
scrollEnabled={false}
contentContainerStyle={{ flex: 1, flexGrow: 1 }}>
<Animated.View style={{ flex: 1, marginLeft }}>
<Text numberOfLines={1}>{this.props.subtitle}</Text>
</Animated.View>
</ScrollView>
</Animated.View>
I tried almost every variation of flex and flexGrow and more but nothing doesn't work well.
If I'm removing the ScrollView it shows well the text, but the effect looks bad.
In the picture, you can see the bottom text cropped (fami)
I have managed to figure it out with removing the flex: 1 from the views and adding:
onContentSizeChange={this.scrollListToStart}
that will run only once at the start using a state variable.
absoluteFillObject it's the only way to get map working?
I want to distribute the screen in this way
map - flex 3
bottom layout (eg taxi details) - flex 1
but I can't get the map working with flex (variable size) without getting an error about the map size can't be 0
It's important the map don't use the whole screen because the center of the map it's not the center of the screen since we have a bottom layout using part of the screen
As a workaround i use marginBottom to avoid the bottom layout height but that way I have to give a fixed height to the bottom layout and I lose the flexible size
<View style={{width:'100%', height:'100%'}}>
<Map style={{width:'100%', height:'75%'}}></Map>
<OtherComponent style={{width:'100%', height:'25%'}}></OtherComponent>
</View>
I faced same issue with Map and flex combination. I just give height in percentage and its work for me. You can try with above code for your solutions.
The Nirmalsinh's solution work, but I would suggest just wrap the map view in a flex container, e.g.:
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<MapView height: '100%'}}/>
</View>
</OtherComponent>
</View>
This works for me...
<View style={styles.container}>
<MapView
style={styles.map}
/>
</View>
and the styles,
container: {
...StyleSheet.absoluteFillObject,
height: 540, // you can customize this
width: 400, // you can customize this
alignItems: "center"
},
map: {
...StyleSheet.absoluteFillObject
}
I got a FlatList that occupies the 50% of the vertical space on the screen.
This FlatList has only a few items, and because of this, is not taking the entire space but only the half of it, and when I scroll up/down, it looks as if it has overflow: hidden.
I read this in the RN GitHub about it, they recommended using flexGrow: 1 on the FlatList's contentContainerStyle, also the parent View with flex: 1. But is not working. Is this still working? They said to use it on ScrollViews, but isn't FlatList inherited from ScrollView or something like that?
This is my current structure:
render() {
return (
<View style={{ flex: 1 }}>
<FlatList
contentContainerStyle={{ flexGrow: 1 }}
numColumns={2}
style={ styles.cardContainer }
keyExtractor={ this._keyExtractor }
data={ this.state.listData }
renderItem={ this._renderItem }
>
</FlatList>
</View>
);
}
You actually want to put flex onto your FlatList. Currently you have it on your contentContainerStyle.
So flex:1 on your FlatList will make it fill the rest of the container.
You'll want to adapt this to your solution depending on what you currently have in styles.cardContainer.
<View style={{ flex: 1 }}>
<View style={{ height: Dimensions.get("window").height * 0.25 }} />
<FlatList
numColumns={2}
style={{ flex: 1 }}
keyExtractor={this._keyExtractor}
data={["1", "2", "3"]}
renderItem={this._renderItem}
/>
</View>
Set the contentContainerStyle of the FlatList to flexGrow: 1 will not block the scroll functionality on long list.
There might have issue with the old version, but latest works just fine.
https://github.com/facebook/react-native/issues/17944
To add onto this 2 years later, i had a justifyContent:center on my list container and that was what made the flex not fill the entire space. Otherwise flexGrow works.
I am new for react native, and recently I want to develop an app with below layout, but I have no idea how to build it.
Row1 (contain only one column)
column1 | column2 (Row 2 with 2 columns)
Row3 (Row 3 with one column)
React Native uses flexbox to handle layout matters
https://facebook.github.io/react-native/docs/flexbox.html
In your case, you could try something like this:
<View
style={{ flexDirection: 'column' }} // it will display the direct children as columns, instead of rows, so they will be one below the other
>
<View style={{ flex: 1 }}> // it will ocupies the full width
<Text>Line with single content</Text>
</View>
<View style={{ flex: 1, justifyContent: 'space-between' }}> // it will ocupies the cull width and distribute the same width amoung for all direct children
<Text>This content goes left</Text>
<Text>This content goes right</Text>
</View>
<View style={{ flex: 1 }}> // it will ocupies the full width
<Text>Last line with single content</Text>
</View>
</View>
Take this code just as an example to express the idea, I wrote it here in the comment, so there might be typos.
This is a cool game based tutorial to learn more about flexbox: https://flexboxfroggy.com/
Hope it helps