I'm just using the out of the box "GeolocateControl" component from react-map-gl and it works perfectly on my pc. However on my phone when I press of the geolocate button nothing happens? My browser in mobile has permission to access location but no pop-up shows like on pc asking for permission to show location. I've tried using Chrome, Firefox and the default browser.
I've tried using Chrome, Firefox and the default browser. On my iPad it doesn't work either, only on my pc it's functioning properly.
<ReactMapGL
{...viewport}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
onViewportChange={viewport => {
setViewport(viewport);
}}
>
<GeolocateControl
className={classes.geolocateStyle}
positionOptions={{ enableHighAccuracy: true }}
trackUserLocation={true}
/>
</ReactMapGL>
Expecting it to bring me to the current location and put a blue marker on screen as it does on pc.
Related
I got all ticks from the lighthouse. I'm running the app locally. Opened IP in chrome android, and clicked on add to the home screen. It said the app was added to the home screen. But I can't find it anywhere.
Note: On Mac, it is added to the home screen and I can see it in apps.
I have a react native expo project. In this project I have a image component. I have also a another server which is running on localhost:3000 (php server).
<Image source={{uri: "https://media.istockphoto.com/photos/straight-down-above-tall-towers-rising-over-austin-texas-picture-id1320415956?s=612x612"}} style={{width:100,height:100}} />
Everything works fine, but when I changed to url to load image from "localhost:3000". Image is not showing.
<Image source={{uri: "http://localhost:3000/uploads/avatar/user-1.jpg"}} style={{width:100,height:100}} />
But both image url is right and works in a browser.
The localhost changes depending on where you're running the app.
To get the image, your app needs to target the address of the device the server is running on, and not the address of the device the app is running on.
If the device your app is running on is on the same wifi as the server, try targetting through your IP address:
<Image source={{uri: "http://192.168.1.123:3000/uploads/avatar/user-1.jpg"}} {...rest} />
Check this article to find your IPv4
I am using NextJs for my website. Here is the code I'm using for showing Images
<Image
src={`/p1.png`}
layout={"fill"}
objectFit="contain"
objectPosition="center"
alt={"publication image"}
/>
This image is visible on all browsers except Safari. How can I make it visible on Safari as well? Thanks in advance
I got the issue fixed. The image container did not have position set as relative
The below is code of React
<QrReader
delay={300}
onError={this.handleError}
onScan={this.handleScan}
style={{ width: '100%' }}
/>
The link works fine on all Browsers in Android device, also works fine on Safari browser of iPhone devices, but it does not even ask camera permission for other Browsers like Chrome and Firefox on iPhone Devices.
The docs say Known Issues. On IOS 11 it is only supported on Safari and not on Chrome or Firefox due to Apple making the API not available to 3rd party browsers. See https://www.npmjs.com/package/react-qr-reader
I've checked several similar topics in Stackoverflow but I didn't find my answer.
I have this component which is meant to show profile images in my app. I am serving images in my node server and it works just fine in the browser. It means when I open the link with the browser image is shown in my browser. it also works fine with my react web app.
in the react native app it is not shown, though.
I tested some other links from different sources and it works fine.
But the image links from my API end does not work in the react native.
<Image source={{
uri: 'https://mentalwill.xyz/API/ProfileImages/21190169ANDREW-NG.jpg' ,
}} style={styles.profileImage} />
and the style:
profileImage:{
width: 200,
height:200,
borderRadius:100,
marginTop:50
}