<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>
);
Related
If you look at other examples, you can see them reacting immediately.
But my code reacts slowly.
If you watch the video, you can see what I mean.(https://youtu.be/jo_iDDh2WBw)
Please tell me a solution to this.
Below is my code.
<SafeAreaView style={{...structure.safeViewContainer, backgroundColor: "#ffffff"}}>
<View style={{...structure.container}}>
<BlurView intensity={100} style={{...structure.headerBox}}>
<Header arrow={false} navigation={navigation} />
</BlurView>
<ScrollView style={{...structure.contentContainer, overflow: 'visible', backgroundColor: colors.lightGray}}>
<View style={structure.contentBox}>
<View style={{ right: 0, left: 0, backgroundColor: "#000000", height: 300, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, marginBottom: 55, borderRadius: 20 }}></View>
</View>
</ScrollView>
<View style={{ backgroundColor: colors.lightGray, right: 0, left: 0, height: 20, bottom: -20, position: "absolute" }}></View>
</View>
<TabBar navigation={navigation} />
</SafeAreaView>
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>
I set two half oval buttons and try to set the position on center.
But I found they don't stick together, I try to change justifyContent: 'space-between' or 'space-around' is not working.
How to let Left button and Right button stick together ?
Here is my code:
return (
<View style={{ justifyContent: 'center', marginTop: 50, flexDirection: 'row', backgroundColor: 'blue' }}>
<TouchableOpacity style={[styles.buttonStyle, { width: 150, height: 50, borderBottomLeftRadius: 50, borderBottomRightRadius: 0, borderTopLeftRadius: 50, borderTopRightRadius: 0 }]}>
<Text>Left</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.buttonStyle, { backgroundColor: 'orange', width: 150, height: 50, borderBottomLeftRadius: 0, borderBottomRightRadius: 50, borderTopLeftRadius: 0, borderTopRightRadius: 50 }]}>
<Text>Right</Text>
</TouchableOpacity>
</View>
);
const styles = StyleSheet.create({
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,
marginRight: 5
},
});
remove margins,
buttonStyle: {
alignSelf: 'stretch',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink',
borderWidth: 1,
borderColor: 'transparent',
marginLeft: 5,//this
marginRight: 5// this
},
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 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.