Learning Upload Images in React Native (Android & Ios)

React Native provides a unified way of managing images and other media assets in your Android and iOS apps.

React Native provides a unified way of managing images and other media assets in your Android and iOS apps.

{/* Menggunakan Url */}
<Image source={{uri:"https://cdn.setneg.go.id/_multimedia/photo/20220218/5008WhatsApp_Image_2022-02-18_at_1.36.50_PM.jpeg"}} style={{ width:200, height:200, borderRadius:30, borderColor:'red', borderWidth:10}}/>

{/* Menggunakan Assets */}
<Image source={require("./assets/jokowi.jpeg")} style={{ width:200, height:200, borderRadius:10, borderColor:'red', borderWidth:10}}/>

{/* Rezize Mode */}

    {/* Menggunakan Assets 
    1. center
    2. repeat
    3. cover
    4. content
    5. streatsh
    */}
    <Image 
    source={require("./assets/jokowi.jpeg")} 
    style={{ margin:100, width:200, height:200, borderRadius:10, borderColor:'red', borderWidth:10, backgroundColor: 'green', resizeMode:'cover'}}/>

The resizeMode prop determines how React should resize and position an image within its container. There are several available values for resizeMode, each of which will affect the image differently.

• cover: This value will scale the image uniformly so that both dimensions are equal to or greater than its containing element. The image is then centered within the container. Using this value can result in the image cropped to maintain the aspect ratio.
• contain: This will attempt to fit and center the image perfectly within the dimensions of the container. However, this may result in empty space around the edges of the image.
• stretch: The stretch value stretches the image to fill the entire container, regardless of aspect ratio. Sometimes causing the image to distort.
• repeat: This value repeats the image both horizontally and vertically to fill the entire container.
• center: This will center the image within the container element without scaling it.

Read more..doc react native..

Images · React Native

Andi Hermanto (HermantoXYZ)