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:
Related
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>
My application's react-native version is 0.51.0.
When the flatlist size is not so high, it is loading without any issue. (figure_01).
But when list size is high(here I have 55 items in the list), It is showing empty rows instead of values. (figure_02).
I checked the list items and there are no any null values or empty items.
And also checked with more devices.
Please help me to solve this issue.
Thanks in advance
figure_01
figure_02
<ScrollView style={Styles.scroll_main} contentContainerStyle={{flexGrow:1}} >
<View style={Styles.container_listview}>
<FlatList
data={ this.state.flatListItems }
keyExtractor={this._keyExtractor}
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={
({item}) => <View style={Styles.item_m_log}>
<Content style={Styles.model_container}>
<TouchableWithoutFeedback>
<View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Card Number </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.cardNumber} </Text></View>
</View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Vehicle Number </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.vehicleNo}</Text></View>
</View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Date/Time </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.deviceTimeStamp}</Text></View>
</View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Amount </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.price} </Text></View>
</View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Mileage </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.mileageKm}</Text></View>
</View>
<View style={{flexDirection: 'row'}}>
<View style={Styles.txt_model_user_pro_view}><Text style={Styles.txt_model_m_log} uppercase={false}> • Fuel Station </Text></View>
<View style={Styles.txt_model_details_user_pro_view}><Text style={Styles.txt_model_details_m_log} uppercase={false}> : {item.stationName} </Text></View>
</View>
</View>
</TouchableWithoutFeedback>
</Content>
</View>
}
/>
</View>
</ScrollView>
Issue is in Content tag which used inside the renderItem method, according to native-base documentation you can only use one Content tag inside a screen, remove the Content tag and list will load perfectly. And also you don't have to wrap the Flatlist around a ScrollView since flatlist already inherits ScrollView props.
I have the same issue when I am trying to use big list it will render the list element but did not display it.
My solution:
Give absolute height to the list item
Use a third party plugin, like flatlist
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>
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