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 }],
}}
Related
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%)"
}}
Using React,
I have a parent element which is div with a display grid and an input inside it.
<div style={{ display: "grid" }}>
<input/>
</div>
My problen is when i remove the display:"grid" from style attribute, the element.getBoundingClientRect() returns right values which is :
{
bottom: 292,
height: 30,
left: 524.4000244140625,
right: 683.6000213623047,
top: 262,
width: 159.1999969482422,
x: 524.4000244140625,
y: 262
}
But when I change the display property to grid, the result is returned wrong :
{
bottom: 292,
height: 30,
left: 16.399999618530273,
right: 683.6000118255615,
top: 262,
width: 667.2000122070312,
x: 16.399999618530273,
y: 262
}
Does anyone know what is the problem?
**I forgot to say that the direction of html is rtl
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.
I did horizontal scroll and also I added tooltip, but tooltip is not working. I am using react-lightweight-tooltip library. I trying with with z-index but it is not working also, I don't know why. Can anybody help me with that. Thank you !
Playground: https://codesandbox.io/s/cool-mendeleev-jb1be
Your custom styles are hiding the tooltip, specifically the bottom: 100% on tooltip.
Remove that or adjust it so that the tooltip shows.
I tested this by using bottom: 0, and that seems to fix it.
Here:
export const underlyingsTooltipStyle = {
/* OMITTED IRRELEVANT STYLES */
tooltip: {
position: 'absolute',
zIndex: '99',
background: '#000',
bottom: '0',
left: '50%',
marginBottom: '10px',
padding: '5px',
WebkitTransform: 'translateX(-50%)',
msTransform: 'translateX(-50%)',
OTransform: 'translateX(-50%)',
transform: 'translateX(-50%)',
},
/* OMITTED IRRELEVANT STYLES */
]
I have an absolutely positioned round image. The image needs to take only 17% of screen width, and also be positioned 5 pixels from the top.
Problem is, when I resize the image to take up 17% of screen width, it does so but at the same time the container becomes elongated. The image itself does not stretch, but is positioned in the middle of the elongated Image container.
Styles:
const styles = StyleSheet.create({
imageBase: {
position: 'absolute',
left: 15,
top: 5,
width: '17%',
resizeMode: 'contain',
backgroundColor: 'red',
}
});
What I'm rendering:
<Image
style = { styles.imageBase }
source = { require('roundImage.png') }>
</Image>
Current result:
I need it to either cut off the extra space from the Image container, or position the image at the top of the container, instead of middle.
What I'm trying to do:
One way to solve this is to wrap your image in a View with an aspect ratio of 1:
<View style={{ flex: 1 }}>
<View
style={{
position: 'absolute',
left: 15,
top: 5,
width: '17%',
aspectRatio: 1,
}}
>
<Image
style={{
width: '100%',
height: '100%',
backgroundColor: 'red',
resizeMode: 'contain',
}}
source={require('roundImage.png')}
/>
</View>
</View>