I am trying to make a background using two View to look , but I am falling to set the "start" of the radius on the left size.
The result I get using :
borderBottomLeftRadius: '20%',
borderBottomRightRadius: '40%',
Is this:
But I want this:
I want the "radius" start more vertically
Any tips how I get this effect?
Thank you
Exact shaping like this through radius is probably not possible, I achieved this by use of transform: [{ scale }]
Here is the code
const { width } = useWindowDimensions();
<View
style={{
backgroundColor: '#00ffff',
borderBottomLeftRadius: width / 3,
borderBottomRightRadius: width / 2,
borderWidth: 2,
borderColor: 'black',
height: width / 2,
width: width,
transform: [{ scale: 1.4 }],
}}
/>
Here what it looks like, is this workable for you?
you can tweak the values a little bit to meet your requirement.
Related
I am running into an issue in my react native app that uses react-native-autocomplete-input. The issue only occurs in android, which, according to the react-native-autocomplete-input has known issues:
Android does not support overflows (#20), for that reason it is
necessary to wrap the autocomplete into a absolute positioned view on
Android. This will allow the suggestion list to overlap other views
inside your component.
I am wrapping the autocomplete in an absolute positioned view, as suggested. And this solves some issues.
However, what's still happening is, if I have two autocomplete fields - one appearing higher on the screen than another, when the first field has the suggestion box open up, overlaying on the screen, if a user clicks on a suggestion that happens to line up with the input field immediately "under" that suggestion, the cursor suddenly jumps to that input field. So this is obviously some kind of zIndex issue.
The thing is, I have tried setting various zIndex values, so that the text field and its container has a lower value than the autocomplete suggestion box, but this is not preventing the behavior I described above from happening.
I have read about elevation in android. Is this something I can use, and if so, how? Any suggestions would be appreciated. Here is the relevant android styling for react-native-autcomplete-input. And list refers to the autocomplete suggestions box that overlays on the screen:
const androidStyles = {
container: {
flex: 1,
position: 'relative',
},
inputContainer: {
marginBottom: 0,
zIndex: -1,
left: 40,
},
input: {
zIndex: -1,
flex: 1,
flexDirection: 'row',
alignSelf: 'flex-start',
justifyContent: 'flex-end',
maxHeight: 200,
fontSize: 15,
borderWidth: 0,
textAlign: 'right',
},
list: {
...border,
backgroundColor: 'white',
borderTopWidth: 1,
margin: 10,
marginTop: 1,
zIndex: 99999,
borderRadius: 15,
width: '65%',
zIndex: 99999,
},
listContainer: {
zIndex: 99999,
}
};
I am using the react-native-simple-radio-button package. If I specify a fontSize for the label greater than 22, the top half gets cut off. Making the radio buttons even bigger does not seem to make a difference.
Here is my code:
let radio_props = [
{label: 'ABC ', value: 0},
{label: 'DEF', value: 1}
]
let menu = <View style={{marginLeft: 40, marginTop: 40}}>
<RadioForm
radio_props = {radio_props}
buttonSize = {40}
buttonOuterSize={60}
labelStyle = {{fontSize: 30}}
initial={this.state.mode}
formHorizontal={true}
onPress={(value) => this.onPress(value)}
/>
</View>
This code produces the following results:
Is there something I am doing wrong or is it a bug in the react-native-simple-radio-button module?
Adding padding to the top worked for me
labelStyle={{
fontSize: 30,
paddingTop: 6
}}
I have a responsive photo grid built within a RN app -
I'd like 3 images to fit across the screen with the respective margin guttering. All images are squares.
I'm after some tips on the best way to achieve this - i'd use percentages in a web build for each image square but understand this isnt a possibility in RN..
This is what I have so Far:
The code basically pulls images out of an array via a map function and adds the grey image upload button at the same size after them as below:
<View style={PhotoStyles.imgThumbnailWrap}>
{this.state.ADImageArray.map((prop, key) => {
return (
<Image
source={{uri: prop, isStatic: true}}
style={PhotoStyles.imgThumbnail}
/>
);
})}
<TouchableOpacity onPress={this.photoAdditional} >
<View style={PhotoStyles.imgThumbAddMore}>
<Image source={require('../images/icons/ico-upload-
photo.png')} style={PhotoStyles.imgThumbnailBtn} />
</View>
</View>
Heres the Styles:
imgThumbnailWrap: {
flex:1,
flexDirection: 'row',
justifyContent: 'flex-start',
flexWrap:'wrap',
},
imgThumbnail: {
backgroundColor:'#f79431',
width:100,
height:100,
margin:8,
},
imgThumbAddMore: {
width:100,
height:100,
margin:8,
backgroundColor: '#e9e9e9',
alignItems:'center',
justifyContent: 'center',
},
As you can see the two image classes (imgThumbnail and imgThumbAddMore) have fixed widths in the above example - i'd like to make them fit in a row of 3 width percentage widths and height based on the width of the parent container (imgThumbnailWrap). Any advice?
You can divide the width of the device and subtract the margin on the outside
import { Dimensions } from "react-native";
const padding = 10
const itemWidth = (Dimensions.get('window').width / 3) - (padding * 4)
Use the itemWidth with both the width and height so you get perfect squares.
This problem can easily solve by using paddingTop, width, and position. Just try the below code.
<View style={{width:'100%',paddingTop:'100%'}}>
<Image source={{uri:url}} style={{position:'absolute',left:0,bottom:0,right:0,top:0,resizeMode:'contain'}} />
</View>
I have a view with 50% width, its' parent having the whole width of the phone, i want to make it circle though, this is my code that does not work:
clockContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
width:Dimensions.get('window').width
},
clock: {
width: '50%',
borderRadius: '100%', // divide this by 2?
backgroundColor: 'red'
},
i looked around and it says you divide its' width by 2, but i don't know how to implement it in this case. Help?
React Native only allows for numeric inputs in its CSS values, not percentages.
You'll want to calculate the borderRadius the same way that you calculate the parent width, and then simply divide by two:
borderRadius: Dimensions.get('window').width / 2
Or:
borderRadius: Dimensions.get('window').width * 0.5
we use the highchart control with Angular and bootstrap.
To adjust the vertical space between the chart and the legend (both are rendered by highchart as svg elements), we set the y property of the legend on page load (in the controller) like this:
$scope.chartContracts = {
options: {
chart: {
type: 'pie',
marginBottom: 50
},
legend : {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
x: 0,
y: 4,
Now in one of the Bootstraps layouts, the spacing (y) should be -10 in stead of 4 because for some reason an extra spacing is added.
So it should be based on media query or something similar I guess?
The question is how to do this... I tried with css but I can't seem to style SVG elements (they are called <g>)?
You can check window width and then return correct value.
var wWidth = $(window).width(),
value;
if(wWidth < 400) {
value = 5;
} else {
value = 10;
}
//scope
y: value