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."
Related
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?
I have a very old react native application written on Expo using SDK version 32. Unfortunately, we don't have the time and resource to migrate to the latest version of the SDK (40).
So, right now, we struggle with an issue which reproduces on an Android. One of our screens has a background video (implemented with Expo Video component) and two buttons over it.
import React from 'react';
import { TouchableOpacity, StyleSheet, View, Text, Animated, Dimensions } from 'react-native';
import { AppLoading, Asset, Video } from 'expo';
const defaultVideoSource = require('../content/videos/be.mp4');
export default class HomeScreen extends React.Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.state = {
backgroundOpacity: new Animated.Value(0),
loaded: false,
videoHeight: height,
videoWidth: width,
};
}
async componentWillMount() { }
// this is called from the video::onLoad()
fadeInVideo = () => {
const { backgroundOpacity } = this.state;
setTimeout(() => {
Animated.spring(backgroundOpacity, {
toValue: 1
}).start();
}, 400);
};
render() {
const { backgroundOpacity, loaded, videoHeight, videoWidth } = this.state;
if (!loaded) { return <AppLoading />; }
return (
<View style={styles.container}>
<View style={styles.background}>
<Animated.View
style={[
styles.backgroundViewWrapper,
{ opacity: backgroundOpacity }
]}
>
<Video
isLooping
isMuted={false}
onLoad={() => this.fadeInVideo()}
resizeMode="cover"
shouldPlay
source= { defaultVideoSource }
style={{ height: videoHeight, width: videoWidth }}
/>
</Animated.View>
</View>
<View style={styles.overlay}>
// BUTTONS OVER THE VIDEO
</View>
</View>
);
}
}
const styles = StyleSheet.create({
// ...
});
but for some reason, when I publish it to my Expo account and run it from there the video freezes at a certain moment and stops playing.
The buttons over the video are still active and functional. Like nothing happened but I need to restart the application (via Expo client app on Android) in order to start playing again. I have noticed that If I start it in a debug mode with the command:
expo start
and scan the QR code from the Expo client app there's no freezing of the video. So, for that reason, I would like to create a standalone file (.apk) which I can execute directly on my device without the need of using Expo client app. But, the problem here is that when I try to use the command:
expo build:android
I get an error saying:
Unsupported SDK version: our app builders no longer support SDK
version 32. Please, upgrade to at least SDK 36.
But, as I said, we currently don't have the time to do that because this (SDK update) would affect other components of our app that will need to be rewritten and retested. So, my question finally: Is there any alternative for building an .apk while using SDK 32.0?
It's possible to build apps that use old expo sdks, but I'm not sure if play store will accept those old versions, there was a lot of changes around privacy policy and terms of service plus at certain point google started to require 64 bit binaries(I'm not sure if sdk 32 already had those changes). If that's the case your only option is to upgrade to supported SDK.
If you want to build that app, you can do that with turtle-cli https://www.npmjs.com/package/turtle-cli. This tools executes locally the same code that runs on expo servers, but it's not fully integrated with expo infrastructure, so you will need to provide keystore and all the passwords manually in the cli and either your expo credentials(if you use expo publish) or url to the js bundle (if you self-host). You will need to use old enough version of turtle-cli that still have that sdk, you can consult CHANGELOG here https://github.com/expo/turtle/blob/master/CHANGELOG.md to check that.
I'm using loadAsync to load some fonts. It worked fine while testing the app on my device, but when I tried on another device (Galaxy s10e), the fonts seem to be loaded (checking with Font.isLoaded) but not displaying when using fontFamily.
This is my App.js
import * as Font from 'expo-font';
import {AppLoading} from 'expo';
import React, {useState} from 'react';
const fetchFonts = async() => {
return await Font.loadAsync ({
secular: require ('./assets/fonts/SecularOne-Regular.ttf'),
varela: require ('./assets/fonts/VarelaRound-Regular.ttf'),
lemon: require ('./assets/fonts/LemonMilk.otf'),
collegiate: require ('./assets/fonts/CollegiateBlackFLF.ttf'),
assistant: require ('./assets/fonts/Assistant-ExtraBold.ttf'),
zvulun: require ('./assets/fonts/zvulun-black-fm.otf'),
roboto: require ('./assets/fonts/Roboto-Medium.ttf'),
osh: require ('./assets/fonts/OpenSansHebrew-ExtraBold.ttf'),
oshregular: require ('./assets/fonts/OpenSansHebrew-Regular.ttf'),
oshlight: require('./assets/fonts/OpenSansHebrew-Light.ttf'),
myriad: require('./assets/fonts/myriad-hebrew.ttf')
});
};
export default function App () {
const [dataLoaded, setDataLoaded] = useState (false);
if (!dataLoaded) {
return (
<AppLoading
startAsync={() => fetchFonts().then(() => console.log('done')).catch((err) => console.log(err))}
onFinish={() => setDataLoaded (true)}
onError={err => console.log (err)}
/>
);
}
return *the actual app*;
}
To be clear, the fonts do load and show correctly on another device (Galaxy s10+).
Expo SDK 37
Android 11
expo-font 8.1.0
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
I am working on some end-to-end tests for a React Native (version 0.60) application which are run via Appium.
I have a couple of buttons which are wrapped around a SafeAreaView to avoid problems with the latest iOS devices (e.g. iPhone X, iPad Pro, etc...). This is the key part of the Component render() function:
const Buttons = (
<StickyContainer visible={isSizeSelected} width={width} style={containerStyle}>
{showAddToWishlist && (
<Button
outline
fixedWidth
uppercase
tx="product.addToWishlist"
onPress={() => this.onPressAddTo(ProductAction.AddToWishlist)}
icon="heartBlack"
margin={margin}
showSpinner={isAddingToWishlist}
/>
)}
{showAddToShoppingBag && (
<Button
primary
fixedWidth
uppercase
tx="product.addToCart"
onPress={() => this.onPressAddTo(ProductAction.AddToShoppingBag)}
showSpinner={isAddingToShoppingBag}
{...setTestId("sizeOverlayAddToCartButton")}
/>
)}
</StickyContainer>
)
return <SafeAreaView forceInset={{ bottom: "never" }}>{Buttons}</SafeAreaView>
As you can see, the accessibility IDs are set through the setTestid() function which is doing nothing more than this:
const getPlatformTestId = (id: string) => {
if (IS_IOS) {
return {
testID: id
}
}
return {
accessibilityLabel: id,
accessible: true
}
}
export const setTestId = (id: string) => {
return getPlatformTestId(id)
}
Now the problem: if I run the app and I try to search on Appium for the ID sizeOverlayAddToCartButton I can't find anything. If I remove the <SafeAreaView> and I return directly Buttons the ID is found without any problem.
It's also interesting that if I use the app Accessibility Inspector (it's part of Xcode) instead of Appium, the ID is always found no matter if I use the <SafeAreaView>.
Does someone know why this is not working? I can't find any compatibility issue online