I have a problem with adding shadow to my View Component.
here is the style object:
header: {
width: '95%',
height: '15%',
marginTop: 50,
alignSelf: 'center',
borderRadius: 20,
justifyContent: 'center',
flexDirection: 'row',
paddingHorizontal: 10,
elevation: 2,
},
and it looks like this :
and as soon as I add these style properties :
borderWidth: 1,
borderColor: 'white',
it looks better but not the best way:
what is my problem? can you help me ?
If you'd like to add a shadow to a <View/> component I would suggest you to use the shadow props. You can add a shadow to a view component by using the style properties like so:
// Just picked some random values for each of the properties.
const styles = StyleSheet.create({
header: {
shadowOffset: {
width: 20,
height: 10
},
shadowOpacity: 0.2,
shadowRadius: 20
},
});
Result of example code
I am not able to replicate the styling you have shown with just the code you have supplied. So I can't give you an answer as to why adding borderWidth and borderColor properties change your shadows. If you'd like me to dive into that, please supply the code of the entire component or even better an Expo snack.
What I did notice is that you used the elevation style property, which is will only add a shadow on Android (source). Additionally this property will also affect the z-order for overlapping views, so I would advise against using this if it is just for shadows.
Expo Snack Demo
BackgroundColor:white fixed the problem, thanks to #Ajay
use backgroundColor:'white' fixed the problem
Related
I was trying to customize jitsi-meet. Here toolbar contains video mute, audio mute, and other buttons. How to place the container with blue background in the bottom of the screen?
If I remove height property then this whole thing is placed in the bottom of the screen but in this case I don't get spacing around items in toolbar.
toolbar: {
alignItems: 'flex-start',
flexDirection: 'column',
justifyContent: 'space-around',
marginBottom: 10,
paddingHorizontal: 5,
backgroundColor: 'dodgerblue',
height: '70%',
},
If I put height:'100%' it takes whole screen. Other elements are commented here. This screen in stacked top of a camera screen.
toolbar: {
flexDirection: 'row',
justifyContent: 'space-evenly',
marginBottom: 10,
paddingVertical: 5,
width:'100%',
backgroundColor: 'dodgerblue',
}
if you want to align the content in a horizontal row then you should give the flexDirection='row'. In react native default flexDirection is column so there is no need to mention it explicitly.
It's hard to understand without posting what you're fully rendering, but it seems like you need to wrap the toolbar view in a parent view, and fix the parent view to start at the bottom of the page through justifyContent: 'flex-end'
<View style={{justifyContent:'flex-end', flex:1}}>
<View style={{styles.toolbar}}>
</View>
</View>
Alternatively, you could set the parent view to flexDirection: 'column-reverse'.
I am working in one project, in which I used fabricJS-3.6.3. It is a best library
for canvas manipulations.
As we know the limitation of the canvas, canvas renders a half-pixel of an image. So sometimes it's blurry. Same Problem I put in front of you.
I am trying to render Text into canvas using following code
var text = new fabric.Textbox("lorem ipsum pixel", {
top: 13.5
left: 12.13
width: 157.68
fontSize: 15
fontFamily: 'opensans-lightItalic'
scaleX: 0.67
scaleY: 0.67
})
canvas.add(text);
I have tried this code to make it round:
var text = new fabric.Textbox("lorem ipsum pixel", {
top: 13.5
left: 12.13
width: 157.68
fontSize: 15
fontFamily: 'opensans-lightItalic'
scaleX: 0.67
scaleY: 0.67
})
text.set({
height: Math.round(text.height),
width: Math.round(text.width)
})
canvas.add(text);
canvas.loadFromJSON(canvas.toJSON(), canvas.renderAll.bind(canvas));
Now the result of this code will always blurry Because canvas render Half a Pixel and we got image blurry.
So For clear Result, I have to just set it to with Rounded value. Now the actual problem is that project is too large and has a complex structure, So I want to make one fabricJs patch that automatically replace (top, left, scale ETC...) properties into rounded value. I have tried to make it using fabric.Object method override, but can't be got success in that.
If Anyone knows that how to access and set a property to all object, Then Please help me.
Instead of Textbox you should use IText
var text = new fabric.IText('lorem ipsum pixel', {
top: 13.5,
left: 12.13,
fontSize: 15,
fontFamily: 'opensans-lightItalic'
});
canvas.add(text);
Is there way to customize padding / position... of the burger button.
In the doc, i just can find the drawerImage parameter to override the burger image...
Saddly no option without forking. You can check the code here:
https://github.com/aksonov/react-native-router-flux/blob/master/src/NavBar.js. Padding and position is fixed.
Actually there's a parameter for it : leftButtonStyle
in my case I use react-native-vector-icons getImageSource for the burger icon
componentWillMount() {
Promise.all([Icon.getImageSource('bars', 16, 'black')])
.then((values) => {
this.setState({
menuIcon: values[0],
});
});
}
then you do something like this:
const menuIcon = {
uri: this.state.menuIcon.uri,
height: 20,
width: 20,
resizeMode: 'stretch',
color: 'white',
};
then in your tabs scene
<Scene
key="main"
type="replace"
initial
drawerImage={menuIcon}
tabs
style={{ backgroundColor: theme.navColor, justifyContent: 'center' }}
>
I have a fabric triangle
var fabObj = new fabric.Triangle({
left: 250,
top: 250,
fill: 'white',
width: 60,
height: 60,
name:'triangle',
borderColor: '#f0000',
cornerSize: 8,
transparentCorners: true,
hasControls:true,
lockScalingX:true,
lockScalingY:true
});
$scope.canvas.add(fabObj);
$scope.canvas.setActiveObject(fabObj);
$scope.canvas.renderAll();
It creates the triangle like following
I want another triangle to fit on either side but could not overlap each other
Have tried this code but it only detect corners (square boundary of triangle )
https://stackoverflow.com/a/31153459/3377733
Please refer to this following fiddle
http://jsfiddle.net/m0jjc23v/23/
Fabric.js is not build to handle such scenarios. It's better to use Matter JS http://brm.io/matter-js/
They do handle all physics properties.
I want the user to be able to select a fabric.Textbox and do the rotation, move, resizing etc but not the editing of the text. To edit the text the user must select the textbox object and then activate the textediting (not in fabric).
So what I want is to avoid that the user can edit the text in fabric (like fabric.Text).
Is there any way to do this?
canvas = new fabric.Canvas('canvas');
var shape = new fabric.Textbox('I am a not editable textbox', {width: 200, top:0, left:0, editable: false, cursorWidth: 0});
canvas.add(shape);
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>
Fabric.js Textbox subclasses IText.
From the IText documentation you can see:
/**
* Indicates whether a text can be edited
* #type Boolean
* #default
*/
editable: true,
Why the cursors still appear is a mystery to me. So I applied a cursorWidth = 0 to temporarily patch the problem.
It is probably an issue with the library itself.
var textboxObj = new fabric.Textbox(selectValue, {
fontSize: 24,
originX: 'center',
originY: 'center',
top: center.top,
left: center.left,
editable: false,
});