The Style has its 2 unique radius property which is used to make only both top sides corners rounded. This type of functionality we have seen in many applications and one of the most popular social chatting platform Hike in India uses this. So in this tutorial we would going to create a react native app and set Border radius for only top left right rounded corners Image View React Native.
Note: Both borderTopLeftRadius and borderTopRightRadius properties is yet not supported(Working) by Image component in iOS devices but by wrapping the Image inside View we can do this easily.
Style property:
borderTopLeftRadius : This is used to make only Top Left Side corners rounded in Image and View or any other component style.
borderTopRightRadius : This is used to make only Top Right Side corners rounded on Image, View and all components.
Contents in this project Border radius for only Top Left Right Rounded Corners Image View in React Native:
1. Import Platform, StyleSheet, View and Image component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Image } from ‘react-native’;
|
2. Create a Root View in render’s return block. Now we would make another child View inside the main view. Now we would wrap the Image component inside View, We would calling a sample gradient image created by myself from our server.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
render()
{
return(
<View style = { styles.MainContainer }>
<View style={styles.imageViewStyle}>
<Image source={{uri : ‘/wp-content/uploads/2018/01/2_img.png’}}
style={{width: 200, height: 150}} />
</View>
</View>
);
}
|
3. Create Style for View and Image component. Now we would call the both borderTopLeftRadius, and borderTopRightRadius on child View style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
imageViewStyle:{
width: 200,
height: 150,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
overflow: “hidden”
}
});
|
4. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
import React, { Component } from ‘react’;
import { Platform, StyleSheet, View, Image } from ‘react-native’;
export default class Myapp extends Component<{}>
{
render()
{
return(
<View style = { styles.MainContainer }>
<View style={styles.imageViewStyle}>
<Image source={{uri : ‘/wp-content/uploads/2018/01/2_img.png’}}
style={{width: 200, height: 150}} />
</View>
</View>
);
}
}
const styles = StyleSheet.create(
{
MainContainer:
{
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
paddingTop: ( Platform.OS === ‘ios’ ) ? 20 : 0
},
imageViewStyle:{
width: 200,
height: 150,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
overflow: “hidden”
}
});
|
Screenshots in Android device:
Screenshot in iOS device:
Also Read :
React Native Show Tab Navigator Inside Drawer Navigator Example Tutorial
React Native Create JSON Parsing GridView iOS Android Tutorial
React Native JSON Parsing ListView From MySQL Database Android iOS
React Native Create Custom Alert Dialog Box in Android iOS App Tutorial
React Native QR Code Scanner App using Camera Android iOS Example
