How to change Image border width in React Native Tutorial

How to Make the image border width thinner or bold with specific pixel size in react native android iOS application using borderWidth css style attribute.

Contents in this project change Image border width :-

  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. Create folder for image inside your project’s folder and put your image in it.
  4. Add View tag in render’s return block.
  5. Add Image tag in render’s return block inside View tag.
  6. Add Source attribute in Image tag and Assign image path using require.
  7. Create StyleSheet just above the AppRegistry.registerComponent line.
  8. Inside StyleSheet create two styles Container for complete View and BorderClass for Image.
  9. Call css class into both View and Image tag.
  10. 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. Create folder for image inside your project’s folder and put your image in it.

  1. Open your project folder for example my project name is Myproject -> Create a folder inside your project folder like i did in below screenshot name as images.
  2. Place your image inside images folder.

4. Add View tag in render’s return block.

5. Add Image tag in render’s return block inside View tag.

6. Add Source attribute in Image tag and Assign image path using require.

7. Create StyleSheet just above the AppRegistry.registerComponent line.

8. Inside StyleSheet create two styles Container for complete View and BorderClass for Image. Inside the BorderClass, borderWidth attribute is used to set the border width. You can put any number of width in numeric format like 1 or 2 or 3 .

9. Call css class into both View and Image tag.

 10. Complete Source Code for index.android.js file :

Screenshot :

border width

Leave a Reply

Your email address will not be published. Required fields are marked *