I am new to react native and am trying to add a google map to my app.
I started by installing react-native-maps and creating a new file with the following code.
import React from 'react';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
export default class MapScreen extends React.Component {
render() {
return (
<MapView
provider={ PROVIDER_GOOGLE }
style={{flex: 1}}
region={{
latitude: 54.721344,
longitude: -6.199981
}}
showsUserLocation={true} />
);
}
}
After this I added the following code to the Podfile file found in the ios folder.
target 'MapExample' do
pod 'Yoga', path: "./node_modules/react-native/ReactCommon/yoga/Yoga.podspec"
pod 'GoogleMaps'
end
After getting my api key from google, I opened Xcode and added the AirGoogleMap folder to my project. I then went into my build settings and add 'HAVE_GOOGLE_MAPS+1' to Preprocessor Macros Macros.
Next I went into my AppDelegate.m file and added the following lines
#import GoogleMaps;
[GMSServices provideAPIKey:#"YOUR_API_KEY"]
After all this was done I ran my app in the iOS simulator and when I did this an error appeared as shown below.
I am unsure as to why I am getting this error as I have added the AirGoogleMap to my project via Xcode. Is there any way to fix this?
Sometimes pod does not work properly so you might be have to build the app from scratch. In your issue what I can suggest you to read the instructions in the link below carefully and create a new project by using react-native-init if necessary. Then try it again. Lastly, please be aware of that if you're using pod and when you open the project with xCode, Libraries section should be empty and Target/Build Phases/Link Binary With Libraries should contain generally and mostly only libPods-projectname.a
https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md
You can't use import outside a module, also try to restart the entire simulation engine.
Related
I am very new to ReactNative. I have developed a webview app for both android and ios. The Url for UAT server doesnt have certificate, this causes the webview not load. I tried in Android Studio, with the method ONRECEIVEDSSLERROR() i was able to ignore SSL issue but not able to do in react native pls help. I have attached code snippet below:
import React, { Component } from 'react';
import { WebView } from "react-native-webview";
export default function App({ navigation }) {
return (
<WebView
source= {{ uri: 'myurl' }}
ignoreSslError={true}
javaScriptEnabled={true}
setSupportMultipleWindows={false}
/>
)
}
For development you may just try to subdue this error directly in react-native-webview source code. For that go to node_modules/react-native-webview/android/src/main/java/com/reactnativecommunity/webview/RNCWebViewManager.java and change handler.cancel() to handler.proceed() in onReceivedSslError method.
Somehow it doesn't always work. For me this method didn't solve problem when I was trying to use npx create-expo-app but it helped me when I created and executed app by react-native cli tool.
On react-native, there's a feature were we can use a components file suffix to build different components according to platform, ie. component.ios.js and component.android.js will build a component module with specific behavior for ios and android.
Is there any way to build different components according to build variants/flavors/schemes? Say, suppose I have a pro and a lite version of my app, I'd like to do something like this:
| some-folder/
| -- component.pro.js
| -- component.lite.js
and so when I import component from 'some-folder/component', the bundler could detect if I'm using a pro or lite build variant and bundle the correct javascript file, in a similar manner that it's done for the OS suffixes.
Do notice that I know that I can just check the build variant at runtime and provide the correct component correctly, but that means bundling the code for the wrong variant in the app - increasing app size needlessly.
Related, is there a way to import images conditionally according to build variant? I know I could just place them in their respective assets folders for each native platform, but I wonder if there are other methods.
Any help is appreciated.
no thats not possible as React Native will detect when a file has a .ios. or .android. extension and load the right file for each platform.
you have to write your own wrapper for each file like
component
--> component.pro.js
--> component.lite.js
--> index.js
in index.js file you have check platform or os from react native and return specific file
for example file
import ComponentPro from './component.pro.js';
import ComponentLite from './component.lite.js';
import {Platform} from 'react-native';
export defualt Component=(props)=>{
if (platform.os==='pro') return <ComponentPro {...props}/>;
else if (platform.os==='lite') return <ComponentLite {...props}/>;
}
I am just starting out on React Native 0.57.1 and expo 2.21.2 using a boilerplate code that attempts to load a font during startup with the command npm start or expo start:
import * as Expo from "expo";
....
async componentWillMount() {
await Expo.Font.loadAsync({
Ionicons: require("#expo/vector-icons/fonts/Ionicons.ttf"),
});
this.setState({ isReady: true });
}
This gives an error
Unable to resolve "#expo/vector-icons/fonts/Ionicons.ttf" from "src/boot/setup.js"
Attempt #1: npm install --save #expo/vector-icons. However, doing this does not solve the error.
Why is this happening, and how can we resolve this issue? Thank you!
Update: Following the suggestions of both mialnika and Carlos Abraham, the error is fixed but a new one is encountered:
The Expo SDK requires Expo to run. It appears the native Expo modules are unavailable and this code is not running on Expo.
This is from running the RN app in Expo's development mode, connected through LAN, using the iOS Expo client on an actual iPhone.
No such error appears from a fresh expo init project
It's not necessary to load the Icon library like that to be able to use Ionicons in expo, just install the package and use it like so:
import React, { Component } from 'react';
import { Ionicons } from '#expo/vector-icons';
export default class IconExample extends Component {
render() {
return <Ionicons name="md-checkmark-circle" size={32} color="green" />;
}
}
I'm not sure what version of vector-icons you have but can you check if this link will work :)?
'#expo/vector-icons/website/src/fonts/Ionicons.ttf';
I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!
By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.
If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .
I'm starting a very basic build.
I'm using `create-react-native-app' and yarn for pm.
From there all I have tried to accomplish is to load in 'native-base' for some UI elements.
From the app.js file the only thing I've added is a Button Component from native-base.
<Button> <Text></Text> </Button>
And have included native-base.
After receiving some errors that it couldn't resolve module '#expo/vector-icons' I went and installed #expo/vector-icons, and for the hell of it ran react-native link.
Now it can find #expo/vector-icons but it can't find the fonts starting with Ionicons.ttf.
SO. From there I downloaded all the fonts to a assets/fonts/ directory and then included this in my app.js file based off some documentation I found on the expo site.
import { Font } from 'exponent';
///
export default class App extends React.Component {
componentDidMount() {
Font.loadAsync({
'ionicons': require('./assets/fonts/Ionicons.ttf'),
});
}
///
They way I load custom fonts is by adding them in the Info.plist file as a list of Font provided by the application:
And they also need to be in the provided resources of the Build Phases:
After that, you can use it in the fontFamily property in CSS in react native. Make sure you also clean and build the project again after adding the fonts so they are copied to the device.