App.js
<View style={style.headr}>
<TouchableOpacity
onPress={() => navigation.goBack()}
>
<Image style={style.backimg} source={require("../img/back.png")} />
</TouchableOpacity>
<Text style={{ fontSize: 23, marginLeft: deviceWidth/5, color: '#fff' ,}}>Notification</Text>
</View>
css
headr: {
width: "100%",
height: 100,
backgroundColor: '#3C79F5',
elevation: 2,
alignItems: 'center',
flexDirection: 'row',
borderBottomRightRadius:50
},
here is img
I want Img 1 output but when i try to is look like Img2 output
how to do full responsiv output like img1
For responsive height, width, margin, padding.. you can use this npm
https://www.npmjs.com/package/react-native-responsive-screen
For responsive font size, you can go with this npm
https://www.npmjs.com/package/react-native-responsive-fontsize
Regarding design issue you are facing, we can only inform after you put all code that you did
As you added code for style of headr
then it looks like borderBottomLeftRadius
pending to curv from bottom left side same as right one to match expect result
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.