We Keep Coding

ReactJS CSS inline style position dynamically

I have this element in my React code:
{focusedAnnotationIconProps && (
<div
style={{
backgroundColor: "#333",
width: "100px",
position: "absolute",
left: focusedAnnotationIconProps.left,
top: focusedAnnotationIconProps.top + 25,
color: "#fff",
}}
>
{annotationIconPopoverText}
</div>
)}
this is a popover that will show when hovering over an icon, so I get the CSS left/top position numbers from that Icon (in another part of the code), and place it there, and currently, is showing like this:
I need to center this popover in the middle of the icon
but the thing is, this <div> element has variable width, depending on the text inside
so I was thinking of someway to do something like this:
left: focusedAnnotationIconProps.left - this.width/2
but I know that won't work.. I tried using the calc css3 function, but won't work inline with CSS, so there's my problem.. would appreciate any help

With position: absolute, you can use these methods to center the elements:
Center Vertically:
style={{
top: "50%",
transform: "translateY(-50%)"
}}
Center Horizontally:
style={{
left: "50%",
transform: "translateX(-50%)"
}}
Center to the parent div:
style={{
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
}}

How do I position my element to be sticky (stay on screen when I scroll pass them)

I'm coding a basic eCommerce website using NextJS and I'm having a problem
I want to have a sticky tab in the middle of my page but for some reason position: 'sticky' doesn't work
This is my code
[other stuff here]
<div className={classes.stickyTab}>
<Grid style={{ backgroundColor: '#FFFFFF' }}>
<div className={classes.outerTab}>
<div className={classes.innerTab}>
<div>Tab number 1</div>
</div>
</div>
</Grid>
<Grid style={{ backgroundColor: '#FFFFFF' }}>
<div className={classes.outerTab2}>
<div className={classes.innerTab2}>
<div>Tab number 2</div>
</div>
</div>
</Grid>
</div>
[other stuff here]
And this is the styles.js
stickyTab: {
position: 'sticky',
},
outerTab: {
display: 'flex',
paddingTop: 16,
paddingRight: 16,
paddingBottom: 16,
paddingLeft: 16,
},
innerTab: {
fontSize: '20px',
},
outerTab2: {
position: 'relative',
marginTop: 10,
marginBottom: 10,
},
innerTab2: {
position: 'relative',
marginLeft: 10,
marginRight: 10,
marginBottom: 10,
},
This is what it looks like visually
Basically all I want is for my 2 white bars to be sticky so that they stay on the screen when I scroll pass them. All I did was wrap both of them inside a div then gave it position: 'sticky' but like I said it didn't work like I thought it would. Perhaps I'm missing something here?
Any helps would be much appreciated, thanks.

Using position sticky property requires you to add the position also.
Try adding top: 0; and width: 100% and height: 50px. You can have the width and height according to your needs.
stickyTab: {
position: 'sticky',
top:"0",
width:'100%',
height: '50px'
}

React Native Responsive Screen

I have a question about screen design in React Native.
I am building an App with Expo. It runs on my AS Emulator - Nexus 5x. When I take my real device - Samsung S9 the pages look different for example text on the left and right is cut away because the screen seems to be to small. However both devices have the same width kind of 72mm and 69mm but S9 is curved. How do you guys keep your apps responsive?
I already did some componentWillMount checks where I make the fields height larger if the screen is to high. Should I do the same for the width? Or should I maybe use react-native-responsive-screen package for example? If there are some more experienced RN-Devs please give me a quick tip on how you actually manage this.
Edit :: Is this code below actually a good practice? Its my StyleSheet and I tried to work with absolute position - which looks nice on the Emulator but I guess it's not good practice.. Should I rewrite the styles?
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center"
},
headerText: {
fontSize: 30,
color: "black"
},
DateContainer: {
marginTop: 10,
marginBottom: 10
},
DateText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 14,
left: -100
},
phaseButton: {
position: "absolute",
top: -42,
right: -95,
height: 30,
backgroundColor: "#a51717",
borderRadius: 45
},
checkbox: {
position: "absolute",
top: -5,
right: -180,
height: 30
},
ZeitText: {
position: "absolute",
fontSize: 16,
color: "black",
top: 12,
left: -199.5
},
ZeitInput: {
position: "absolute",
left: -150,
top: 8,
width: 100,
height: 35,
borderWidth: 1,
textAlign: "center"
},
checkText: {
position: "absolute",
top: 12,
right: -115,
height: 30,
color: "black"
},
button1: {
position: "absolute",
left: -120,
top: 8,
height: 30,
marginHorizontal: 20,
backgroundColor: "#a51717"
},
button2: {
position: "absolute",
left: -60,
top: 8,
height: 30,
backgroundColor: "#a51717"
}
});
Edit2.0: I changed my absolute positions to flexDirection: row and the width to percent. Is a Button that takes width: "30%" responsive? so does it always take 30% of the space there is?

you can use so many approaches for having a responsive application ,
one of the most common and i think the best one , is giving the style values according to the width and height of the devices.
you can easily import Dimensions from react-native and do your styling according to width and height property of the device running the app!
e.g.
import { Dimensions } from 'react-native';
const {width,height} = Dimensions.get('window')
const styles = StyleSheet.create({
container: {
justifyContent: "center",
alignItems: "center",
marginLeft:width*.01
},})
and so on, For more informations i recommend you to read https://reactnative.dev/docs/dimensions
i hope it helps

I always set a flex to the screen first. And style it accordingly.
<View style={{flex: 1}}>
<View>
"Any styling here"
</View>
</View>
This will give me a full screen flex at first. And this will adjust accordingly to the device's screen.

React Native Half oval on View

I'm new to react-native, I want to create a view with a half oval in the bottom. I can achieve this problem using CSS, but I cannot use it in react-native as it only accepts the single number.
Example result
.halfOval {
background-color: #a0C580;
width: 400px;
height: 20px;
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
<div class="halfOval"></div>

One solution I can say is to create a semicircle and scale it based on your device resolution. Sample code is given below
<View style={styles.ovalBgH}>
<View style={styles.ovalBg}>
</View>
</View>
Stylesheet code
ovalBgH:{
overflow: 'hidden',
width : 50,
height:25,
position : 'absolute',
borderBottomEndRadius:25,
borderBottomLeftRadius:25,
left:-25,
top:10,
backgroundColor:'transparent',
transform: [
{scaleX: 7}
]
},
ovalBg:{
backgroundColor: '#a0c580',
width : 50, height:50,
transform: [
{scaleX: 7}
]
}
Screenshot is given below

Try to use this kind of style may be your requirement would be fulfilled.
https://snack.expo.io/HkfD57Ipr
style={{
width: 100,
height: 50,
backgroundColor: '#a0C580',
borderBottomEndRadius: 100,
borderBottomStartRadius: 100,
transform: [{ scaleX: 3 }],
}}

How to vertically and horizontally center a component in react?

How can I achieve absolute centering with CSS-in-JS? When I use the following code, my component moves across the screen. I guess the translate is being applied many times instead of just once. What's going on, and how can I fix it without using a library?
render() {
return (<ComponentASD
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}} />);
}

Another option is to use flex-box.
<div style={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}>
Hello world
</div>

Your example code works well:
ReactDOM.render(
<div
style={{
position: 'absolute', left: '50%', top: '50%',
transform: 'translate(-50%, -50%)'
}}
>
Hello, world!
</div>,
document.getElementById('root')
);
https://codepen.io/anon/pen/JaLLmX
It has to do something with your layout.

Thanks for the testing+comments! The styling ended up being fine, the issue was somehow caused by the layout of ComponentASD, which is actually MUI's CircularProgress https://material-ui.com/api/circular-progress/#demos
I wrapped that component in a div inside of render and applied the styling to the div, which fixed the problem (keeps it stationary and properly aligned).

This is flexbox you will need to use this on the parent Component.
.Parent {
display: flex,
flexFlow: row nowrap,
justifyContent: center,
alignItems: center,
{
It will center the children vertically and horizontally
You can also align each component as I've shown you below
render() {
return (<Childcomponent
style={{
display: flex,
flexFlow: row nowrap,
justifySelf: center,
alignSelf: center,
}} />);
}

If you want to have a properly scrollable list if the window's height is smaller than the content's height you want to center, you can do this (based on this CSS answer):
<div
style={{
display: "table",
position: "absolute",
height: "100%",
width: "100%",
top: 0,
left: 0
}}
>
<div
style={{
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
}}
>
// Here comes the content you want to center
</div>
</div>

If you want to use it in a component just call it in the component:
.Login {
text-align: center;
background-color: #2681C6;
min-height: 100vh;}
Your jsx file sould have something like just to call it, using "className":
<div className="Login"><div>