I have simple application react native with expo.
My code is:
const html = require('./assets/web/index.html');
export default (): any => <WebView source={html} />;
Problem is that web page is loaded as pure html on android device. On IOS device it is working perfectly.
I am using react-native-webview
11.23.0
Any tips how can I fix my issue?
Google, SO and githu issues
Related
using react-navigation v6 and can't figure out how to make the header work as iOS on android.
On android the header seems like it rendered on top of component screen. I'm using 'pan' as softwareKeyboardLayoutMode with expo.
app.config.ts
android: {
...
softwareKeyboardLayoutMode: 'pan',
},
I found the root cause <Animated.View entering={FadeIn}> that seems to mess up how react-navigation does layout
https://github.com/software-mansion/react-native-reanimated/issues/3368
Rewrote all the animations to use Animated from react-native
import React from "react";
import AppLoading from "expo-app-loading";
export default function App() {
return <AppLoading />;
}
Isn't the above code supposed to show the splash screen to me? All I get is a white screen. Would really appreciate knowing what I did wrong here.
I have splash.png in my assets folder.
My app.json file:
{
"expo": {
...
"splash": {
"image": "./assets/splash.png",
"resizeMode": "contain",
"backgroundColor": "#e2fcff"
},
...
}
}
The code you have shown looks fine. However, there's more to it.
It's quite unclear to me what is actually supposed to work and not. For me, who runs a custom-managed workflow, AppLoading works when I prebuild android/ios and run the standalone app. When I run in Expo Go app I simply see a blank screen instead of the splash screen.
People have discussed if AppLoading works in bare workflow and according to Expo's sdk it should. It also works for me with a prebuild, so bare workflow is supported (in Expo SDK 42).
I have seen no mentions about showing a splash screen within the Expo Go app though, so can't tell whether that is supported or not.
And then web... Once again, not sure if it should work or not - it doesn't for me. It shows a blank page while loading. And in the fonts guide there is an Expo snack which uses AppLoading that shows a splash screen on Android but merely a blank page on web. The AppLoading docs claims it has support for web. If that means it won't crash, or actually display a splash screen image is left untold. The AppLoading docs further claims it uses SplashScreen to show the splash screen, which doesn't have web support. So, I suppose there's nothing such a splash screen for web (which wouldn't surprise me, because splash screens are uncommon on web).
Personally, I'm fine with Android/iOS support for standalone apps. I only use Expo Go for testing. Furthermore, the splash screen I will use for mobile devices won't work well on web anyway. The skeleton I will show won't look the same as the web version, so I would rather implement at custom splash screen for web.
Summary for AppLoading support:
Managed and bare workflow are both supported.
It works on standalone apps.
Not sure if it will display the splash screen in Expo Go app.
Web appears to fallback to displaying a blank page.
If I'm wrong somewhere, or if someone knows if AppLoading works in Expo Go App, please fill me in!
App loading documentation In the documentation, it says that you need to provide additional arrugments
export default function App() {
const [isLoading, setLoading] = useState(true);
if (isLoading) {
return(
<AppLoading
startAsync={() => console.log('starting')}
onFinish={() => { setTimeout(() => {setLoading(false)}, 1000) }}
onError={(err) => {console.log(err)}}
/>
)
}
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
I am creating an APP using managed expo react native.
And want to implement Toast alerts, react-native provides Toast only for Android not for IOS.
I googled it and found the couple of modules which works on Android and ios but they required some config change in Native code. But as I said I am working on Managed expo app. So, I don't have access for that.
Now let me know how I can implement Toast on this?
Thanks.
As toast is a native feature in android, for ios try snakbar.
import {
ToastAndroid,
Platform
} from "react-native";
import Snackbar from 'react-native-snackbar';
notify = (message) => {
if (Platform.OS != 'android') {
Snackbar.show({
text: message,
duration: Snackbar.LENGTH_SHORT,
});
} else {
ToastAndroid.show(message, ToastAndroid.SHORT);
}
}
** If you are on expo
https://snack.expo.io/#mainak/snackbar
You can use third-party library native-base available for both react-native-cli and expo
[Native-Base] https://docs.nativebase.io/docs/GetStarted.html
[Toast Component] https://docs.nativebase.io/Components.html#toast-def-headref
I am using react-native-webview-bridge library to render a webview inside my react native Ios app. I am trying to implement an offline reader app, where I need to capture all the error events when the webview fails to load images, so that from react native when I capture the event I can send local images as fallback source to the image in webview.
Function that is invoked when the WebView load fails is onError: PropTypes.func,. Pass this into WebView like this:-
<WebView
ref={o => (this.webView = o)}
source={{ uri: this.state.uri }}
style={styles.webView.style}
renderError={() => this.Spinner.showOffline(true)}
onLoadStart={this.onLoadStart.bind(this)}
onLoadEnd={this.onLoadEnd.bind(this)}
onError={()=>console.warn('error')}
/>
and open your react-native WebView.android.js or WebView.iOS.js file.
I'm develop an app in re-natal platform which is based on ClojureScript and React Native. I have an issue to disable RTL for my application in Android platform.
this is the code to disable RTL in react-native which works totally fine:
const ReactNative = require('react-native');
ReactNative.I18nManager.allowRTL(false);
And I think this is the exact above code in cljs:
(def ReactNative (js/require "react-native"))
(.allowRTL (.I18nManager ReactNative) false)
However, I got this error:
"Object is not a function (evaluating 'my-app.android.core.ReactNative.I18nManager())"
react-native: "v0.50.3"
react: "16.0.0"
re-frame: "0.9.2"
clojurescript: "1.9.542"
clojure: "1.9.0-alpha16"
screenshot of error
I18nManager is a field (not a method) of ReactNative object. It should be accessed like this: (.-I18nManager ReactNative). So, the equivalent of
ReactNative.I18nManager.allowRTL(false);
will be
(.allowRTL (.-I18nManager ReactNative) false)