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
}
Related
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 have a KeyboardAwareScrollView that I need it to scroll to the end after a certain event. My component also renders a camera view whenever I press a button. It looks something like this:
if(usingCamera){
return(
<CustomCameraComponent />
)
}
return (
<KeyboardAwareScrollView innerRef={ref => {
this.scroll = ref
}}>
...stuff
</KeyboardAwareScrollView>
usingCamera is a boolean state variable, and when I press a button it changes so that it shows the camera view on screen. Then I take a picture, and changes the state back to see the original view (the Keyboard scroll view). When I return from the camera view, I try doing this.scroll.scrollToEnd() but it seems that this.scroll is not yet loaded so it doesn't scroll down. Is there another way I can do this?
There is a Workaround you can use but its kinda dirty. I created an issue on github but until then you can go into you node_modules to the source of the dependecie. Then go to src/KeyboardAwareBase.js and modify the line 129 as following
old:
const bottomYOffset = this._keyboardAwareView.contentSize.height - this._keyboardAwareView.layout.height + this._keyboardAwareView.props.contentInset.bottom;
new:
const bottomYOffset = this._keyboardAwareView.contentSize.height - this._keyboardAwareView.layout.height;
This is how you workaround the undefinded Error.
PS: I'm using version 2.1.0 of react-native-keyboard-aware-scrollview
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.
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 did not put any undefined variables in the view but it appear some Unknow tags,so I wonder what is Unknown there?
<View>
<View style={styles.row}>
<Text>{rowData.user.name}ยท {rowData.createdDate}</Text>
<Text>{rowData.title}</Text>
</View>
<View style={styles.separator} />
</View>
in chrome I seen between the View and Text there is a Unknown.
I wonder if this is due to text nodes in your code, specifically white space like tabs and newlines. Please see this issue from the react dev tools:
https://github.com/facebook/react-devtools/issues/44
There are several such issues on the devtools tracker, sometimes related to a lack of displayName on components but I don't see how that applies here.
Suggest opening an issue on the React Native Github tracker as I doubt this is expected. Someone on the RN team might be able to give us a better explanation.
Did you define Text and View?
At the top of your file you should have something like this,
ES6
var {
View,
Text,
} = React;
ES5
var View = React.View;
var Text = React.Text;