Here is an example of Image in RN document:
import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';
export default class DisplayAnImage extends Component {
render() {
return (
<View>
<Image
source={require('/react-native/img/favicon.png')}
/>
</View>
);
}
}
For local image file, it uses source = {require('path-to-image-file')}. My render code is as below:
<View>
<Image
style={{width:150, height:100,borderRadius:13,margin:3, resizeMode:'cover'}}
source={require("./image1.jpg")} //<<tested working for image file resides in the same subdir of component
/>
</View>
I am trying to convert the format to uri: "" for source. here is a list of strings tried and not work for a local file image1.jpg which resides in the same subdir of the component:
source={{uri: "./image1.jpg"}}
source={{uri: "/image1.jpg"}}
source={{uri: "image1.jpg"}}
source={{uri: "file:///image1.jpg"}}
source={{uri: "file: //image1.jpg"}}
source={{uri: "file:/image1.jpg"}}
source={{uri: "file: image1.jpg"}} //<<== syntax error
What is the right format for uri source?
Related
I am a beginner in React Native. I started learning it today. I was trying to display an image on the screen but I am having some problems here.
my Code
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={{ uri: 'https://i.imgur.com/G1iFNKI.jpg' }} />
</View>
);
}
when I go to this URL in the browser it shows the image, but no success in the device.
The same image when I download and use it locally, then it works
import React from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
export default function App() {
return (
<View>
<Image source={require('./assets/myViewScene.jpg')} />
</View>
);
}
Any help is appreciated.
You will have to provide Dimensions to the remote images in order to show them. As mentioned in the docs here, Unlike with static resources, you will need to manually specify the dimensions of your image for remote images.
For Example -
<Image source={{ uri: Some_Remote_Image_URI }} />
// This will not load and the image would not be shown.
<Image source={{ uri: Some_Remote_Image_URI }} style={{ width: 100, height: 100 }} />
// This will load perfectly and the image will be shown.
<Image source={require("./path_to_local_image")} />
// This will load perfectly and the image will be shown even if you don't provide the Dimensions.
Working Example Here
For people coming from Google: if your image is an SVG, check SvgUri component from react-native-svg:
<SvgUri
width="50"
height="50"
uri="https://images.com/your.svg"
/>
// How do you set the image on the top of the screen without losing the aspect ration?
[![import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';
export default class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={{flex:1}}>
<Image
resizeMode="contain"
style={{flex:1}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
</View>
);
}
}
// Skip these lines if you are using Create React Native App.
AppRegistry.registerComponent(
'DisplayAnImageWithStyle',
() => DisplayAnImageWithStyle
);][1]][1]
// Here the liked image shows that it is not fitting well... it is not showing from the top... do you have any idea how I can set the image without any padding?
[1]: https://i.stack.imgur.com/LYNKn.png
So you might wanna use resizeMode: 'cover' with a height and width.
<Image
resizeMode="contain"
style={{ width: 200, height:220, resizeMode: 'cover'}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
Here's an example https://snack.expo.io/HJTFg9tU4
Let me know if this works for you.
I am trying to load a remote placeholder image. The first image is a local image and loads properly, but not the second image. I am testing this on an android device so I don't think https would cause problems.
Any hints to what I might be doing wrong?
import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableOpacity, Image, ToastAndroid, Animated } from 'react-native';
import styles from "./styles";
class Story extends Component {
constructor(props){
super(props);
this.state={};
}
render() {
return (
<View style={{position:'relative'}}>
<Image source={require('app/assets/images/campus.png')} style={styles.container}></Image>
<Image source={{ uri: 'https://place-hold.it/100x200/fdd.png' }} style={styles.character1}></Image>
</View>
);
}
}
export default Story;
// firstly set isImageload false
then implement image like this
var image= this.state.isImageload ? require('place holder image') : {uri: ImageUrl};
return(
<Image
source={immage}
onLoadStart={() => this.setState({isImageload : true})}
onLoad={() => this.setState({isImageload : false})}
/>
)
I removed one pair bracket from the Image tag and the code become:
<Image source={ uri: 'https://place-hold.it/100x200/fdd.png' } style={styles.character1}></Image>
Please try it to see whether if works.
I've been trying to render a background image, and it runs, but nothing appears. I'm running this through Android on Windows. This is the code below:
import React, { Component } from 'react';
import { View, Image, Text, ImageBackground } from 'react-native';
class Background extends Component {
render() {
return (
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}
>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
);
}
}
export default Background;
I'm not sure if the code just isn't properly pulling the image itself or if the styling needs to be adjusted. Thanks for the help!
Your ImageBackground component needs a height value in your style attribute. RN is picky about that.
import { ImageBackground } from 'react-native'
<ImageBackground
source={require('../assets/background.jpg')}
resizeMode={'cover'}
style={{ flex: 1, width: '100%' }}></ImageBackground>
Wrap your ImageBackground component within a Container component.
class Background extends Component {
render() {
return (
<Container>
<ImageBackground
source={{uri: 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg'}}
style={{flex: 1, width: '100%'}}>
<View >
<Text>Test</Text>
</View>
</ImageBackground>
</Container>
);
}
}
for me only shows when i use
require()
like this post
ImageBackground not working when i call source from state
source={require( 'https://thumbs.dreamstime.com/b/purple-blue-textured-background-wallpaper-app-background-layout-dark-gradient-colors-vintage-distressed-elegant-78118630.jpg')}
(i tried to import image and call inside source but don't appears, even declaring in style height and width, only after use require(), why? i don't know)
Here is my two following components. MovieItem is used in MovieList. And the app throws the exception.
My question is in a complex application, there are so many components were defined, are there any fast way to indentify which components that View & Text belong to when we look into error message? Many thanks.
Exception
ExceptionsManager.js:63 Nesting of <View> within <Text> is not supported on Android.
handleException # ExceptionsManager.js:63
handleError # InitializeCore.js:114
reportFatalError # error-guard.js:44
guard # MessageQueue.js:48
callFunctionReturnFlushedQueue # MessageQueue.js:107
(anonymous) # debuggerWorker.js:71
movie-list.js
import React, { Component } from 'react';
import MovieItem from './movie-item';
import {
Text
} from 'react-native';
class MovieList extends Component {
render() {
return (
<Text>
This is movie list
<MovieItem />
</Text>
);
}
}
export default MovieList;
movie-item.js
import React, { Component } from 'react';
import {
View, Text
} from 'react-native';
import Image from 'react-native-image-progress';
import Progress from 'react-native-progress';
class MovieItem extends Component {
render() {
return (
<View>
<Image
indicator={Progress}
source={{uri: "http://lorempixel.com/400/200/"}}
/>
</View>
);
}
}
export default MovieItem;
As exception message states you need to move MovieItem from Text body. You can move it to new View which will contain both Text and MovieItem elements, like this:
<View>
<Text>
This is movie list
</Text>
<MovieItem/>
</View>
like this：
<Text
allowFontScaling={false}
ref="titleText" numberOfLines={2}
style={styles.titleTextStyle}>
{item.contentType ? <Image
source={item.contentType === '0' ?
require('../../../../foundation/Img/searchpage/Icon_globalbuy_tag_.png') :
item.contentType === '1' ? require('../../../../foundation/Img/searchpage/Icon_anchorrecommend_tag_.png') : item.contentType === '3' ? require('../../../../foundation/Img/searchpage/Icon_groupbuy_tag2_.png') require('../../../../foundation/Img/searchpage/tag_shangcheng.png') }
style={styles.iconStyle}/> : null}
{item.title}</Text>
Maybe you can change the layout:
<View>
<Text />
<OtherWidget/>
...
</View>