I'm trying to get a react native app that's already working nicely on android to run on iOS. It uses react-native-maps to display a map view, and custom markers on it. When running the app in debug config, the markers look the way should, like below.
But when I run it in release config or send it to testflight, marker icons go haywire, and looks like this.
The implementation is as follows (trimmed the code down to essential parts so it may have missing variables etc...)
import MapView, { Marker } from 'react-native-maps';
const marker = require('../assets/marker.png');
const markerDark = require('../assets/marker-dark.png');
const customMapStyle = require('../assets/customMapStyle.json');
export default function DisplayMapView () => {
return (
<MapView {...mapProperties} ref={mapRef} style={mapStyle} onPress={onMapPress}>
<For each="markerData" of={markerDatas || []}>
<Marker
showsTraffic={false}
showsCompass={false}
mapType={'terrain'}
{...markerData}
>
<Text>
{markerData.label}
</Text>
<Image
resizeMethod="resize"
resizeMode="center"
style={styles.marker}
source={shouldDarkMarker(markerData) ? markerDark : marker}
/>
</Marker>
</For>
</MapView>
);
}
How can I get the custom markers working in release config?
Related
I am using Map component from react-native-maps, and I display many markers in it, but whenever click on a Marker on Android the marker clicked is centered automatically, while this behavior does not exist in IOS.
Is there a way to make markers get centered too in IOS, or at least disable it from Android.
I want to have the same behavior in both OSs.
Any help or idea would be much appreciated.
you could either set
<MapView
moveOnMarkerPress={false}
...
/>
which would disable the android-behavior, or you could handle the MarkerPress on iOS and center the MapView on it, something like this:
<MapView
...
ref={ref => {
this.map = ref;
}}
>
{this.state.markers.map(marker => (
<Marker
...
onSelect=(({coordinate}) => this.map.animateCamera({center: coordinate}, { duration: 2000 }))
/>
))}
</MapView>
I am experiencing a very weird behaviour in my android emulator when using react-navigation v5 in my react native application, which makes me think is a bug. I found out that there is an open issue on the official react-native-navigation page. See here.
In every secondary screen (see UserProfileScreen below), in many react native-elements like TouchableOpacity Button or TextInput the onPress event doesn't work. It only works in the main screen of the navigator. (See HomeScreen below)
Here is an example of how I create my stack navigator:
import {createStackNavigator} from '#react-navigation/stack';
// some imports here
const HomeStackNavigator = createStackNavigator();
export const HomeNavigator = () => {
return (
<HomeStackNavigator.Navigator>
<HomeStackNavigator.Screen name="HomeScreen" component={HomeScreen}/>
<HomeStackNavigator.Screen name="UserProfileScreen" component={UserProfileScreen}/>
<HomeStackNavigator.Screen name="UserSettingsScreen" component={UserSettingsScreen}/>
</HomeStackNavigator.Navigator>
)
};
As a PoC I have the same code in the main and secondary screen:
<TouchableOpacity
onPress={() => Alert.alert("You pressed me!")} >
<Text> touch me</Text>
</TouchableOpacity>
and I see the alert only in the main screen (HomeScreen).
If I make UserProfileScreen as the fist screen in my stack navigator above then it works (the onPress event) fine on this screen but not in the HomeScreen. So it seems that the onPress event is triggered only in the main screen!. On IOS it works fine in all screens. Any idea ? Let me know if you need some more code snippets.
I have added react-native-google-places-autocomplete with yarn in my react-native cli project but it is not working. Here are the issues I am facing at the moment.
the places drop down is not showing up on IOS, however the input text field allows me to enter a place name but the predictions list does not appear
onPress handler is not triggered at all on both IOS and android
The Text Input coming from react-native-google-places-autocomplete does not allow me to enter anything on ANDROID. It is like disabled all the time ( although the focus is set to true)
Note: all google location apis are enabled , google maps api, places api and geocode api are enabled and a valid api key is given.
I tried all possible solutions available including the following:
setting zIndex: 1000 a high value to avoid it being hidden behind some other view
Tried creating new RN App and added only this component to keep the project clean
Regenerating the API and even using another api which works with previous versions of REACT NATIVE.
The logs don't show anything on both Xcode and Android Studio. Here is the code snippet:
<View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
<GooglePlacesAutocomplete
ref = {ref => setSearchTextRef(ref)}
placeholder='Search for gym'
styles={{
container: {backgroundColor: 'transparent'},
textInputContainer: styles.viewStyle,
textInput: styles.textInputStyle,
}}
keyboardShouldPersistTaps = {'handled'}
listUnderlayColor = {'transparent'}
textInputProps = {{
onFocus: () => focusInput(),
onBlur: () => blurInput(),
onChangeText: (text) => onChange(text)
}}
minLength={1} // minimum length of text to search
returnKeyType={'search'}
listViewDisplayed={'auto'} // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => {
let coordinates = details.geometry.location;
sendCoordinates(coordinates, {data, details});
}}
getDefaultValue={() => ''}
query={{
key: googleAPIKey,
language: 'en', // language of the results
// types: '(cities)' // default: 'geocode'
}}
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GooglePlacesSearchQuery={{
rankby: 'distance',
types: 'gym'
}}
filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
debounce={200}
/>
</View>
Thank you in advance
Your code with a few things commented out worked for me. Commented out your function calls since those were not provided.
<View style = {[{zIndex: 2, backgroundColor: 'white'}]}>
<GooglePlacesAutocomplete
//ref = {ref => setSearchTextRef(ref)}
placeholder='Search for gym'
styles={{
container: {backgroundColor: 'transparent'},
//textInputContainer: styles.viewStyle,
//textInput: styles.textInputStyle,
}}
keyboardShouldPersistTaps = {'handled'}
listUnderlayColor = {'transparent'}
textInputProps = {{
//onFocus: () => focusInput(),
//onBlur: () => blurInput(),
//onChangeText: (text) => onChange(text)
}}
minLength={1} // minimum length of text to search
returnKeyType={'search'}
listViewDisplayed={'auto'} // true/false/undefined
fetchDetails={true}
renderDescription={row => row.description} // custom description render
onPress={(data, details = null) => {
let coordinates = details.geometry.location;
console.log(JSON.stringify(details)); //display details in console!
//sendCoordinates(coordinates, {data, details});
}}
getDefaultValue={() => ''}
query={{
key: 'YourKeyHere',
language: 'en', // language of the results
// types: '(cities)' // default: 'geocode'
}}
nearbyPlacesAPI='GooglePlacesSearch' // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
GooglePlacesSearchQuery={{
rankby: 'distance',
types: 'gym'
}}
filterReverseGeocodingByTypes={['locality', 'administrative_area_level_3']}
debounce={200}
/>
</View>
This was happening to me because I had this control inside ScrollView.
Using keyboardShouldPersistTaps="handled" on ScrollView seems to fix it
I had the same problem.
After all the solutions i tried nothing was working. Even though I had everything completed even the billing configuration on the google APIs, the the places drop down just wasn't showing.
So at start I reinstalled GooglePlacesAutocomplete with "yarn add react-native-google-places-autocomplete", if you have npm do the "npm i react-native-google-places-autocomplete".
Then I added these two imports again from the start:
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
import { GOOGLE_MAPS_APIKEY } from "#env";
Then I rewrote GooglePlacesAutocomplete & GOOGLE_MAPS_APIKEY in my code:
<GooglePlacesAutocomplete
placeholder="Where From?"
styles={{
container: {
flex: 0,
},
textInput: {
fontSize: 18,
},
}}
query={{
key: GOOGLE_MAPS_APIKEY,
language: "en",
}}
nearbyPlacesAPI="GooglePlacesSearch"
debounce={200}
/>
so they define the "new imports" and do the command "yarn install" on my project file even though it was already up to date.
Lastly, I restart my project with clean cache using the command "expo r -c".
Magically, it worked!
Hope, that helps someone in the future!
This package is no longer maintained and simply not working. I tried on IOS with expo. I didn't even get a list of results. I found a other package that is working like a charm:
https://www.npmjs.com/package/react-native-places-input
We are encountering a very bizarre scenario with react-navigation in our React Native application that is only observed on Android (both in the emulator and on physical devices AND for debug builds as well as release builds), but it works fine on iOS.
Context
We have an existing native application, and decided to implement some new screens in React Native as an experiment to see whether it would benefit our development lifecycle.
Our native app has a sidebar menu, and we added a new menu item, that when selected, takes the user into the React Native portion. They can of course navigate back out whenever they want, and later go back into that React Native portion.
Observed problem (Only occurs in Android)
We have identified it relates to the react-navigation library, but we don't know what we're doing wrong.
When the app is first loaded, the user can select the new menu item and the React Native app loads fine, showing its initial route page and with the StackNavigator working fine.
If the user returns to the native portion (either via the back key, or by selecting a different option from the sidebarmenu) and then later opts to return to the React Native portion, then the StackNavigator portion doesn't display. Other React components outside the StackNavigator get rendered. We know it mounts the contained components, as some of them are making API calls and we see those endpoints being queried. It just doesn't render.
Reloading within the emulator will render the app properly again until we navigate out of React Native and then return.
Oddly enough: If we turn on remote JS debugging, it suddenly all works fine.
So our question:
Can anyone spot what we might be missing in how we are using the StackNavigator, that is keeping it from rendering properly? Again: it works fine when the JS debugger is on, making us think that it is not a logic item, but perhaps a timing condition, or some subtle config? Or should we just ditch react-navigation and go to a different navigation library?
Simple reproduction of the issue
Our package.json is:
{
"dependencies": {
"react": "16.0.0",
"react-native": "0.50.4",
"react-navigation": "1.5.2"
}
}
Our React Native entry page (index.js) is:
import * as React from 'react';
import { AppRegistry, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import TestPage from './TestPage';
AppRegistry.registerComponent('MyApp', () => MyApp);
class MyApp extends React.Component {
public render() {
return (
<View style={{flex:1}}>
<Text>'This text always shows up fine on Android, even on reentry to React application'</Text>
<AccountNavigator />
</View>
);
}
}
const AccountNavigator = StackNavigator(
{
FirstPage: {
screen: TestPage,
navigationOptions: ({ navigation }) => ({
title: 'Test View'
})
},
{
initialRouteName: 'FirstPage'
}
);
The simple test page (TestPage.js) is just:
import * as React from 'react';
import { Text, View } from 'react-native';
export default class TestPage extends React.Component {
render() {
return (
<View style={{flex:1, alignItems: 'center', justifyContent: 'center'}}>
<Text>'If you can read this, then the app is on first load. But return to the native portion and then try to come back to React Native and you will not see me.'</Text>
</View>
);
}
}
Turns out it was a layout setting issue. In our native code, within our React Activity layout XML we had:
<com.facebook.react.ReactRootView
android:id="#+id/ReactRootView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
and the issue was in the "wrap_content" for height which was causing it to render the StackNavigator() as 1 pixel high. No idea why it always happened only on re-entry and not on the first time, nor why the JS debugger would cause the issue to disappear.
Changing layout_height to "match_parent" resolved the issue altogether.
My App does not show map.
I have an error when i activate debug console.
My Virtual Device
Genymotion
Google Nexus 7 5.0 API 21
By the way I tried my Samsung s4 device but dont work with the same error.
/* #flow */
'use strict';
var React = require('react-native');
var {
StyleSheet,
View,
MapView,
AppRegistry
} = React;
var Harita = React.createClass({
render: function() {
return (
<MapView
style={styles.map} />
);
}
});
var styles = StyleSheet.create({
map: {
flex: 1,
backgroundColor: 'red'
}
});
AppRegistry.registerComponent('harita', () => Harita);
You definitely need to add definition that you are using Map Services and API key which is required otherwise you'll see an empty screen.
Add this to your androidmanifest (before application element ending)
Unfortunately Facebook hasn't provided the Android version of MapView in the open source version of React Native. As noted here, you can "use Leland Richardson's react-native-maps as it is more feature-complete than our internal implementation."