I want to have a background image that takes all the screen and stays static when I scroll.
I have this component in a React Native project:
<ImageBackground` style={styles.backgroundImage}
source={require('../assets/images/Fondo1b.jpg')}>
....
</ImageBackground>
It is wrapping another components and it has this style:
backgroundImage: {
flex: 1,
resizeMode: 'cover',
width: Dimensions.get('window').width,
height: Dimensions.get('window').height
},
When I scroll up and down, it moves with the screen:
GIF link
In here you can see how it displaces with the scroll.
I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...)
Any tips, please?
Check this out. Need exactly this for React Native
https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314
<ImageBackground style={styles.backgroundImage}/>
backgroundImage: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: -1
},
Related
I have stacked small a div on top of another div and I want the small div to be at the bottom and centered, like this: Style.
I've searched up answers but some answers are telling me to make the small div relative but I can't do that otherwise it wont stack on top of the other div. How can I achieve this?
Here is my sandbox which explains the problem:
https://codesandbox.io/s/sweet-bas-grubn
Since you are using absolute positioning, set the bottom to 0, left to 50%, then translate it left by 50% of the width.
style={{
position: "absolute",
backgroundColor: "white",
zIndex: 1,
height: "250px",
width: "40%",
bottom: 0, // <-- 0px from bottom of screen
left: '50%', // <-- 50% of parent div width from left
transform: 'translateX(-50%)', // <-- translate left 50% of child width
}}
You can try this one. I hope it will be helpful for you.
import "./styles.css";
export default function App() {
return (
<div
style={{
position: "relative",
background: "blue",
width: "100%",
height: "400px",
margin: "0px",
padding: "0px"
}}
>
<div
style={{
position: "absolute",
background:"white",
zIndex:1,
height:"200px",
width:"150px",
bottom:"0",
left:"40%"
}}
></div>
</div>
);
}
I am using this piece of code to have a footer at the very bottom in react native .However on different devices , the height appears to have changed .I want all devices to have same height from the bottom .
Here is the footer code .
footer:{
position: 'absolute',
left: 0,
top: windowHeight - 135,
width: windowWidth,
height: 180,
backgroundColor: "#436ab2",
opacity:0.5
},
I see that use of top variable is doing something .How can we assure that things are constant for all devices .
This should work
footer: {
position: 'absolute',
bottom: 0,
width: '100%',
height: 180,
backgroundColor: "#436ab2",
opacity: 0.5
}
Current Behavior
Top side of tabBar has shadow.
Expected Behavior
how to remove top shadow of top tabBar?
tried elevation: 0 but it also removes bottom shadow.
Side note - How top shadow was achieved for Tabs.Navigator (react navigation)? as box-shadow properties does not work for android and elevation only shows shadow to bottom.
How to reproduce
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
// elevation: 0,
},
}}>
Try with this:
<>
<Header /> //App name custom component
<Tabs.Navigator
...
tabBarOptions={{
....
style: {
elevation: 0,
shadowColor: "#000000",
shadowOffset: { width: 0, height: 10 }, // change this for more shadow
shadowOpacity: 0.4,
shadowRadius: 6
},
}}>
shadowOffset: { width: 0, height: 10 } shadows place only in bottom of View.
shadowOffset: { width: 0, height: -10 } shadows place only in top of View.
shadowOffset: { width: 10, height: 0 } shadows place only in right of View.
shadowOffset: { width: -10, height: 10 } shadows place only in left of View.
Found this example here.
I trying to use modal with transition using Material UI and have problem to centering it and also make it responsive or center in small size screen (mobile).
Modal can be centered and looks good on small size if not using transition, but if i add a transition, modal can't be centered or responsive.
This is the code modal without transition link.
Works good with large or small screen size.
This is the code modal with transition link.
I tried to change the value of top & left but still can't get centered at the large and small screen size :
function getModalStyle() {
const top = 25;
const left = 25;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
Can anyone help me?
By default the modal creates a parent container that uses flex, so in order to center you can comment your left: property that it is set to your modal,
return {
top: `${top}%`,
margin:'auto'
// left: `${left}%`,
// transform: `translate(-${top}%, -${left}%)`,
};
and in your modal container you can align items with this
<Modal
...
style={{display:'flex',alignItems:'center',justifyContent:'center'}}
>
https://stackblitz.com/edit/react-1ny5g7?file=demo.js
This works for me:
function getModalStyle() {
return {
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
};
}
This worked for me:
{
width: '100%',
maxWidth: '100vw',
maxHeight: '100%',
position: 'fixed',
top: '50%',
left: '0',
transform: 'translate(0, -50%)',
overflowY: 'auto'
}
I want to have a Switch component without extra height, width, padding, margin
This is my Switch component
<Switch
checked={isSubscriptionStatusActive}
onChange={onHandleChangeSubscriptionStatus}
disabled={subscriptionStatus === 'deactive'}
aria-label="subscribption-status"
classes={{
root: classes.root,
bar: classes.bar,
}}
>
Here is it's styling
let style = {
root: {
display: 'inline-flex',
width: 0,
position: 'relative',
flexShrink: 0,
},
bar: {
borderRadius: 7,
display: 'block',
position: 'absolute',
width: 34,
height: 14,
top: '50%',
marginTop: -7,
left: '50%',
marginLeft: 0,
},
};
Steps to Reproduce (for bugs)
https://codesandbox.io/s/x2wom4pm9z
https://codesandbox.io/embed/x2wom4pm9z
Material UI Issue Filed Here
https://github.com/mui-org/material-ui/issues/9587
Technically, Switch doesn't have any "extra" width or height. The whitespace around it is used to render the ripple.
You can disable the ripple with the disableRipple prop, and affect the Switch width as you've dicscovered, but digging into the source, unfortunately it isn't currently possible to pass props to SwitchBase which would be needed to affect the IconButton that is used for the switch "thumb".
You could perhaps modify your issue to discuss the posibility of submitting a PR to adress this limitation. We have xxxProps props on other components for similar purposes.
PS. You forgot to link from your issue to here, but I found it anyway. :)