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
Related
Currently I'm trying to add an animation to a page of a few shooting stars flying across the screen. I want the star to appear and end at certain percentages of the available screen to make it responsive and visible on any device. However when I try to do this, my values seem to default to 0px rather than the percentage that I am passing into my tailwind.config.js from my React Component. The values work if I pass in pixels, but as I mentioned, I would rather do percentages so that it can work well on any screen.
Currently, I am passing in my desired percentage values using this method with an alteration to make it React compatible like this:
style={{"--startingX":props.startingX}}
I am currently using NextJS and TailwindCSS to attempt to make this.
Here are (what I believe are) the relevant files:
/components/shootingStar.js
export default function ShootingStar(props) {
return (
<div>
<div style={{"--percentage":props.startingX}} className="absolute animate-star">
<div className="transform absolute top-2/4 ..."></div>
<div className="absolute top-full left-2/4 ..."></div>
</div>
</div>
)
}
animation: 'star' is the animation in question, inside of keyframes I created my custom animation.
tailwind.config.js:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
},
'animation': {
...
star : "star 3s linear infinite"
},
'keyframes': {
...
star: {
'0%' : {
transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
'opacity': '50%'
},
'75%' : {
'opacity' : '100%'
},
'100%' : {
transform : 'translateX(350px) translateY(500px) rotate(235deg)',
'opacity' : '0%'
}
}
}
},
},
plugins: [],
}
index.js
return (
//This div is the parent div to the whole page which is why I included it.
<div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
<ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
{The remaining shooting stars would eventually get created here}
</div>
...
)
When the animation is at 0%, I would like my star component to start at a specified X% of my screen (for example if I pass in 25% to my percentage var, I would like it to start 1/4 of the way into the screen from the left hand side of the window.)
If this is possible, I plan to expand this for the starting Y value and the ending values of X & Y as well which is why I have those props passed in.
If I pass in 25% to my percentage var, my starting value is at the top left of the screen (or 0). and allows the animation to run. If I try to hardcode percentage values into my Keyframe animation, the animation does not occur since all of the values are technically defaulting to 0.
I am expecting the animation to start at 1/4 of the way in from the left hand side.
I feel as if I'm doing something slightly wrong that won't allow me to make this animation possible but I am not entirely sure what that would be.
I figured out why my animation was stuck in the top left after further research. Keyframe animations take the height and width specifications of the component that is being animated, and do not inherit their parent's height or width (as I initially thought they did). Because I had not specified a height or width for my component it could not move across the screen as I originally wanted it to.
For anyone who might run into this as I did make sure you are setting the height and width of your components to allow your animation to go through your component. Otherwise, if you want it to run through your entire viewport, use vh rather than % when setting your animation values.
Regardless, I decided to opt for viewport since it better fits my use case.
I am using MUI for UI.
I have some options, given in image below:
It is perfect till now. But I want to move options container to more bottom. (Currently it is set as top: 64px which is default).
I want to set it as top : 100px. After setting, it will look like :
I have tried to achieve this, but css didn't apply.
const useStyles = makeStyles((theme) => ({
userAge: {
"& .Mui-focused": {
"body .MuiPaper-root": {
top: "100px !important" // 64px is default
}
}
}
}));
//jsx return
<FormControl fullWidth className={classes.userAge}>
// more code here
</FormControl>
You can also try here : https://codesandbox.io/s/funny-shannon-h6flch?file=/demo.tsx
Note :
I don't want to set top : 100px globally.
Made some changes to your codesandbox. Hope it helps ;)
Styles need to be applied to menu via MenuProps and then applying class based styles to paper
https://codesandbox.io/s/change-the-default-position-of-options-in-mui-stackoverflow-lm9mxn?file=/demo.tsx
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'm using react and material-ui and I have come across an issue, I want to define some css behavior for the drawer component, and I have read that it is quite simple, that all I have to do is use the className property, but for some reason it doesn't work.
Here is my css:
.drawer {
width: 200px
}
.drawer:hover {
background-color: black
}
Here is my usage of the drawer:
<Drawer open={this.state.isLeftNavOpen}
docked={false}
className='drawer'
onRequestChange={this.changeNavState}>
<MenuItem primaryText='Men'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: MEN}})}/>
<MenuItem primaryText='Women'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: WOMEN}})}/>
<MenuItem primaryText='Kids'
onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: KIDS}})}/>
</Drawer>
I tried wrapping the Drawer with div but still no success.
Any idea what I'm doing wrong?
The library does seem to be adding the className, but this issue you are seeing seems to be a consequence of material-ui setting styles directly on the element, which take priority over those on the class you've added. There are a couple of options until the library makes some changes/fixes, such as:
1) set the width and styles inline with the style and/or width properties: (fiddle)
<Drawer open={this.state.isLeftNavOpen}
docked={false}
width={200}
style={{'background-color': 'black'}}
className='drawer'>
Unfortunately this approach doesn't allow for :hover styling though, and their current inline styling solution is likely to be changed in the near future (see issue 1951 and those that follow it). That means that your only real solution at the moment to this specific problem is to:
2) mark the styles in the css as !important to override those set on the element by the library: (fiddle)
.drawer {
width: 200px !important;
}
.drawer:hover {
background-color: black !important;
}
You can also use a combination of the two, passing the width as a prop and only having the hover background style be !important.
(Using LeftNav (the older version of Drawer) in the fiddles because it's in the easiest-to-consume package I could find at time of writing for material-ui, found it on this comment).
I'm using react and material-ui in my project and I have come across a simple issue that I just dont't know how to solve.
I want to create a drawer and set its height in a way that when it will open, it wont open over the app bar.
There is no parameter in the Drawer component for the height, I also tried to override its style and setting up the height on the style object like this :
<Drawer style={{height:'90%'}} />
But it didn't work.
The only way I can think of, is editing the code of the Drawer component, but ofcourse I want to avoid that.
Any idea on how I can define the height?
Here you go:
<Drawer open={this.state.open} containerStyle={{height: 'calc(100% - 64px)', top: 64}}>
<MenuItem>Menu Item</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
containerStyle is prohibited in version 1.0 and above
So you need to use props classes instead
Here is an example to this nontrivial case
import {withStyles, createStyleSheet} from 'material-ui/styles'
const styleSheet = createStyleSheet({
paper: {
height: 'calc(100% - 64px)',
top: 64
}
})
class CustomDrawer extends Component {
...
render () {
const classes = this.props.classes
return (
<Drawer
classes={{paper: classes.paper}}
>
...
)
}
CustomDrawer.propTypes = {
classes: PropTypes.object.isRequired
}
export default withStyles(styleSheet)(CustomDrawer)