I have a TouchableOpacity with a background color that I want to change depending on a condition.
In this question they answer how to do it, by controlling the style in the state
<TouchableOpacity
style={{backgroundColor:this.state.backgroundColor}}
>
In my case, my TouchableOppacity has many style properties, and to keep the code clean I don't want to define all of them inside my render function, since most of them don't depend on any condition.
Usually I do:
<TouchableOpacity style={styles.button}>
// and then at the end of the file I define the styles
const styles = StyleSheet.create({
button: {
borderRadius: 15,
width: 200,
height: 50,
margin: 20,
alignItems: "center",
justifyContent: "center"
}
}
Now I need to combine both, being able to set the backgroundColor from the state and the rest of the properties from the styles.button at the end of the file.
Is there a way to combine styles from different places, so I can have the static ones defined at the end of the file and the dynamic ones inside my class?
I tried something like:
<TouchableOpacity style={{backgroundColor: this.state.backgroundColor}, styles.button}>
But although it sets the styles.button property correctly it doesn't set the backgroundColor.
You can achieve this by below code:
<TouchableOpacity style={[{backgroundColor: this.state.backgroundColor}, styles.button]}>
Related
I want to put 3 texts on the screen one on the top, one on the middle an one on the bottom. For this I thought about using the space-around property. This is my code
<Screen style={styles.container} backgroundColor={color.transparent}>
<View style={styles.playerContainer}>
<View><Text>text 1</Text></View>
<View><Text>text 2</Text></View>
<View><Text>text 3</Text></View>
</View>
</Screen>
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'blue'
},
playerContainer:{
flexDirection: 'column',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: 'red',
}
});
This is not working as expected. It looks better is I set a height for playerContainer, but I am enable to calculate the right hight because of the navigation bar etc.. I just need to add three text in the container. I must calculate the hight of playerContainer or I am doing something wrong?
If you want the first entry to be at the start of the container, the second to be at the center, and the last to be at the end, you need justifyContent: 'space-between'. I found this article helpful when learning about flex in React Native https://blog.reactnativecoach.com/understanding-flex-in-react-native-b34dfb4b16d1
I am new to React-Native. Say I have a styleSheet contains style for a green button:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff',
},
greenB:{
padding: 5,
height: 80,
width: 80,
borderRadius:160,
backgroundColor:'green',
}, ........
And for some reason I need to change that colour in my code.
render(){
....
const {container, greenB}=styles; //Not sure, how else can I define greenB?
greenB.backgroundColor='black';
return (
<View style={styles.container}>
<View style={styles.greenB} >
....
How can I access backgroundColor from greenB and change that?
I'm getting a TypeError "Attempted to assign to readonly property",
which is reasonable cause styles is a const.
tried to read about state management but not sure how to use it in this case.
React Native's StyleSheet.create is used for better performance and clean code, It caches the style ids to reduce the amount of data that goes through the bridge, so that is why you cannot alter it but only use it .
But there're many solutions, You can use simple javascript object and alter the values as you want.
For example:-
let Styles= {
Text:{
color:'blue'
}
}
Styles.Text.color= 'green'
<Text style={Styles.Text} > </Text>
More over, For dynamic styling i recommend using states instead of variables .
I'm new to react native and css styling as a whole so sorry if the question is very basic. I want a view to take 100% of the available screen width and when i use the code below my view seems to go outside the screen boundry, though when I use Dimension.get('window').width it work just fine. can someone explain how they differ from each other. any help would be really appreciated. thanks
return(
<TouchableOpacity style = {styles.food_wrapper}
onPress = {()=> this.userAction()}
>
<Text style = {styles.foodname}>
{this.name}
</Text>
<Text style = {styles.foodprice}>
Rs: {this.price}
</Text>
</TouchableOpacity>
);
food_wrapper:{
flex: 1,
flexDirection :'row',
justifyContent:'space-between',
alignItems:'flex-start',
width: '100%',//Dimensions.get('window').width,
minHeight: 50,
marginVertical: '1%',
padding: '2%',
backgroundColor: 'rgb(155,200,200)'
},
You need to understand what is the basic difference from 100% and the width you get using dimension.get('window')
100% means you want to get the container 100% width which mean if your parent container is 50px then 100% will return 50px.
the width from dimension give you a static width of your device width
so be careful to choose what to use to your component
if you want to follow the parent container then it is easier to use 100% then width from dimension but for responsive reasons without any parent container or it is the parent itself then width from dimension will work better
You need to add a wrapper view with flexDirection: 'row', then style the child view (or Touchable or whatever) with flex: 1
<View style={{ flexDirection: 'row' }}>
<View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>
Or you could use alignSelf: 'stretch' inside a few with flexDirection: 'column' (which is the default for all views)
Hang in there. Learning flexbox takes some practice. Your first thought when you get stuck should be "do I need to add a wrapper view?"
I have a minimal custom stateless component like this:
const ViewBox = (props) => (
<View style={ mainStyle : {backgroundColor: 'beige'} }>
{props.children}
</View>
)
export default ViewBox;
so I want to import and use it inside another component.
export default class Test extends React.Component {
render() {
return (
<View style={styles.containerView} >
<ViewBox style={styles.mainBox}>
<Text style={[styles.boxTitle, {color: '#8F468C'}]}>Lorem ipsum...</Text>
</ViewBox>
</View>
);
}
}
const styles = {
containerView: {
flex: 1,
marginTop: 50,
alignItems: 'center',
backgroundColor: 'brown',
},
mainBox: {
flex: 1,
width: 250, //No effect ! ! !
height: 250 //No effect ! ! !
},
boxTitle: {
backgroundColor: 'pink',
fontSize: 17,
marginTop: 20
}
};
Here we have at least 2 inexplicable facts:
1) and more important the width and height of the ViewBox (or every custom component you want to use here) is totally out of control! Assigning numeric size or Flex values has no effect and ViewBox keeps the minimum width/height needed to render the inner Text.
2) Removing the root View (so the ViewBox became the root) ViewBox continue ignoring any size, but now it fills all the space available.... WHY???
All mentioned behavoirs occurs using a custom View (ViewBox in this case), instead if replace it with a normal View all works as expected.
I guess to know enough flex and UI best practices for React-native, but such two cases are not well covered by docs. Hope somebody can surprise me!
This is actually how flexbox works:
Flex containers come with flexShrink: 1 by default meaning that they will shrink to their contents. Adding flexShrink: 0 changes that. You may need to use minWidth and minHeight with that instead.
The reason why it stretches is because there's nothing to tell it otherwise. Your container has the default alignItems: 'stretch' overwritten with alignItems: 'center' which shrinks its contents.
Have a look at the example code on Snack: https://snack.expo.io/B1VdUma1M
There's a really nice flexbox cheatsheet/playground that shows the behaviour at: https://yoksel.github.io/flex-cheatsheet/
Bear in mind React Native's implementation is slightly different.
I would like to create Views with dynamic content that should have some kind of footer that should normally (if there is enough space) look like they are sticked to the bottom.
Before I introduced ScrollViews my code looked like this:
<View style={{flex: 1, justifyContent: 'space-between'}}>
<View>{content}</View>
<View>{stickyFooter}</View>
</View>
After introducing the ScrollView I had to remove flex: 1 because otherwise the ScrollView is not scrollable at all. After that justifyContent became useless because the height of the flex-container is not set to 100%. Therefore both Views just appear next to each other.
To make clear what my view should look like in general:
The button should not be sticked to the bottom, but it should appear at the bottom (if possible).
This is an old question now, but for the benefit of those who end up here from a google search like I did, I paste the solution that worked for me below.
Markup
render = () => {
return (
<View>
<ScrollView style={styles.container}>
...
</ScrollView>
<TouchableOpacity style={styles.floatingActionButton}>
<RkButton
rkType='stretch'>
<RkText>Do stuff</RkText>
</RkButton>
</TouchableOpacity>
</View>
)
}
Styles
const styles = StyleSheet.create(theme => ({
floatingActionButton: {
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
bottom: 10,
left: 10,
right: 10,
borderRadius: 10,
}
}));