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.
Related
I want to make the app starts by default in RTL,
I tried to put [[RCTI18nUtil sharedInstance] allowRTL:YES]; in AppDelegate.m file in iOS and nothing changed it's shill LTR
You need to write something like below
In Android you need to write below code in Android Native side onCreate method at file location MainApplication.java in the directory android/app/src/main/java/com/YOUR_PROJECT_NAME
I18nUtil mI18nUtil = I18nUtil.getInstance();
mI18nUtil.forceRTL(this,true);
mI18nUtil.allowRTL(this, true);
in iOS you need to write code in AppDelegate.m file
[[RCTI18nUtil sharedInstance] allowRTL:YES]
[[RCTI18nUtil sharedInstance] forceRTL:YES]
React Native Side
import { I18nManager } from 'react-native';
useEffect(()=>{
I18nManager.forceRTL(true);
})
I'm using the PagerView component from 'react-native-pager-view' at https://github.com/callstack/react-native-pager-view.
Short backstory my app is intended to be available on all 3 platforms (Android, iOS, web). I know that this library doesn't support web, I'm trying to compromise by not using this component on web by trying to conditionally use this component if not on web.
I tried to create an if conditional block that is always false to test it out and it seems that it still tries to read the component on compilation.
import PagerView from 'react-native-pager-view';
const render = () => {
let view = <View></View>;
if (false) { // Ideally (Platform.OS !== "web")
// Code works if I comment out the code line below
view = <PagerView ...></PagerView>;
}
return <View>{view}</View>;
}
Here is the following error message on web if I try to run the code like above.
TypeError:
Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])
is not a function. (In
'Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])(VIEW_MANAGER_NAME)',
'Object(react_native_web_dist_index__WEBPACK_IMPORTED_MODULE_0__["requireNativeComponent"])'
is an instance of Object)
I think this could be solved with some kind of Webpack configuration but unfortunately I'm not too savvy on that.
These are also some additional error messages I got on the Expo Metro Bundler page
node_modules/react-native-pager-view/lib/module/PagerView.js Attempted
import error: 'react-native-web/dist/index' does not contain a default
export (imported as 'ReactNative').
node_modules/react-native-pager-view/lib/module/PagerViewNative.js
Attempted import error: 'requireNativeComponent' is not exported from
'react-native-web/dist/index'.
Any help or suggestions would be much appreciated, thanks!
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.
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 started using react native recently. I've learned that in the new react native update, there is no more index.ios.js or index.android.js, and that there's only index.js. I also learned that there's no need to use index.js since there's App.js.
The stimulator (iOS) also tells me to simply edit App.js. However, every time I try to edit App.js and reload the stimulator screen, none of my changes show up and the stimulator screen is left the way it started out. It keeps showing the same words ("Welcome to React Native! To get started, please edit App.js...").
I tried using react-native start in the terminal before doing react-native run-ios, but that didn't help either.
Does anyone have an idea as to why it isn't working and what can be done to fix it?
This is the code for my index.js:
import { AppRegistry } from 'react-native';
import App from './App.js';
AppRegistry.registerComponent('project2', () => App);
Here is screenshot:
https://i.stack.imgur.com/sxqzP.png
Hi Please run the below command, every time when you do changes in the app.js file
npm run build:ios