I pull the scrollView to the bottom and it bounce back.
<ScrollView style={{flex: 1}}>
<View></View>
....
<ScrollView style={{flex: 1}}></ScrollView>
</ScrollView>
The nested ScrollView needs the exact height.
<ScrollView style={{flex: 1}}>
<View></View>
....
<ScrollView style={{height: 400}}></ScrollView>
</ScrollView>
Related
How can I align a column of text to the right like the image below in react native? I have tried setting the textAlign to 'right' and setting alignSelf to 'flex-end', but it doesn't seem to be working.
Image
You can do like this:
<View style={{alignItems:'flex-end'}}>
<View style={{flex:1}}>
<Text>TOTAL</Text>
</View>
<View style={{flex:1}}>
<Text>100</Text>
</View>
<View style={{flex:1}}>
<Text>200</Text>
</View>
<View style={{flex:1}}>
<Text>300</Text>
</View>
<View style={{flex:1}}>
<Text>400</Text>
</View>
<View style={{flex:1}}>
<Text>500</Text>
</View>
</View>
The alignItems property in Flexbox only works when the items has the flex property.
Check the documentation here: https://reactnative.dev/docs/flexbox#align-items
Result:
I know that as default TouchableOpacity always has width as wrap-content. But I place it inside a View that has flex: 1. TouchableOpacity's width become match-parent/take the full width of the screen.
<View style={ {flex:1} }>
<TouchableOpacity>
<Text>I'm button</Text>
</TouchableOpacity>
</View>
The question is how could I make the TouchableOpacity wrap-content while nested inside a View like that.
Thanks
You will have to use position: "absolute" style for the TouchableOpacity
<View style={{flex:1}}>
<TouchableOpacity style={{position: "absolute" }}>
<Text>I'm button</Text>
</TouchableOpacity>
</View>
You can also use
alignSelf:'flex-start' can use center or flex-end as well.
you can style TouchableOpacity like this so that TouchableOpacity will have it's own style
<View style={ {flex:1} }>
<TouchableOpacity style={{width:'80%',height:'20%'}}>
<Text>I'm button</Text>
</TouchableOpacity>
</View>
When I add a fixed height style it works and the content is there but when I set it to flex:1 (the correct way) the scrollview disappears along with the content.
My code:
<ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
<View style={{padding: 5}}>
<Text>search</Text>
</View>
<View style={{padding: 5}}>
<Text>New Matches</Text>
<ScrollView contentContainerStyle={{flex:1}} horizontal={true} showsHorizontalScrollIndicator={false}>
<View style={{padding: 10}}>
<Thumbnail medium circle source={require('../assets/placeholders/profile1.jpg')}/>
<Text>Christian</Text>
</View>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
<Text>works</Text>
</ScrollView>
Also, as you can see I have two scrollviews. I am referring to the outermost (the vertical scrollview).
Wrap your outer ScrollView to a View component with flex:1 style.
<View style={{flex: 1}>
<ScrollView contentContainerStyle={{flex:1}} showsVerticalScrollIndicator={false}>
...
</ScrollView>
</View>
Following this question on fixed footer with a ScrollView, I'm trying to implement a fixed footer on the screen with a FlatList. I have tried to use the answer provided by putting the flat list inside a view, but then none of the items are rendered. Does any one know how to implement a fixed footer with a flat list as the other main element of component?
Using this flex solution I managed to do it with a couple of nested Views:
<View style={{flex: 1}}>
<View style={{flex: 0.9}}>
<FlatList/>
</View>
<View style={{flex: 0.1}}/>
</View>
FlatList comes with footer support in the form of ListFooterComponent
Try adding something like this to your flatlist
ListFooterComponent={() => <Text>Footer content</Text>}
Hope this helps!
It is similar to the answer above, but I think this also works.
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<FlatList/>
</View>
<View />
</View>
To complete the solution of Tom and avoid a gap/space at the bottom of the screen.
Use an integer for flex value
<View style={{flex: 1}}>
<View style={{flex: 1}}>
<FlatList/>
</View>
<View style={{flex: 0}}/>
</View>
I have the code below:
<ImageBackground style={{flex:1, width: null, height: null}} source={require('../img/bg.png')}>
<View style={{flex:1, backgroundColor:'red'}}>
</View>
<View style={{flex:1, backgroundColor:'yellow'}}>
<Text style={{fontSize:40}}>RESULTADOS</Text>
</View>
<View style={{flex:6, backgroundColor:'red'}}>
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
<View style={{flex:1, backgroundColor:'white'}}>
//THIS NOT SHOW
</View>
<View style={{flex:1, backgroundColor:'green'}}>
//THIS NOT SHOW
</View>
</ScrollView>
</View>
</ImageBackground>
The View whit background color white and green is not showing on the screen.
Anybody help?
TheScrollView component has a special prop to set style for the content. It's the contentContainerStyle
Instead of using
<ScrollView style={{flex:1, backgroundColor:'blue'}}>
Just use
<ScrollView contentContainerStyle={{flex:1, backgroundColor:'blue'}}>
Click here to get more details.