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.
Related
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?
// 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 working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube
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>
I use react-native-video-player and I have difficulties with adjusting size of video player, it's too big and doesn't fit into screen and control buttons doesn't fit into available space.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
videoWidth={1280}
videoHeight={720}
/>
</View>
);
}
}
Here is what I have now, as you can see this is NOT OK.
I need some help with how to make it smaller. I tried to specify width & height as you can see, but it just doesn't change anything it stays as it is. Maybe there is something I don't know ?
Thank you in advance for any help or suggestions.
set size to your view not your videoplayer and do it by styling.
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import VideoPlayer from 'react-native-video-player';
export default class VideoPage extends Component {
render() {
return (
<View style={{width: 1280, height: 720}}>
<VideoPlayer
video={{ uri: 'file:///storage/emulated/0/Download/sample_video.mp4' }}
/>
</View>
);
}
}