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
Related
I am noticing the following code in ReactNative (React 0.59), which represents a single search result item, is sometimes cutting off the last line of text on a client's android phone (but not on any of my android phones or simulators)
<View style={this.props.style}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.textStyle}>
{this.itemSentences()}
</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1, marginTop: -7}}>
<Text style={{color: '#000', fontSize: ellipsisFontSize, fontWeight: '600'}}>{ellipsisText}</Text>
</View>
</View>
In the image below, you can see the effect, which is an incomplete sentence being rendered:
It almost looks like there isn't enough room to render the rest of the text, so it cuts it off. Again, on my phone, it renders the whole paragraph but in the client's screen shot, it is cut off.
Any initial suggestions or things I can do? I tried reducing the font, increasing the font, changing padding, but no luck. What other details can I provide? Thank you!
Edit:
Here is the container the above list items appear in:
<View style={styles.containerStyle}>
<FlatList
onContentSizeChange={ (x, y) => { this.layoutChanged(x, y) } }
onLayout={(event) => this.layoutChanged(event)}
keyboardShouldPersistTaps="always"
keyExtractor={(item, index) => index.toString()}
data={dataSource}
ListFooterComponent={footer}
ListHeaderComponent={header}
scrollEventThrottle={16}
onScroll={this.handleScroll.bind(this)}
language={this.props.language}
renderItem={this.renderItem.bind(this)}
/>
<AnimatedEditedResults
style={[editResultsStyle, {transform: [{translateX: this.state.editResultsOverlayX}]}]}
editResultsXButtonPressed={this.hideEditResultsOverlay.bind(this)}
applyFilterPressed={this.applyFilterPressed.bind(this)}
searchResults={this.props.originalSearchResults.Results}
selectedSources={this.props.selectedSources}
sentenceNumber={this.props.sentenceNumber}
hasMadeChanges={this.props.hasMadeChanges}
clearFilterPressed={this.props.clearFilterPressed}
language={this.props.language}
/>
</View>
Any reason why you cant wrap the component in a ScrollView
After playing with over 100+ different kinds of builds, different attempts, etc. I finally found the issue.
There is a property on called "TextBreakStyle" and by default it is "complex". By changing to "Simple", the issue went away. This apparently only plagues certain types of phones/devices.
Hope this helps someone!
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.
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>
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 using React Native's flexbox (not css flexbox). I am creating an image gallery and the first image has to be double the size, and the rest of the images smaller. Works good, but I have a problem that the third image is displayed in new row, instead where the blank space is.
Is it possible to achieve such behaviour with flex-box, so that the third image would be below the first small image?
I tried all combinations with aligning items, self aligning, flex directions, but no success. If needed I can provide a small example of the code which I already have.
I don't have a fully responsive answer, but this may be helpful here:
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row' }}>
{this.renderPhoto(0)}
<View>
{this.renderPhoto(1)}
{this.renderPhoto(2)}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
{render rest...}
</View>
</View>
Try this component. Maybe it will help you
https://xudafeng.github.io/autoresponsive-react/