React Native Image Width Auto Example

Aug 25, 2022 . Admin

In this tutorial, you will learn react native image full width auto height. you will learn react native image height width auto code example. it's simple example of how to set image width to be 100% and height to be auto in react native. I’m going to show you about react native get image width and height. You just need to some step to done react native image resizemode.

In this example,We will get Image auto width in react native.you can easy get image width using Dimensions in react native.The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

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

export default function App() {

    return (
      <View style={styles.container}>
        <Image
        style={styles.img}
        source={require('./assets/images.jpeg')}
      	/>
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  
  img: {
    width : Dimensions.get('window').width,
    height: 200,
    resizeMode: 'contain'
  }
});

Step 3: Run Project

In the last step run your project using the below command.