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.
Related
I noticed that while adding 'View' with React native, it behaves as if "width: '100%'" was assigned even though I did not enter any style. Same situation exists for any component. It covers the whole area horizontally. What is the cause and solution?
return (
<View style={{flex:1}}>
{/* paints the line he is in full red but should only paint as much as the line of the text */}
<View style={{backgroundColor:'red'}}>
<Text>Example</Text>
</View >
</View>
);
If you want the background color to only encompass the text, you can use this:
<Text style={{backgroundColor: 'red', alignSelf: 'flex-start'}}>
Example
</Text>
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.
If you take a look on the left of the time on the status bar, you can see part of the scrollview showing. When scrolling up i can see the scrollview with all the elements ( pickers ,textinputs etc) scrolling underneath the statusbar.
My hierarchy looks like this
<React.Fragment>
<SafeAreaView forceInset={true} style={{ flex: 1, backgroundColor: colors.black, zIndex: 10000 }}>
<View style={{flex:1}}>
<Header/> //has certain height. had to add zIndex=10000 to avoid same issue
<KeyboardAvoidingView behavior='position'>
<ScrollViewWithContent/>
</KeyboardAvoidingView>
</View>
</SafeAreaView>
</React.Fragment>
Are you seeing anything obviously off?
Adding overflow:hidden; will do the trick. However i feel like this shouldnt be happening in the first place. The original bug is a weird state where part of the scrollview shows ( the text ) and part of it doesnt ( the background )
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
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/