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>
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>
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>
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.
<View style={styles.item} onPress={this._onPress}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
<ReviewInNewsItem/> <<<<<< I want to move this to next line.
</View>
item View's style is below.
item: {
flexDirection:row,
borderBottomWidth:1, borderBottomColor: 'grey'
}
So, Views in item is deployed horizontal.
But I want to move ReviewInNewsItem to next line.
Surely, I can move ReviewInNewsItem out of the item but the item have border. I want ReviewInNewsItem is in border of item.
If I'm using web, I'll use this.
clear: both;
Is there similar property like this in React-Native?
I can't find property like clear:both in React-Native.
So I've changed like below.
<View style={styles.item} onPress={this._onPress}>
<View style={{flexDirection: 'row'}}> // Add
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<ReviewInNewsItem/>
</View>
And I've remove flexDirection:row in style of item.
item: {
borderBottomWidth:1, borderBottomColor: 'grey'
}
you can use another row for another line
<View style={styles.item} onPress={this._onPress}>
<View style={style.row}>
<View style={styles.itemLeft}>
some
</View>
<View style={styles.itemRight}>
some
</View>
</View>
<View style={style.row}>
<ReviewInNewsItem/> <<<<<< your next line
</View>
</View>
now row has a style of flexDirection:'row' . so everything is on one line similar next row will display in next line