I see This Component in official site of React Native. But nothing Example get on the https://reactnative.dev/docs/image#loadingindicatorsource. I only get what is this
Can anyone tell me how I use this Component on react native ?
<Image {...props} loadingIndicatorSource={URI} />
What does statement above mean?
{...props} - is your custom props, like source or style, for example.
URI - is URI of image, which will be shown while image, specified in source props, is loading.`
Examples:
<Image source={{uri: URI}} loadingIndicatorSource={require('loadingIndicatorSource={require('#assets/images/loading.jpeg')}')}
<Image source={{uri: URI}}
loadingIndicatorSource={{uri:
'https://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png'}} />
You can use loadingindicator like as activityindicator
<Image
style={{
width: "100%",
height: "85%",
alignSelf: "center",
}}
resizeMode="contain"
loadingIndicatorSource={require("../assets/loader2.gif")}
source={{ uri: item.thumb_url }}
/>
One of the ways I found to use it is passing a component directly, like an ActivityIndicator
<Image loadingIndicatorSource={<YOUR LOADING COMPONENT/>} />
Related
Here is my code:
<View style={{ height: this.state.height, ...props.style }}>
<WebView
ref="child"
{...this.props}
scalesPageToFit={false}
scrollEnabled={true}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
onMessage={ this.handleMessage.bind(this) }
source={{ html }}
/>
</View>
This works fine on iOS build (Scrolls horizontally) but does not work on Android.
react native WebView has been deprecated you should now use
https://github.com/react-native-community/react-native-webview
First answer is right, you should use react-native-webview now.
And, your problem may be related with your View wrapper I think.
The platform is Android. I use to embed youtube video.
<View style={{ height: 240 }}>
<WebView
style={{ alignSelf: 'stretch' }}
scalesPageToFit={true}
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
/>
</View>
I can see the zoom in button but it can't be clicked.
I try to add scalesPageToFit={true} on is still not working.
Is it possible to zoom in when using with embed youtube url ?
Any help would be appreciated.
I have search and find the props allowsFullscreenVideo={true} set it true that enables fullscreen into the WebView.
Please check the final code.
<WebView
source={{uri: `https://www.youtube.com/embed/${videoId[0]}?rel=0&autoplay=0&controls=1&showinfo=0`}}
style={{ alignSelf: 'stretch' }}
allowsFullscreenVideo={true}
scalesPageToFit={true}
/>
You can use react-native-youtube.
You have to embed your video in an iFrame with property.
allowfullscreen="allowfullscreen"
Give iFrame the above mentioned property and for your information allowfullscreen="true" is a wrong input.
I've been testing out the WebView component, but I can't seem to get it to render things.
Sample here: https://snack.expo.io/r1oje4C3-
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView source={{html: '<p>Here I am</p>'}} />
<WebView source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}
When running the above example in Expo, neither of the two WebView components seem to render. What am I doing wrong?
It seems that you need to provide a width style parameter, like so :
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{width: 300}}
/>
Note that you might have to provide a height style parameter as well. You can also add flex: 1 to the style.
add style prop with flex: 1 on WebView
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />
<WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}
I have a image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this
When I am trying to load image from props i am getting the following error
warning: failed prop type: invalid prop source supplied to image
Here is my code
src/components/common/Header.js
<View style={viewStyle}>
<Text style={textStyle}>{props.children}</Text>
<Image style={{height:25, width:25}} source={props.imageUri} />
</View>
src/index.js
<Header imageUri='../../images/logout.png'>My App</Header>
and the image is at path src/images/logout.png
please help
As the React Native Documentation says, all your images sources need to be loaded before compiling your bundle.
Adding a simple image in React Native should be like this:
<Image source={require('./path_to_your_image.png')} />
Let's say you have this:
const slides = {
car: './car.png',
phone: '../phone.png',
}
Then you pass slides as a parameter but still, you won't be able to use it like this (even though logically should work):
<Image source={require(props.car)} />
Use require() inside the sildes{}
const slides = {
car: require('./car.png'),
phone: require('../phone.png'),
}
And then use it like this:
<Image source={props.car}/>
your source is wrong.
It should use uri properties.
Either you use require:
<Image source={require('.../../images/logout.png')} />
in turn, you can then require this prop too
<Image source={require(props.imageUri)} />
Or you use the Uri as is:
<Image source={{uri: props.imageUri }} />
Refer to the documentation for more details here
Using the below method gives error in react-native:
<Image style={{height:25, width:25}} source={require(props.imageUri)} />
Instead use:
<Image style={{height:25, width:25}} source={props.imageUri}/>
And pass the below code as imageUri prop from the Parent component.
require('./public/images/image.png')
It has worked for me and hope this will help others.
you can set source of image from props like this :
in component :
<Image source={props.path} >
and pass source to component like this:
in parent :
<
.
.
path={require("../assets/images/icon.svg")}
.
.
>
For a local image path the syntax is
<Image style={{height:25, width:25}} source={require(props.imageUri)} />
<Image
source={this.props.imgUri}
style={{
height: 30,
width: 30,
resizeMode: 'contain',
}}
/>
call it
<StyledInput text="NAME" imgUri={require('../assets/userIcon.png')} ></StyledInput>
You can place Image directly in the Component, as a prop children.
<ComponentA>
<Image source={require('./src/assets/localisation-icon.svg')} />
</ComponentA>
The Component A will be composed of
function ComponentA(props) {
return (<View> {props.children} </View>);
}
This will render the image.
in your express.js server, set up a static directory containing any image.jpg:
const express = require('express')
const app = express()
app.use(express.static(path.join(__dirname, '../path_to/..', staticImages)))
react native component:
return <Image source={{ uri: `http://192.168.0.1:3345/${'image.jpg'}`}} />