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/
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!
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.
My code is pretty simple: (relevant parts shown only)
<ScrollView style={{/* padding, centering... */}>
<Text>SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Yet, when I inspect the Text node, its width is 100% of its container, and the grey background goes all the width.
Is there a layout setting to make this Text's width as small as possible? I.e. only until the end of the Text.
You can use alignSelf property:
<View style={{alignSelf: 'flex-start'}}>
<Text>SHARE WITH YOU FRIENDS</Text>
</View>
For Scroll view you can try like
<ScrollView contentContainerStyle={{ alignItems: 'flex-start'}}>
<Text >SHARE WITH YOU FRIENDS</Text>
</ScrollView>
Hope this will help!
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