I am currently working to display by using React-Native-Maps; these are my steps:
1 by using QGIS, I have generated a folder with XYZ files
enter image description here
2 I have uploaded the XYZ files to android emulator under Download:
enter image description here
3 in my React-Native code, I use component and gave the path:
<MapView
style={styles.map}
mapType={Platform.OS == 'android' ? 'none' : 'standard'}
>
<LocalTile
// The path template of the locally stored tiles. The patterns {x} {y} {z} will be replaced at runtime
// For example, /storage/emulated/0/mytiles/{z}/{x}/{y}.png
pathTemplate={`${RNFS.DownloadDirectoryPath}/123/{z}/{x}/{y}.png`}
// The size of provided local tiles (usually 256 or 512).
tileSize={512}
/>
// I also tried the UrlTile
<UrlTile
urlTemplate={
`file://${RNFS.DownloadDirectoryPath}/123/{z}/{x}/{y}.png`
}
zIndex={10}
/>
</MapView>
</View>
I have console.log the pathTemplate, it did direct to "/storage/emulated/0/Download/123/{z}/{x}/{y}.png"
but the page shows nothing
enter image description here
can someone help me with this? I am not sure if this is a XYZ file problem or path issue
Thank you
the map will display the XYZ tiles
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 want modify the contrast, sharpness, etc. of images. I am testing that with react-native-color-matrix-image-filters which seems to work fine. But I am not sure how to save the resulting images to the camera roll or how to get the base64 result. The following code will convert the original image to a greyscale image. How can I save the result?
import {
Grayscale,
Sepia,
Tint,
ColorMatrix,
concatColorMatrices,
invert,
contrast,
saturate
} from 'react-native-color-matrix-image-filters'
<View>
<Grayscale>
<Image style={styles.imgstyle}
source={{
uri: sourceImage,
}}
/>
</Grayscale>
</View>
These module doesn't support save images (see here), you can use a combination of this module or react-native-image-filter-kit (for filters) and https://github.com/gre/react-native-view-shot to be able to download the image from your app
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 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.
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;