I want to display a loader image till my image is loaded to the react-native Image. Back is an image which is stored locally and it has been imported to the screen.
This code gives me a blank screen for 'Back' image. When I set the source as source={Back} it works. But the following doesn't work. What am I doing wrong here?
<View style={styles.imageWrapper}>
<NonClickableImage
source={this.state.loaded ? Back : {uri: detailedMovement.image}}
resizeMode="stretch"
width={width - 20}
height={200}
onLoad={() => this._onMovementImageLoaded()}
/>
</View>
I think your logic needs to be:
{!this.state.loaded ? Back : {uri: detailedMovement.image}}
Because you want to show the Back icon when the state is NOT loaded. Currently, if the state is loaded, then you display Back.
Related
I am making a react-native app to open the camera and scan barcodes/Qr codes, I'm using react-native-camera-kit and my project works fine, however, when I open the camera I get a warning log saying: ReactImageView: Image source "null" doesn't exist, I don't know why this occurs, some suggest?
this is my code:
<CameraScreen
showFrame={true}
// Show/hide scan frame
scanBarcode={true}
// Can restrict for the QR Code only
laserColor={'red'}
// Color can be of your choice
frameColor={'red'}
// If frame is visible then frame color
colorForScannerFrame={'black'}
// Scanner Frame color
onReadCode={(event) =>
onBarcodeScan(event.nativeEvent.codeStringValue)
}
/>
You should share the hole component code to figure out the issue but the comment problem that cause this when you use something like:
<Image source={{uri: **this.state.ImageURI**}} />
and the ImageURI from the state is not there yet.
use a condition to fix it like:
{ this.state.ImageURI !== '' ? <Image source={this.state.ImageURI} /> :null
}
I am using react-native-photo-view-ex library to zoom in and out the images. After zooming the image I am getting scale size from onScale callback function.After than I saved this picture and when I want to open saved image again for re-edit with same scale size as I saved the image displayed very small.I adjust minZoom = 0.5 and maxZoom = 10.
This code works perfectly in android and when open images for re-edit in android image displayed on accurate position with given scale. Also I have implemented this feature with gesture handler and ScrollView Zoomable but get same results. Can anyone help me?
<PhotoView
source={{uri: selectedData.url}}
scale={imageScale}
minimumZoomScale={0.5}
maximumZoomScale={10}
onScale={e => {
setImage(e.nativeEvent.scale);
}}
onLoad={() => setImageScale(selectedData.scale, false)}
style={
styles.resizeImageWrapper
}
/>
I would like to retrieve an image from an url, and insert it inside a View adapting the size to the container.
This is an expo where I tried to do it.
https://snack.expo.io/Hk1rsfaHU
How you can see there are 3 columns having the same width(flex 1), in the first there is the image.
I wish this Image was contained inside the View, adapting the width to the container and maintaining the correct aspect ratio.
Any suggestions?
You need to change src to source in your <Image />:
<Image source={{uri: 'https://i2.wp.com/www.xpeppers.com/wp-content/uploads/2016/06/react-native-preview.png?resize=580%2C357'}}
resizeMode='contain' style={styles.image}
/>
Output:
Working Demo:
https://snack.expo.io/SJdlzQTr8
Background Transparency with BLUR
Is it possible to blur view without using background Image? I want to show the parent content on top of the background blur view in modal.
Similar kind of this:
Tried with react-native-blur :
Its actually blurring the background image. I want to blur and show the content which is behind the modal.
Tried along with react-native-overlay : But no change.
well if you are
using expo
then you should go and check out this link here
else if you are like me
who loves to use 'react-native init' and want some blurry effect based views then i have this for you!
https://github.com/voronianski/react-native-effects-view
an awesome library
it would be very simple to use it like
"if the dialogbox is open then render The blur view else render simple",
here is a simple example for basic how to use!
...imports
var EffectsView = require('react-native-effects-view');
var App = React.createClass({
renderVibrant() {
return (
<View>
<Text style={styles.text}>Do you feel blurry??</Text>
</View>
);
},
render() {
return (
<EffectsView
style={styles.view}
blurStyle="dark"
vibrantContent={this.renderVibrant()}
>
<Image style={styles.bg} source={require('image!bg')} />
</EffectsView>
);
}
});
I'm new to React Native. Could someone point me in the right direction here? I'm trying to accomplish the following: given some image, I want to slice it up so that each slice can be touched individually, and the slice is saved as an image.
Original image
Slices
That is one image. Each square is a <View> with <Image source={IMAGE} style={{ resizeMode:'stretch' width:origImageWidth, height:origImageHeight, top:CALC_ME, left:CALC_ME }}/> but each image is offset to make a part of it show.