JAVASCRIPT

image source react native

//Local import (relative path)
<Image source={require("./assets/snack-icon.png")} />
//External import (web path) you should specify the width and height
<Image source={{uri:"https://picsum.photos/200", width:200,height:200 }}/>

ways to show image in react native

<Image
  source={require("relative_path_to_image")}
  style={{ width: 100, height: 100 }}
/>

Including Image In React-Native

import React from "react";
import { StyleSheet, View, Image} from "react-native";
 
const Test = () => {
  return (
    <View> 
 <Image source={require('./images/orangutan.jpg')} style={{width: 300, height: 300}} />

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
   height: 200, width: 200
  },
});

export default Test;

add image in react native

<Image
  source={{ uri: 'app_icon' }}
  style={{ width: 40, height: 40 }}
/>

React Native Images

      <Image style={{height: 200, width: 200}}
      
      source={require('./images/orangutan.jpg')}
      />

image react native

		<Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
     	/>

photo in React native

// useing require is more secure
<Image 
	source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} 
/>

react native image

<Image //change imagePath with the real path of your image, for example ./src/image/image.jpg
	source={require("imagePath")} 
/>

Add Image For React Native

const staticImage = require("./assets/favicon.png");
export default function App() {
  return (
       <Image
         style={styles.tinyLogo}
      source={staticImage}
       />
  );
}

react-native-image-viewing

yarn add react-native-image-viewing