I currently have these two styles:
indentLeft: {
marginLeft:'4%',
},
forwardButtonLocation: {
flex: 1,
flexDirection: 'column',
alignItems: 'flex-start',
paddingTop: 20,
},
I followed this tutorial https://facebook.github.io/react-native/docs/style.html and concatenated them like this:
<View style={styles.forwardButtonLocation, styles.indentLeft}>
However, it seems like the latter style overrides the previous one even indentLeft and forwardButtonLocation don't share same properties. The button is either padded on top with 20 or indented by 4% depending on which one comes to the second in the concatenation, but according to the tutorial, it should have both properties. What am I doing wrong here?
In order to provide multiple styles to the same element you need to the pass the styles within []
<View style={[styles.forwardButtonLocation, styles.indentLeft]}>
Passing them directly in {} will only allow the last one to take effect
Related
I am using translate on View inside the TouchableNativeFeedback. But after using translate css the upper part of view is not clickable. Can I give translate css to TouchableNativeFeedback also.
function App() {
return (
<View>
<TouchableNativeFeedback onPress={this._onButtonPress}>
<View style={styles.app}></View>
</TouchableNativeFeedback>
</View>
);
}
const styles = StyleSheet.create({
app: {
height: 50,
width: 50,
transform: [{ translateY: 25 }]
}
});
I tried giving style to that. But I don't think it accepts that.
React-native version: "0.61.2"
You need to think about some margins or padding.
From the official documentation:
Transforms are style properties that will help you modify the appearance and position of your components using 2D or 3D transformations. However, once you apply transforms, the layouts remain the same around the transformed component hence it might overlap with the nearby components. You can apply margin to the transformed component, the nearby components or padding to the container to prevent such overlaps.
https://reactnative.dev/docs/transforms
I would like to change the following code to meet my needs
I need to change the design from this :
to this :
I can not change the style and also add an intermediate step
here is the lin to the sandbox
https://codesandbox.io/s/horizontalnonlinearstepper-demo-material-ui-forked-9pqxxk
Thank you in advance
To make the stepper icons closer to each other simply change the width of your <Stepper /> component. I chose 400px, change this value to fit your needs.
sx={{
width: "400px",
...
}}
I replaced the content > with a wider arrow ❯ and adjusted the top alignment.
".MuiStepConnector-root": {
top: 2
},
".MuiStepConnector-root span::before": {
display: "flex",
justifyContent: "center",
content: '"❯"'
}
This is what the result looks like:
Live Demo
I want to make changes to the MuiInputLabel.outlined. Although, I can see other changes when I inspect on browser, I'm not particularly able to see the transform property change.
This is my MuiInputLabel.
MuiInputLabel: {
outlined: {
paddingLeft: 10,
zIndex: 1,
transform: 'translate(-4,8), scale(1)',
pointerEvents: 'none'
},
And this is when I inspect on browser:
this is not the right way to add multiple transform property in css. There shouldn't be , in the transform style. And also transform value needs a unit like px, em and others.
The right way is:-
transform: 'translate(-4px ,8px) scale(1)'
I am trying to implement react-sidenav, and I would like the buttons to be at the bottom - a flex-direcion of column-reverse. I can add these styles manually in chrome, and it works. According to the documentation, there is a style property on SideNav that I can use to set my custom style. I would change it from block to flex and add the column-reverse flex direction.
I cannot get the style property to work, however. I have tried this:
const SideNavBottom = {'display': 'flex', 'flex-direction': 'column-reverse'};
.
.
<SideNav
style={SideNavBottom}
>
You can view a demo of what I am working with at codesandbox.io. You will want to look at the RenderItems2 file.
const SideNavBottom = {display: 'flex', flexDirection: 'column-reverse'};
<SideNav
style={SideNavBottom}
/>
or
<SideNav
style={{display: 'flex', flexDirection: 'column-reverse'}}
/>
your sidenav component not closed, also you can test above code
The order is a useful property in flex.
I search this on the internet.
Summary
The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.
<View style={{display:'flex'}}>
{ item.cover ? <Image style={[styles.item, styles.newsItem]} source={{uri:item.cover}}/> : null }
{ item.title ? <Text numberOfLines={1} ellipsizeMode='tail' style={styles.newsTTopTitle} source={{uri:item.cover}}>{item.title}</Text> : null }
{ item.description ? <Text numberOfLines={1} ellipsizeMode="tail" style={styles.newsTSubTitle} source={{uri:item.cover}}>{item.description}</Text> : null }
</View>
</TouchableOpacity>
newsTSubTitle: {
fontSize:10,
lineHeight:13,
color:'#9B9B9B',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:2,
},
newsTTopTitle: {
fontSize:12,
lineHeight:15,
color:'#000000',
width:233,
textAlign:'left',
alignSelf:'flex-end',
order:1,
},
My coder is like above, as a result, the error show.
One more thing.
The item.cover sometimes does not have value. Then the Text will layout in the top of father view. I want to set the Text component in the bottom of the father view. Should I put a placeholder image in this case?
React Native's flexbox is not 100% identical to its web counterpart. RN's flexbox really only supports flexDirection, alignItems, justifyContent, and the flex attributes. You can learn more in the documentation here.