How can I design a following view. I tried with borderWidth adjustment and transprency. Help me.
How can the following '30% off' view can be made ?
This worked for me.
<View style={{
width: 62,
height: 0,
borderBottomColor: colors.yellow,
borderBottomWidth: 15,
borderLeftWidth: 15,
borderRightWidth: 15,
borderRightColor: 'transparent',
borderLeftColor: 'transparent',
transform: [{ rotate: '315deg' }],
top: 9,
left: -15,
position: 'absolute',
}}
>
<Text style={{fontFamily: 'Montserrat_Medium', fontSize: 9, color: colors.white, marginTop: 1}}>25% off</Text>
</View>
Related
<View
style={{
width: '100%',
height: 10,
borderTopLeftRadius: 30,
borderTopRightRadius: 10,
backgroundColor: DefaultVariables.Colors.primary,
}}
/>
make this shape
Can anybody help to make such kind of shape in React Native?
hope this will help you
return (
<View
style={{
width: 200,
height: 200,
borderColor: '#000',
borderWidth: 0.5,
backgroundColor: 'white',
marginLeft: 60,
marginTop: 100,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}>
<View
style={{
backgroundColor: 'blue',
width: 200,
height: 20,
borderColor: '#000',
borderWidth: 0.5,
marginTop: 0,
marginLeft: 0,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
}}></View>
</View>
);
As I know shadowOffset, Opacity, Radius is used for IOS, not Android, but i still added.
For Android, shadowColor should be enough i guess, if not, then I added elevation for it to work.
I try to give some shadow to some fields. I defined by style={styles.tracking}where i want to give some shadow.
I added these codes there: but it doesnt work, neither it gives an error.
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
here is styles.tracking
tracking:{
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.27,
shadowRadius: 4.65,
elevation: 6,
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
marginVertical:20,
},
How can I show the shadow in this code?
<View style={styles.tracking}>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<Deliver style={styles.leftIcon} height={30} width={30} fill={"#008000"} />
<View style={styles.adressMargin}>
<Text style={styles.trackingId}>CKR90825567</Text>
<Text style={styles.trackingAdress}>Jakarta - Surabaya</Text>
</View>
</View>
<View style={styles.rightIcon}>
<Circle style={styles.rightMargin} height={8} width={8} fill={"#008000"} />
<Text style={styles.delivered}>Delivered</Text>
</View>
</View>
tracking:{
flexDirection:"row",
alignItems:"center",
justifyContent:"space-between",
marginVertical:20,
},
delivered: {
fontWeight: "bold",
fontSize: 17,
color: "green",
marginRight: 20,
},
leftIcon:{
marginLeft:30,
},
rightIcon: {
flexDirection:"row",
alignItems:"center",
},
adressMargin: {
marginLeft:30,
},
trackingId: {
fontSize:20,
fontWeight:"bold",
},
trackingAdress:{
color:"grey",
},
the screenshot
Shadow does not work in Android. You can use a View as background to apply shadow. Example
<View
style={{
padding: 10,
width: 200,
height: 100,
backgroundColor: 'grey',
borderRadius: 7,
zIndex: 2,
elevation: 40,
}}>
<Text
style={{
textAlign: 'center',
color: 'white',
}}>
Button
</Text>
</View>
<View
style={{
backgroundColor: '#d3d3d3',
marginLeft: 25,
marginTop: -100,
borderRadius: 7,
width: 195,
height: 108,
}}></View>
End Result
I am trying to create a circular cutout in React Native, something similar to the image below where the light grey is transparent.
I can successfully duplicate this design using absolute positioning and fixed background colours but am unsure of how I would go about making the cutout around the image at the top transparent?
I actually found a method of doing this using only styling, the trick was to use the inside of a curved border to create the circular cutout.
Snack
<View style={styles.container}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View
style={{
height: 20,
width: 80,
borderTopLeftRadius: 30,
backgroundColor: 'black',
}}
/>
<View style={{ width: 40 }} />
<View
style={{
position: 'absolute',
bottom: -10,
left: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderLeftWidth: 10,
borderColor: 'black',
borderBottomLeftRadius: 45,
}}
/>
<View
style={{
position: 'absolute',
right: 85,
top: -15,
borderRadius: 100,
height: 30,
width: 30,
backgroundColor: 'blue',
}}
/>
<View
style={{
position: 'absolute',
bottom: -10,
right: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderRightWidth: 10,
borderColor: 'black',
borderBottomRightRadius: 45,
}}
/>
<View
style={{
height: 20,
width: 80,
borderTopRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
<View
style={{
height: 180,
width: 200,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
You can set position:"absolute" to image view, and set its position accordingly.
Try this,
<View
style={{
height:400,
justifyContent: 'center',
marginTop: 100,
}}>
<View
style={{
backgroundColor: 'grey',
height: 80,
width: 80,
alignSelf: 'center',
borderRadius: 40,
borderColor: '#FFFFFF',
borderWidth: 10,
position: 'absolute',
top: -40,
zIndex: 1,
alignItems:"center",
justifyContent:"center"
}}
>
<Text>Image</Text></View>
<View
style={{
height: 400,
margin: 20,
backgroundColor: 'grey',
borderRadius: 40,
}}
></View>
</View>
see working expo example here
You can create the top left and top right sides of the box then put an image cutout in the middle in the shape of the semicircle for the circle to fit in.
<View style={styles.container}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopLeftRadius: 45}}></View>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopRightRadius: 45}}></View>
</View>
<View style={{backgroundColor: 'grey', height: 300, width:308, borderBottomLeftRadius: 45, borderBottomRightRadius: 45}}></View>
<View style={{position: 'absolute', alignSelf: 'center', top: 145}}>
<ImageBackground
style={{width: 60, height: 50}}
source={{uri: "https://i.imgur.com/ncjPX1k.png"}}>
<View style={{backgroundColor: 'grey',width:50, height: 50, borderRadius: 27.5, top: -30, alignSelf: 'center'}}></View>
</ImageBackground>
</View>
</View>
See the snack (styling is a bit off):
I have created this button and I am trying to achieve something like this:
Here's my approach so far:
<TouchableOpacity disabled={disabled} style={{position:'absolute', bottom:5, right:10}}
onPress={()=>navigation.navigate('FilterByIngreds')}>
<View style={floatStyle}>
<Image style={{ width:40, height: 44, justifyContent:'center', alignItems:'center'}}
source= {require('../../assets/img/05_items/ingIcon.png')}/>
</View>
<View style={{width:16, height:16, borderWidth:2, borderColor:'#fff',
borderRadius:8, backgroundColor:'rgba(65, 204, 151, 1)',
position:'absolute', top:2, right:5, zIndex:5}}/>
</TouchableOpacity>
But the DOT is behind the Button.
Any help will be appreciated. Thanks in advance!
You need to remove < View style={floatstyle} > and try this code
< TouchableOpacity
disabled={true}
style={{ position: "absolute", bottom: 5, right: 10 }}
onPress={() => navigation.navigate("FilterByIngreds")}
>
<Image
style={{
width: 100,
height: 100,
justifyContent: "center",
borderRadius: 100 / 2,
backgroundColor: "#000",
alignItems: "center"
}}
/>
<View
style={{
width: 16,
height: 16,
borderWidth: 2,
borderColor: "#f0f",
borderRadius: 8,
backgroundColor: "rgba(65, 204, 151, 1)",
position: "absolute",
top: 5,
right: 10,
zIndex: 5
}}
/>
</TouchableOpacity>
I want to make a button as the below.
Please help me.
Here are two ways to do it:
This one uses skewX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 120,
height: 70,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: -10,
top: -10,
backgroundColor: 'yellow',
borderLeftWidth: 5,
borderLeftColor: 'black',
transform: [{
skewX: '-45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
And here's the other way using rotateX:
<View style={{
width: 200,
height: 50,
borderWidth: 4,
borderColor: 'black',
// Uncomment this to see how it looks unclipped
overflow: 'hidden',
borderRadius: 10,
backgroundColor: 'white',
position: 'relative',
// These are to center the text
alignItems: 'center',
justifyContent: 'center',
}}>
<View style={{
width: 100,
height: 150,
position: 'absolute',
// These offsets were required because the transform
// would move them off the edges
right: 10,
top: -30,
backgroundColor: 'yellow',
borderLeftWidth: 4,
borderLeftColor: 'black',
transform: [{
rotate: '45deg',
}]
}} />
<Text style={{
backgroundColor: 'transparent',
fontSize: 20,
}}>Hello World</Text>
</View>
I prefer the rotation method because the skew will mess with the border width of the diagonal line.