how can switch red background with green
my code is:
<View style={{flexDirection:'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
<View style={{backgroundColor:'red', flex: 1, justifyContent: 'flex-end'}}>
<Text>1</Text>
</View>
<View style={{backgroundColor:'blue', flex: 1}}>
<Text>2</Text>
</View>
<View style={{backgroundColor:'green', flex: 1}}>
<Text>3</Text>
</View>
</View>
</View>
How to fix the problem by changing the style?
please help
try to use something as a flag to change the style of your view
Related
I have been trying to apply styling to react-native-progress-steps but it's not working in my app. I applied the styles to View and ProgressSteps components but it's not showing in my app.
<View style={{flex: 1}}>
<ProgressSteps style={styles.progressStepsStyle}>
<ProgressStep label="Information">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Account">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Completion">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
<ProgressStep label="Verification">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 4!</Text>
</View>
</ProgressStep>
</ProgressSteps>
</View>
</View>
Here is the link to the library: https://www.npmjs.com/package/react-native-progress-steps
it is actually very simple.
You have to create a constant and call it inside the
who is the dad that locks up the ProgressStep.
For example:
const progressStepsStyle = {
activeStepIconBorderColor: '#0a0d64',
activeLabelColor: '#0a0d64',
activeStepNumColor: 'white',
activeStepIconColor: '#0a0d64',
completedStepIconColor: '#0a0d64',
completedProgressBarColor: '#0a0d64',
completedCheckColor: 'white'
};
And then call it:
<ProgressSteps {...progressStepsStyle}>
<ProgressStep label="Information">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 1!</Text>
</View>
</ProgressStep>
<ProgressStep label="Account">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 2!</Text>
</View>
</ProgressStep>
<ProgressStep label="Completion">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 3!</Text>
</View>
</ProgressStep>
<ProgressStep label="Verification">
<View style={{ alignItems: 'center' }}>
<Text>This is the content within step 4!</Text>
</View>
</ProgressStep>
</ProgressSteps>
So you will have styles in your circles and in the progress bar.
If you want to style your buttons and button text you have to place the following properties inside
nextBtnStyle, nextBtnTextStyle, previousBtnStyle, and previousBtnTextStyle.
For example:
<ProgressStep nextBtnText={"Next"} nextBtnStyle={{ textAlign: 'center', padding: 8, backgroundColor: '#F8CC23', }} nextBtnTextStyle={{ color: '#007aff', fontSize: 18 }}>
I'm new to react native and i'm trying to display some text in a custom touchable opacity. but the text keep exceeding the border even when i'm using flex wrap. my code is the following:
<View style={styles.main_container} >
<View style={styles.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row' }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View>
<Text style={styles.txt}> k </Text>
<Text style={{ flexWrap:1 }} > ddddddddddddddddddddddddddddddddddddddddd </Text>
<Text> kk </Text>
</View>
</TouchableOpacity>
</View>
</View>
and here is look of the styles i used:
main_container: {
flex: 1,
height: 300,
flexDirection: 'column',
backgroundColor: "grey",
width: '95%',
margin: 10,
},
ctr1: {
flex: 1,
flexDirection: 'row',
backgroundColor: 'white',
//margin: 2,
},
How can i wrap it
Issue was not in the <Text> element that you have given the style flexWrap:1. Problem was in the parent elements.
Adding flex: 1 to <TouchableOpacity> and <View> which contains your <text> will solve the problem.
This will do the calculation for width depends on the device width.
<View style={styEdit.main_container}>
<View style={styEdit.ctr1}>
<TouchableOpacity style={{ flexDirection: 'row', flex: 1 }} >
<Image style={styles.img} source={{ uri:`data:image/gif;base64,${encodedData}`}}/>
<View style={{ flexDirection: 'column', flex: 1 }}>
<Text style={styEdit.txt}>k</Text>
<Text>ddddddddddddddddddddddddddddddddddddddddd---</Text>
<Text>kk</Text>
</View>
</TouchableOpacity>
</View>
</View>
Tested the code in my machine.
Cheers!
I am using react-native-swipeout for items within a FlatList, each list item has a 'minus' and 'plus' button either side of the text (top image).
However, when adding these components as children of the Swipeout component, they are all stacking on top of each other and to the left of the row (bottom image).
Is there something I'm missing here?
<Swipeout
style={styles.swipeStyle}
{...swipeSettings}>
<View style={styles.buttonContainer}>
<MinusButton />
</View>
<View style={styles.itemStyle}>
<Text>{this.props.name}</Text>
</View>
<View style={styles.buttonContainer}>
<PlusButton />
</View>
</Swipeout>
const styles = {
swipeStyle: {
flex: 1,
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'flex-start',
alignItems: 'flex-start'
},
buttonContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 5,
},
itemStyle: {
flex: 1,
}
};
If you look at the source code, there is another inner container that wraps the children and you cannot directly set style of the inner container.
I suggest wrap your children into a <View /> like:
<Swipeout {...swipeSettings}>
<View style={styles.swipeStyle}>
<View style={styles.buttonContainer}>
<MinusButton />
</View>
<View style={styles.itemStyle}>
<Text>{this.props.name}</Text>
</View>
<View style={styles.buttonContainer}>
<PlusButton />
</View>
</View>
</Swipeout>
I'm having a bit of trouble getting what i though to be an easy layout to achieve in react-native.
Basically i need two views, on a row, with their parent having justifyContent: 'space-between'.
On the first view there are two text components and one of them has to have an ellipsis when it grows.
What i expected:
What i instead get is overflowing of that text component:
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
A sandbox to play around with an example:
https://snack.expo.io/HkeFQbyvf
If you add flex: 1 to the inner <View style={{ marginHorizontal: 15 }}> it will work
Updated code sample
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Text>AVATAR</Text>
<View style={{ flex: 1, marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Updated based on a comment
And the main reason is because the inner <View style={{ marginHorizontal: 15 }}> is a flex row item, and as such flexes horizontally and need a width, which flex: 1 provide.
If to use the default column direction, it would work w/o, e.g. like this:
<View style={{ marginTop: 100, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1 }}>
<View style={{ marginHorizontal: 15 }}>
<Text numberOfLines={1}>THIS IS A LONG LONG LONG DESCRIPTION</Text>
</View>
</View>
<View>
<Text>9,999,999,999.99</Text>
</View>
</View>
Try adding flexShrink: 1 to the style of the first inner view
I have the following
<View style={{maxWidth: 700}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
which is working as I'd expect on a large device (vertical black lines are edges of emulator screen).
All I would like to do is center this on the screen.
When I attempt to do so by adding alignSelf: 'center' to the parent
<View style={{maxWidth: 700, alignSelf: 'center'}}>
<View style={{backgroundColor: 'red', flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
the width is lost.
I assume this is because by default alignSelf it is 'stretch'. Is there a way to both stretch the content to use maxWidth and center it on the screen?
Try using flex:1 along with maxWidth to both make it stretch but limit the width to 700
<View style={{flexDirection:'row', alignItems: 'center', justifyContent: 'center'}}>
<View style={{flex:1, maxWidth: 700, backgroundColor:'red', flexDirection:'row', justifyContent:'space-between'}}>
<Text>Left Item</Text>
<Text>Right Item</Text>
</View>
</View>
Using maxWidth along with width: '100%' does the trick for me.