Menu
I want to create a rounded image with a border. If I add borderColor: 'green', borderWidth:1, border is visible only in top left part of the rounded image.
<TouchableHighlight style={[styles.profileImgContainer, { borderColor: 'green', borderWidth:1 }]} > <Image source={{ uri:"https://www.t-nation.com/system/publishing/articles/10005529/original/6-Reasons-You-Should-Never-Open-a-Gym.png" }} style={styles.profileImg} /> </TouchableHighlight> export default styles = StyleSheet.create({ profileImgContainer: { marginLeft: 8, height: 80, width: 80, borderRadius: 40, }, profileImg: { height: 80, width: 80, borderRadius: 40, }, }); 
876
Use the borderRadius CSS property to set the border radius style of an element in React, e.g. <div style={{border: '1px solid red', borderRadius: '30px'}}> . If you need to style a specific border, use the corresponding property, e.g. borderBottomLeftRadius .
To create CSS circles in React Native, we can set the borderRadius style to '50%' . to set the width and height of the View . Then we set borderRadius to '50%' to make it a circle. We set the backgroundColor to add a background color to the circle.
In this tutorial we would going to add border near to image view with the use of styles. So let’s get started. Start a fresh React Native project. If you don’t know how then read my this tutorial. Add Image, StyleSheet and View component in import block. Create folder for image inside your project’s folder and put your image in it.
Inside StyleSheet create two styles Container for complete View and BorderClass for Image. Call css class into both View and Image tag. Complete Source Code. 1. Start a fresh React Native project. If you don’t know how then read my this tutorial. 2. Add Image, StyleSheet and View component in import block. 3.
Inside StyleSheet create two styles Container for complete View and BorderClass for Image. Inside the BorderClass, borderRadius attribute is used to set the border corners and make them curved. // Set content's vertical alignment.
We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run Run the following commands to create a new React Native project
overflow: 'hidden' for images container solves this issue.
77
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
