Develop Reference

React native maps showsMyLocationButton position

I am using Expo react-native-app. I have some local data which I want show in maps. For maps I have used React-native-maps. I successfully pull the data and display in maps by using Marker. For user location I have used expo-location and expo-permission. That works fine. I have used React-native-maps one props called showsMyLocationButton, by default props boolean false. when I made it true I can able to see in IOS Emulator and i think by default position bottom-right. Android emulator I don't see the button at all. This is ios image and this android image. I want to display some data under the maps like a Bottom-Sheet, for that I have used this package. As a result it hide the ios' showsMyLocationButton.
I want to display the user current location Button like Uber. I tried lots of way to do that but could not able to achieve the goal. I want change the button icon as well but also failed. Really appreciate if someone Help me out.
I shared my code in Snack Ps. it only works in ios and Android, does not work in web View.
This is my code
import React, { useState, useEffect, useCallback } from 'react';
import {
Dimensions, StatusBar, StyleSheet, Text,
TextInput, TouchableOpacity, View, Button
} from 'react-native';
import Constants from 'expo-constants';
import Mapview, { Marker, Callout, PROVIDER_GOOGLE } from 'react-native-maps'
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import datas from './datas.json'
// You can import from local files
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';
// or any pure javascript modules available in npm
export default function App() {
const sheetRef = React.useRef(null);
const renderContent = () => (
<View
style={{
backgroundColor: 'white',
padding: 16,
height: 450,
}}
>
<Text>Swipe down to close</Text>
<Button
title="Open Bottom Sheet"
onPress={() => sheetRef.current.snapTo(0)}
/>
</View>
);
const [state, setstate] = useState({
"latitude": 60.1098678,
"longitude": 24.7385084,
"latitudeDelta": 1,
"longitudeDelta": 1
});
useEffect(() => {
_onMapReady();
}, [_onMapReady]);
const _onMapReady = useCallback(async () => {
const { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== `granted`) {
// console.log(`Permisson Denied`);
}
const location = await Location.getCurrentPositionAsync({ "accuracy": Location.Accuracy.High });
setstate({
...state,
"latitude": location.coords.latitude,
"longitude": location.coords.longitude
});
}, [state]);
return (
<View style={styles.container}>
<Mapview
provider={PROVIDER_GOOGLE}
initialRegion={state}
showsIndoors={true}
showsMyLocationButton={true}
zoomControlEnabled={true}
zoomEnabled={true}
zoomTapEnabled={true}
showsScale={true}
showsBuildings={true}
showsUserLocation={true}
showsCompass={true}
onMapReady={_onMapReady}
style={styles.mapStyle}>
{
datas.data?.map((i) => {
return (
<Marker
coordinate={{
"latitude": i.location.lat,
"longitude": i.location.lng
}}
animation={true}
key={i.id}
>
<Callout
style={{ "width": 100, "height": 50 }}>
<View>
<Text>{i.Property}</Text>
</View>
</Callout>
</Marker>
);
})
}
</Mapview>
<BottomSheet
ref={sheetRef}
snapPoints={[450, 300, 0]}
borderRadius={10}
renderContent={renderContent}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
"flex": 1,
"alignItems": `center`,
"justifyContent": `center`
// position: 'absolute',
},
mapStyle: {
"height": Dimensions.get(`window`).height,
"width": Dimensions.get(`window`).width
},
});

Alert.alert not working in React native iOS, but perfectly fine in Android

Please check the code ,
import {
Alert,
} from 'react-native';
checkForSendingOtp = () => {
let hash = 'aBcDeGgd';
Platform.OS === 'android'
? RNOtpVerify.getHash()
.then(text => {
hash = text + ''.replace('[', '');
hash = hash + ''.replace(']', '');
})
.then(() => {
this.sendDataForOtp(hash);
})
.catch(console.log)
: this.sendDataForOtp(hash);
};
sendDataForOtp(hash) {
axios.post(url,{hash:hash}).then(response=>{
Alert.alert(
'Login Failed',
'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
[
{
text: 'Proceed ?',
onPress: () => {}
},
{
text: 'No',
onPress: () => {},
},
],
{cancelable: false},
);
});
}
render() {
return (
<Ripple
style={{
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}}
onPress={this.checkForSendingOtp}
/>
)}
This snippet will work fine in android but not showing in iOS. why ?
Nb :- this is the most of the code that I can share right now , Edited the code please check it now and let me know if you have any questions.

I don't exactly know what happened, There were also a model component which I used for showing custom loading, after removing the model component the alerts starts working.

Replace alert code with below
Alert.alert(
'Login Failed',
'Multiple Logins Are Found. \n Logout From All Other Devices to Continue.',
[
{
text: 'Proceed ?',
onPress: () => {}
},
{
text: 'No',
onPress: () => {},
style: 'cancel'
}
],
{ cancelable: false }
);

It's probably related to this issue: https://github.com/facebook/react-native/issues/10471
For some weird reasons, having the Alert called in a "setTimeout" function make it work. But it’s clearly NOT the best way to avoid this problem. You can also try this solution: https://github.com/facebook/react-native/issues/10471#issuecomment-513641325
setTimeout(() => {
Alert.alert(
"title",
"content",
[
{
text: "ok",
onPress: () => {
},
},
],
)
}, 10)

setTimeout(() => {
//TODO use return and setTimeout
return Alert.alert(
i18n.t('notAtYard.alertTitle'),
'Invalid username or password',
[
{
text: 'Ok',
onPress: () => {
setUserPassword('');
setUsername('');
},
}
],
{cancelable: false},
);
}, 100);

So in my case, I was not using any custom Modal because for custom Modal the solution is simple to wait until the Modal is closed but, I was using the react-native Spinner component, and I was hiding it properly using the visible={loading} prop and yes, the issue was also not resolved after setting cancelable: false in the Alert.alert config and when I increased the timeout to 5000 it worked even without defining cancelable: false in the Alert.alert config but this a lot of timeout was not good for UX so I quickly checked out the Spinner component props and I came to know that it does have cancelable?: boolean | undefined prop so now when I used Spinner component like below it worked even without timeout.
<Spinner
visible={loading}
cancelable={true}
/>
TLDR: use cancelable={true} prop with Spinner component.

React-navigation tabs in mid of the screen

I am using react-navigation in my react-native project and i want tab navigator in mid of my screen default it gives top or bottom position.
const Routes = {
RECENT: { screen : Upcomings},
UPNEXT : { screen : Upcomings},
UPCOMING :{ screen : Upcomings},
};
const TabConfig = {
stateName: 'MainNavigation',
tabBarOptions: {
activeTintColor: '#e91e63',
labelStyle: {
fontSize: 12,
},style: {
backgroundColor: '#ffffff',
borderTopWidth: 1,
borderTopColor: 'gray',
}
},
};
// register all screens of the app (including internal ones)
export const screenRoute = (SignIn) => {
return StackNavigator({
LOG_IN:{screen:Login},
SIGN_UP:{screen:SignUp},
CHARITY:{screen:Charity},
FETCH_FRIEND:{screen:FetchFriend},
DASHBOARD:{screen: Dashboard},
PAYPAL:{screen: Paypal},
FPASSWORD:{screen: ForgetPassword},
ADDFRIEND:{screen: AddFriend},
UPCOMINGS : {screen :TabNavigator(Routes, TabConfig)},
},{
headerMode: 'none',
mode:'modal',
initialRouteName: SignIn ? 'UPCOMINGS':'LOG_IN'
});
};
Could this been done by any way Thanks in advance.

React-Native alternative to AlertIOS.prompt for android?

I am following a tutorial for react-native, however they are doing it for IOS, there is one part where they use AlertIOS.prompt like this
AlertIOS.prompt(
'Add New Item',
null,
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{
text: 'Add',
onPress: (text) => {
this.itemsRef.push({ title: text })
}
},
],
'plain-text'
);
I am trying to remake this for android but cannot get it working, I did find this https://www.npmjs.com/package/react-native-prompt
import Prompt from 'react-native-prompt';
<Prompt
title="Say something"
placeholder="Start typing"
defaultValue="Hello"
visible={ this.state.promptVisible }
onCancel={ () => this.setState({
promptVisible: false,
message: "You cancelled"
}) }
onSubmit={ (value) => this.setState({
promptVisible: false,
message: `You said "${value}"`
}) }/>
However I cannot get this to work either, It is supposed to display the prompt when I press a button but nothing happens..
Here is the full original code with AlertIOS
'use strict';
import React, {Component} from 'react';
import ReactNative from 'react-native';
const firebase = require('firebase');
const StatusBar = require('./components/StatusBar');
const ActionButton = require('./components/ActionButton');
const ListItem = require('./components/ListItem');
const styles = require('./styles.js')
const {
AppRegistry,
ListView,
StyleSheet,
Text,
View,
TouchableHighlight,
AlertIOS,
} = ReactNative;
// Initialize Firebase
const firebaseConfig = {
apiKey: "AIzaSyA9y6Kv10CAl-QOnSkMehOyCUejwvKZ91E",
authDomain: "dontforget.firebaseapp.com",
databaseURL: "https://dontforget-bd066.firebaseio.com",
storageBucket: "dontforget-bd066.appspot.com",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
class dontforget extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
})
};
this.itemsRef = this.getRef().child('items');
}
getRef() {
return firebaseApp.database().ref();
}
listenForItems(itemsRef) {
itemsRef.on('value', (snap) => {
// get children as an array
var items = [];
snap.forEach((child) => {
items.push({
title: child.val().title,
_key: child.key
});
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(items)
});
});
}
componentDidMount() {
this.listenForItems(this.itemsRef);
}
render() {
return (
<View style={styles.container}>
<StatusBar title="Grocery List" />
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}
enableEmptySections={true}
style={styles.listview}/>
<ActionButton onPress={this._addItem.bind(this)} title="Add" />
</View>
)
}
_addItem() {
AlertIOS.prompt(
'Add New Item',
null,
[
{text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{
text: 'Add',
onPress: (text) => {
this.itemsRef.push({ title: text })
}
},
],
'plain-text'
);
}
_renderItem(item) {
const onPress = () => {
AlertIOS.alert(
'Complete',
null,
[
{text: 'Complete', onPress: (text) => this.itemsRef.child(item._key).remove()},
{text: 'Cancel', onPress: (text) => console.log('Cancelled')}
]
);
};
return (
<ListItem item={item} onPress={onPress} />
);
}
}
AppRegistry.registerComponent('dontforget', () => dontforget);
Could anyone tell me how I could make this work for android?

I think you can use the following libraries : https://github.com/mmazzarolo/react-native-dialog
Example code to get user input are as follows (not in docs)
<Dialog.Container visible={true}>
<Dialog.Title>Account delete</Dialog.Title>
<Dialog.Description>
Do you want to delete this account? You cannot undo this action.
</Dialog.Description>
<Dialog.Input label="Cancel" onChangeText={(text) => this.setState({username : text})} />
<Dialog.Button label="Delete" onPress={() => {
console.log(this.state.username);
this.setState({promptUser : false});
}} />
</Dialog.Container>

These looks like a good alternative since its natively implemented
https://github.com/shimohq/react-native-prompt-android

Actually, you can use a cross-platform prompt component that works fine both on Android and Ios. The link is given below.
https://www.npmjs.com/package/react-native-prompt-crossplatform and its
repository
link is
https://github.com/Ramiah-Viknesh/react-native-prompt-crossplatform

I developed a small utility to solve this issue. It might be useful.
https://github.com/eleviven/react-native-alertbox

undefined is not an object (evaluating 'this.props.navigator.push') while QRcode reading library

I try to read QRcode with react native
then I install library
and this is my code
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
NavigatorIOS,
} = React;
var QRCodeScreen = require('./QRCodeScreen');
var cameraApp = React.createClass({
render: function() {
return (
<NavigatorIOS
style={styles.container,{ width:100,height:500}}
initialRoute={{
title: 'Index',
backButtonTitle: 'Back',
component: Index,
}}
/>
);
}
});
var Index = React.createClass({
render: function() {
return (
<View style={styles.contentContainer}>
<TouchableOpacity onPress={this._onPressQRCode} >
<Text>Read QRCode</Text>
</TouchableOpacity>
</View>
);
},
_onPressQRCode: function() {
this.props.navigator.push({
component: QRCodeScreen,
title: 'QRCode',
passProps: {
onSucess: this._onSucess,
},
});
},
_onSucess: function(result) {
console.log(result);
},
});
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
contentContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});
AppRegistry.registerComponent('MyFirstReactapril', () => cameraApp);
but I get this Error
undefined is not an object (evaluating 'this.props.navigator.push')
and I don't know what is wrong with it , please help.
Or is there any library can read QRCode and gives me the link or string?

NavigatorIOS component works only in iOS. You need to use Navigator component which will work in both Android and iOS.