Develop Reference

React.js - Styled components - center image in direct div parent with other objects

I understand that question looks pretty easy, but I haven't found anything helping me.
I have an image inside a div, and I want that image to be centered in that div even if I add, for example, a text.
Here is some code and images to better understand that problem :
If I only have my image in my div (with solid border), all is well :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
But adding a text, I can't figure out how to keep the image in the center of the div (well aligned with the grey lines) and the text below that :
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
Here is a full example :
<div style = {{display: flex;
flex-direction: row;
height: 90%;
width: 100%;
justify-content: center;
align-items: center;}}>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
</div>
<Line/>
<Line/>
<div>
<img height = '75px' width = '75px' src={USDCoin}/>
test
</div>
<Line/>
</div>
Thank you in advance for your precious help !

You can use flexbox to do this very easily.
I've created an example here for you (doesn't include styled-components but your issue is not the styled components anyway) https://codesandbox.io/s/solitary-night-7859bz

you should use flex-direction: column;
import { React } from "react";
export default function Demo() {
return (
<>
<div
style={{
display: "flex",
flexDirection: "column",
height: "90%",
width: "100px",
border: "2px solid",
justifyContent: "center",
margin: "0 auto",
alignItems: "center"
}}
>
<div>
<img
height="75px"
width="75px"
src={
"https://images.unsplash.com/photo-1638913662252-70efce1e60a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
}
/>
</div>
<div>test</div>
</div>
</>
);
}

Align button to the bottom of the page using MUI v5 in React

I'm trying to position the button exactly at the center bottom of the page irrespective of the content height in that page.
Excerpt from my code
const useStyles = makeStyles({
button: {
bottom: 0,
right: 0,
position: "absolute"
}
});
export default function Home() {
const classes = useStyles();
return (
<div>
<Box>
<Box>
<Paper elevation={2} sx={{ width: "100%", height: "50vh" }}>
Some data
</Paper>
</Box>
<Box textAlign="center">
<Button
className={classes.button}
variant="contained"
sx={{ width: "200px" }}
>
Submit
</Button>
</Box>
</Box>
</div>
);
}
I created a working example using CodeSandbox. Could anyone please help?

This is more css related (see other post) but you as you manually set the width of the Button you can position it 50% from the left and then subtracting half of its width from its left margin:
bottom: 0,
left: "50%",
marginLeft: -100,
position: "absolute"
see exemple

why is there a gap between view and text input?

I'm getting some gap between my wrapper view and text input, I checked padding and margin but nothing works:
<View style={styles.wrapper}>
<View style={{ width: '100%',height:'10%', backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
styling:
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
},
but this goes away when you replace height:'10%' with height:50
any idea what's causing this? or how to solve this issue using relative units?

I do not recommend using your approach as it tends to behave differently on different devices. For example, your approach looks just as you expect it on web, but shows the gap on mobile devices.
Instead use a flexbox approach. The question is what you actually want to achieve here. You don't set a height on the wrapper or the Textinput. The height of the yellow bar is 10% of what exactly then? That's kind of ambiguous and prone for unexpected design issues. You could do something like this with flex box, if you want your yellow box to be 10% of the TextInput.
export default function App() {
return (
<View style={styles.wrapper}>
<View style={{ width: '100%', flex:1, backgroundColor: 'yellow' }}></View>
<TextInput style={styles.edit_input}
numberOfLines={15}
multiline={true}
/>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
width: '90%',
marginTop: '10%',
backgroundColor: 'gray',
borderTopWidth: 1,
flex: 1
},
edit_input: {
backgroundColor:'white',
color: 'black',
borderWidth: 1,
textAlignVertical: 'top',
width: '90%',
alignSelf: 'center',
flex: 9
},
});
Note that this approach will fill all the available space while yours didn't. But your only element with a height was TextInput with numberOfLines, which has a different size depending on the users fontscaling etc. So you should not rely on that.

How to add a Badge for an Icon in Ant Design?

I'm using the Icon and Badge from Ant Design. I want to add the Badge for the Icon:
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
<Badge count={5}>
<a href="#" className="head-example" />
</Badge>
</VscBell>
I have import 'antd/dist/antd.css'; imported and the Badge works without the Icon. The Icon is from reacticons and it is displayed properly. I want to add the Badge to the top right of the Icon. But it does not show at all when included in the Icon.

Put them both in a View Tag (if you are react-native) or div
and then take this styles to the badge:
position: absolute;
right: 0px;
top: 0px;
Something like this:
<div>
<VscBell
size={30}
style={{ marginRight: '10px', float: 'right' }}
>
</VscBell>
<Badge count={5} style={{ position: 'absolute', right: 0, top: 0 }}>
<a href="#" className="head-example" />
</Badge>
</div>

Mapbox canvas rendering on half of the screen

I'm trying to use MapBox with React.js. This is my code:
import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";
render() {
const Map = ReactMapboxGl({
accessToken: "..."
});
return (
<div className="App">
<Map style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: "100vh",
width: "100vw",
}}>
<Layer
style={{
position: 'absolute',
left: 0,
top: 0,
}}
type="symbol"
id="marker"
layout={{"icon-image": "marker-15"}}>
<Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
</Layer>
</Map>
{/*<button onClick={this.requestLocation}>Refresh position</button>*/}
</div>
);
}
The problem is, this is the result:
It's always precisely 50% of the width. I'm using this module: https://github.com/alex3165/react-mapbox-gl
What did I mess up?

Sorry for the late answer, this is caused by come css conflcts.
Try to comment the text-align center for .App
.App {
/* text-align: center; */
}
This should work!