Could not implement bing map in react native expo
<BingMapsView
credentialsKey="somekey"
mapLocation={{ lat:
12.9010875, long: 77.6095084,
zoom: 15 }}
style={styles.box}
/>
</View>
Looks like it is a problem with Android configuration. As you can see here https://reactnative.dev/docs/native-components-android requireNativeComponent is used to define the native view on the JS side. Probably you need to clean your node modules and install them again and rebuild your project
Related
SDK Version:40.0.0
Platforms(Android/iOS/web/all):Android
Hello
I use react-native-maps in my project. My project was developed using Expo SDK 37 and it was working fine. I tried recently to run the “expo-upgrade” command to upgrade to Expo SDK 40. I fixed some errors that I found in development mode and then I executed the command: “expo build: android”, selected to generate Bundle instead of APK, and then I got my bundle file. I uploaded that bundle file to Google Play Console in Internal Test release mode. When I downloaded the Internal Test version from Google Play and went to the Map page, the app crashes and reload immediately and I’m being able to see the map Screen.
Video showing the problem: https://youtu.be/MqfYoOZcmio
Ps: It was working fine with Expo SDK 37 before upgrading to Expo SDK 40
My app.json:
…
"android": {
"package": "package.name",
"versionCode": 123,
"config":{
"googleMaps":{
"apiKey":"MY_KEY"
}
}
},
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["js", "jsx", "svg"]
}
I tried even to create a new project on Google API Manager and a new key, pass the package name of the project and activate Google Maps SDK for android but it did not work. I passed Google's sign-in SHA-1 key from Google Play to the project and it did not solve the problem.
I tried to eject from expo and then i made a native configuration for my project and then it worked fine just as before
I had the same issue after upgrading to SDK 40,
In my case the problem was in custom Marker.
Also in another project on SDK 40 I didn't have this issue, but I was loading custom marker from uri like this icon={{uri: some_url}}
WRONG
<MapView.Marker
title="Your Title"
description="Your Description"
icon={require('../Images/mapPin.png')} <== PROBLEM
draggable
coordinate={{
latitude: coords.latitude,
longitude: coords.longitude,
}}
/>
RIGHT
<MapView.Marker
title="Your Title"
description="Your Description"
draggable
coordinate={{
latitude: coords.latitude,
longitude: coords.longitude,
}}
>
<Image source={require('../Images/mapPin.png')} style={{width:50, height:50}} />
</MapView.Marker>
In React Native I found two plugins to check if a device (iOS/Android) is jailbroken/rooted:
Jail Monkey
react-native-is-device-rooted
I have firstly tried the npm package react-native-is-device-rooted but it doesn't work and it seems to be outdated. So I tried Jail Monkey, but I get this following error:
The code is:
import JailMonkey from 'jail-monkey'
export default class Welcome extends Component {
render() {
return (
...
<View style={styles.lowerView}>
<CustomButton text={"Jail Monkey"} onPress={() => this.printJailMonkey()}/>
</View>
...
);
}
printJailMonkey = () => {
console.log("Jail Monkey library content: " + JailMonkey.isJailBroken())
}
}
I have checked carefully the manual link of the package (using Xcode, pod install, and so on...). Nothing worked, does someone can help me?
JailMonkey uses Native Modules and thus cannot run in an Expo managed app. You need to eject it to ExpoKit for JailMonkey to work.
Solved but doing manually the linking.
Try following steps for manual linking.
Navigate to root folder in terminal enter commands:
react-native link
cd ios
pod update
I am getting the following error in react native - fontFamily "ionicons" is not a system font and has not been loaded through Font.loadAsync.
If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
I am trying to import the expo vector icons.
import { Ionicons } from '#expo/vector-icons';
and using the icon
<Button transparent>
<Ionicons name="md-checkmark-circle" size={32} color="green" />
</Button>
but getting the above mentioned error.
Another possible solution I happened upon after of hours of looking at code that should work and which is identical to the sample and the excellent previous answer.
If you have been upgrading Expo this may be your answer.
Delete node_modules
Delete package-lock.json
run expo install
run expo start -c
If nuking node_modules is not working, then make sure you don't have installed multiple versions of expo-font.
Remove expo-font from node_modules/expo/node_modules/expo-font/.
Remove expo-font form list of dependencies from node_modules/expo/package.json.
Run expo r -c
For details Expo cannot load a font due to multiple versions of expo-font installed.
The library #expo/vector-icons is only installed by default on the template project that get through expo init -- it is part of the expo package .
If you created your project using react-native init use react-native-vector-icons instead
Installation
npm i react-native-vector-icons
react-native link react-native-vector-icons
Usage
import Icon from 'react-native-vector-icons/Ionicons';
<Button transparent>
<Icon name="md-checkmark-circle" size={32} color="green" />
</Button>
OR
try loading Ionicons using Font.loadAsync in your App.js
async componentDidMount () {
await Expo.Font.loadAsync({
Ionicons: require('#expo/vector-icons/fonts/Ionicons.ttf'),
});
Adding Iconicons in loadAsync solved this bug for me.
async componentDidMount () {
await Expo.Font.loadAsync({
Ionicons: require('#expo/vector-icons/fonts/Ionicons.ttf'),
});
I solved this problem by removing <Icon\> tag in my code.
After leaving only <Ionicons\> tags for icons, I got saved.
I have fixed this issue by expo upgrade just in case anyone else would see that.
Remove expo-font from package.json.
delete node_modules and package.lock.json .
Run npm install or yarn install
Run npm start or yarn start.
None of the suggestions worked for me. I found the ionicons.ttf file here, downloaded and copied it to my fonts folder and linked it this way:
let [fontsLoaded] = useFonts({
'Ionicons': require('./assets/fonts/ionicons.ttf'),
});
if (!fontsLoaded) {
return ( ... );
} else {
return ( ... )
}
Hope this helps someone.
I want to know how to have different fonts for IOS and Android,
I have only 1 index file.(App.js)
My code that works on IOS:
<Text style={{fontFamily: 'AppleSDGothicNeo-Thin'}}>Hello!</Text>
But when I open the App on Android I see the standard font (Arial?)
I tried something like this:
<Text style={{fontFamily:'Roboto', fontFamily:'AppleSDGothicNeo-Thin'>Hello!</Text>
But this just gives me an Error that the font wasn't found.
You can use condition in your style using Platform component from React Native
import { Platform } from 'react-native';
<Text style={{fontFamily: (Platform.OS === 'ios') ? 'AppleSDGothicNeo-Thin' : 'Roboto'}}>Hello!</Text>
Also be sure fonts are well imported.
Otherwise import them with the following steps.
1 - Place the fonts you want to use in a directory inside your project. For example in ./assets/fonts/
2 - Add the following line in your package.json:
“rnpm”: {
“assets”: [“./assets/fonts”]
}
3 - run in terminal:
$ react-native link
I'm new to react native and want to build a small test app in Android and iOS.
I have created an images directory alongside my index.ios.js and index.android.js files.
My code below produces a red screen error saying "unable to resolve module ./images/tree.png... Invalid directory...":
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} = React;
var TestApp = React.createClass({
render: function() {
return (
<View>
<Text>test app</Text>
<Image
style={styles.thumbnail}
source={require('./images/tree.png')} /> />
</View>
);
},
});
var styles = StyleSheet.create({
thumbnail: {
width: 100,
height: 100,
},
});
AppRegistry.registerComponent('TestApp', () => TestApp);
Where should I place my images and how should I reference them?
Your code looks correct assuming that the images directory is in the same location as the index.*.js files.
What version of React Native do you have? From the Images doc page:
Available React Native 0.14+. If you've generated your project with
0.13 or earlier, read this. The new asset system relies on build hooks for Xcode and Gradle that are included in new projects generated with
react-native init. If you generated your projects before that, you'll
have to manually add them to your projects to use the new images asset
system. See Upgrading for instructions on how to do this.
If you want to verify your react-native version, the easy way to do this is to run the following npm command from your project directory:
npm ls react-native
The current release version is 0.15.0.
Make sure you don't forget to run react-native upgrade after updating the package as this is required for adding build hooks for the new asset system to existing projects. If you previously updated your react-native version without doing this, that may explain the issue you are having.
If you happen to be using Windows for development, see my answer to this question for details on how to work around a bug with the new asset system on Windows.