React Native Add Set Border To Image in Android iOS

Hello friends, In our previous tutorial we had learnt about Border style applying on View. Today we would learn about applying border style on Image component in react native. To set border on Image we would use borderWidth and borderColor style prop. I am showing image from HTTP URL. So in this tutorial we would learn about React Native Add Set Border To Image in Android iOS.

Contents in this project React Native Add Set Border To Image in Android iOS :-

1. Open your project’s main App.js file and import View, StyleSheet, Text and Image component.

import React from 'react';

import { View, StyleSheet, Text, Image } from 'react-native';

import React from 'react';

import { View, StyleSheet, Text, Image } from 'react-native';

2. Creating our main export default App component.

export default function App() {



}

export default function App() {

}

3. Now we would make 1 Image component in return() block with borderWidth and borderColor style prop.

<Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }}
        style={{
          height: 250,
          width: 350,
          resizeMode: 'contain',
          margin: 10,
          borderWidth: 5,
          borderColor: '#D50000'
        }} />

<Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }}

style={{

height: 250,

width: 350,

resizeMode: 'contain',

margin: 10,

borderWidth: 5,

borderColor: '#D50000'

}} />

4. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center'
  },

  text: {
    fontSize: 28,
    color: 'black',
    textAlign: 'center',
  },

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

paddingTop: 20,

alignItems: 'center'

text: {

fontSize: 28,

color: 'black',

textAlign: 'center',

});

5. Complete Source Code for App.js File :-

import React from 'react';

import { View, StyleSheet, Text, Image } from 'react-native';

export default function App() {

  return (
    <View style={styleSheet.MainContainer}>

      <Text style={styleSheet.text}> Add Border To Image in React Native </Text>

      <Image source={{ uri: 'https://reactnative-examples.com/wp-content/uploads/2021/10/cosmos.jpg' }}
        style={{
          height: 250,
          width: 350,
          resizeMode: 'contain',
          margin: 10,
          borderWidth: 5,
          borderColor: '#D50000'
        }} />

    </View>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    paddingTop: 20,
    alignItems: 'center'
  },

  text: {
    fontSize: 28,
    color: 'black',
    textAlign: 'center',
  },

});