I would like to render the item left and right in tablet. I have tried many ways. but nothing worked. Can anyone please help me to sort out this issue.
for example, array having some data. array = [firstname: 'aaaa',lastname: 'bbb', age: 15].
now i want to show the firstname in leftside, and lastname in rightside. then age will show the next line. if more data available, show left right combination.
Firstname Lastname
aaa bbb
age Address
15 cccc
<View style={{ flexDirection: 'row',}}>
{data.map((item, index) => (
<View style={{ flexDirection: 'row'}}>
<View style={{ flexDirection: 'row', }}>
<Text style={[commonStyles.darkBlack16,{ marginBottom: 8 }]}>{item.data</Text>
</View>
</View>
))}
</View>
```
You can use this structure:
<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
{data.map((item, index) => (
<View style={{ width: "50%" }}>
<Text>Text</Text>
<Text>Text</Text>
</View>
))}
</View>
Related
React Native learner here.
I am trying to show the suggestions as below:
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
}}
onPress={() => {
setSelectedValue(item);
setFilteredFilms([]);
}}>
<View>
<Text style={styles.itemText}>{item.title}</Text>
<Button
title={'Click'}
style={{
backgroundColor: 'green',
right: 0,
paddingRight: 0,
marginRight: 0,
}}></Button>
</View>
</TouchableOpacity>
...
itemText: {
fontSize: 15,
paddingTop: 5,
paddingBottom: 5,
margin: 2,
alignItems: 'flex-start',
},
infoText: {
textAlign: 'center',
fontSize: 16,
},
Output looks like below:
I want my suggestion's Text in the left side, while Click button always at the right side fixed with fixed length.
Text and Button region shouldn't overlap each other.
Any help or guidance about how to do it. Highly appreciated !!
P.S.: With style={{flexDirection: 'row'}} in <View> my Buttons in Suggestion box get pushed to right side and not visible as below:
I expect something like this:
You have to use flexDirection:'row' for inner View which contain the Text and the Button
<TouchableOpacity
style={{
backgroundColor: 'transparent',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
}}
onPress={() => {}}>
<Text style={{ maxWidth: '90%' }}>
{item.title}
</Text>
<View>
<Text style={{ backgroundColor: 'blue', alignItems: 'center' }}>
Click
</Text>
</View>
</TouchableOpacity>
Don't forget to look at : https://www.npmjs.com/package/react-native-read-more-text
this will help you get through it.
I'm trying to define a list of elements with the same height, but the result is that the component takes all the available space.
This is the code:
return (
<View style={{flex: 1, flexDirection: 'row', justifyContent: "center"}} key={location.id}>
<Text style={{width: "80%", height: 20}}>{location.name}</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
onPress={() => this.removeLocationFromDevice(location)}
/>
</View>
)
This is the result:
How can I make sure that the button and the text elements have just enough height to display the element and nothing more?
You can set the initial View to flex 1 and wrap the button + text in an other view
return (
<View style={{flex: 1}} key='key'>
<View style={{ flexDirection: 'row', justifyContent: "center"}}>
<Text style={{width: "80%", height: 20}}>text</Text>
<Button
style={{width: "20%", height: 20}}
title="x"
/>
</View>
</View>
);
i want to achieve the following:
i am using a module called react-native-easy-grid
the whole thing is wrapped inside a Grid
with:
blue line being Col
red line being Row
orange line being View
here's my code so far:
<Grid>
<Col>
<Thumbnail circular source={selectedChildAvatar} />
</Col>
<Col size={4}>
<Row style={{ flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-evenly' }}>
{/* name, in review */}
<View>
{!_.isEmpty(selectedChild) && <Text>{selectedChild.firstName}</Text>}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<Text note>In review: {inReviewCount <= 0 && 0}</Text>
{inReviewCount > 0 && (
<View
style={{
backgroundColor: 'red',
paddingLeft: 4,
paddingRight: 4,
borderRadius: 50
}}>
<Text note>10</Text>
</View>
)}
</View>
</View>
{/* earnings, penalties */}
<View>
{/* earnings */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.earnings}
/>
<Text style={[styles.digits, styles.earningDigits]}>12</Text>
</View>
{/* penalties */}
<View
style={{
flexDirection: 'row',
alignItems: 'center'
}}>
<ProgressiveImage
resizeMode='cover'
imageStyle={styles.badge}
style={styles.badge}
source={images.icon.penalties}
/>
<Text style={[styles.digits, styles.penaltyDigits]}>12</Text>
</View>
</View>
{/* review button */}
<View style={{ marginVertical: 10 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
</Row>
</Col>
</Grid>
but this is what im getting:
what approach would it be to stretch the wrapped button to 100% of the width?
thank you!
use flex or set width to 100%
<View style={{ marginVertical: 10, flex: 1 }}>
<Button
small
iconRight
primary
block
disabled={inReviewCount === 0}>
<Text>Review</Text>
<Icon name='arrow-forward' />
</Button>
</View>
So I am just learning.... building a quiz app in react-native and I think the space between the first row of the buttons and the second row of the buttons is too much, how can I reduce it?
thanks
<LinearGradient colors={['#0D0B18','#28263E']} style={styles.container}>
<Text style={styles.question}>After Jesus rose from the dead, how long did he remain on earth before ascending to heaven? </Text>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle}onPress={this.onPress}>
<Text style={styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
<View style={styles.progressStyle}>
<ProgressViewIOS
style={styles.progressView}
progress={(0.2)}
/>
</View>
</LinearGradient>
const styles = StyleSheet.create ({
container: {
flex: 3,
},
question: {
paddingTop: '20%',
padding: 30,
flex: 1,
color: '#fff',
fontSize: 25
},
buttonRow : {
marginTop: 0,
flexDirection: 'row',
color: '#fff',
alignItems: 'center',
justifyContent: 'space-evenly',
},
buttonStyle: {
backgroundColor: '#fff',
width: '40%',
height: '50%',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 10
},
buttonText: {
color: '#000'
},
progressView: {
width: '90%',
},
progressStyle: {
padding: 20,
alignItems: 'center',
justifyContent: 'center',
}
});
Small, you don't need flex: 3 for an element with no siblings, it shouldn't really matter but you only need to assign it flex: 1 if it is alone and should not take up more space relative to it's siblings.
To get your buttons to display nicely you should give them a wrapper:
<View style={styles.buttonWrapper}>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>12 days</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>40 days</Text>
</TouchableOpacity>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>3 months</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.buttonStyle} onPress={this.onPress}>
<Text style={styles.buttonText}>1 year</Text>
</TouchableOpacity>
</View>
</View>
where styles.buttonWrapper is just:
buttonWrapper: {
flex: 1,
justifyContent: "space-around"
},
Now your button group and question will occupy an even amount of space after the height of your progress bar is taken into account and the button group will be squished together thanks to justifyContent: 'space-around'
This alters the size of the buttons however, so for this to work you should change the button styles to something like:
buttonStyle: {
backgroundColor: "#fff",
flex: 1,
marginHorizontal: 5,
aspectRatio: 2,
justifyContent: "center",
alignItems: "center",
borderRadius: 10
},
You can see this in action here: https://snack.expo.io/HkWF-EsA7
Flex can be a little weird when you're just starting out, so I recommend experimenting a lot. There are interesting properties like aspectRatio, alignContent, alignSelf and many others (learn more about those here). It may be frustrating at first but your layouts will be much better if you can avoid using width and height and entirely use flex instead. This isn't always possible but I think it will work just fine for what you're trying to accomplish.
I hope this gave you some idea of what you could do moving forward, if you have any questions let me know!
I just want the Icon to be on the left and the text to be on center.
I have this structure:
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
<Text style={styles.header}>{ title }</Text>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
Kinda like this:
-> MainContainer
--> HeaderContainer
----> Back button
----> Title
mainContainer: {
flex: 1,
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-start'
},
headerContainer: {
flex: 1,
padding: 10,
flexDirection: 'row',
// ommited for clarity
},
back: {
alignSelf: 'flex-start'
},
header: {
fontSize: 24,
alignSelf: 'center'
},
But it doesnt work as it produces:
I also tried adding in HeaderContainer:
justifyContent: 'space-between',
and a blank <View />, but the result is not good:
As you can see, it's not centered really.
Edit Produces:
It's not really centered, because we put an imaginary thrid element. Can we do it with only two elemets? One in start and other on center?
Why is it not posible?
Try the following:
<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
<View style={{ flex: 1 }}>
{leftContent}
</View>
<View style={{ flex: 1, alignItems: 'center' }}>
{centerContent}
</View>
<View style={{ flex: 1, alignItems: 'flex-end' }}>
{rightContent}
</View>
</View>
Don't forget to set textAlign: 'center' if center component is <Text> or textAlign: 'right' if the right component is Text.
Put your Icon and text in separate Views and asign a flex to it something like this
<View style={styles.mainContainer}>
<Error screen={screen}/>
<View style={styles.headerContainer}>
<View style={{flex:.3,alignSelf:'flex-start}}>
{back &&
<Icon
raised
name='arrow-back'
onPress={ onBackPress }
containerStyle={styles.back}/>
}
</View>
<View style={{flex:.7,alignSelf:'flex-end',alignItems:'center'}}>
<Text style={styles.header}>{ title }</Text>
</View>
</View>
<View style={styles.contentContainer}>
{ children }
</View>
</View>
I think it shoud fix the problem