I have used Date Picker for my Application
it is working as expected in android chrome browser but safari is showing some UI issues. can anyone please solve this
<LocalizationProvider dateAdapter={AdapterMoment}>
<DateTimePicker
renderInput={(props) => (
<CustomTextfield
{...props}
{...InputProps}
id={props.id}
name={props.name}
placeholder={props.placeholder}
error={props.error}
helperText={props.helperText}
/>
)}
label={props.label}
value={props.value}
onChange={props.onChange}
{...props}
/>
</LocalizationProvider>
this is giving me in safari browser as
Any solution for solving this ?
Using "setTimeout" and "blur".
onOpen={() => {
setTimeout(() => {
const el = document.activeElement;
if (el) {
(el as HTMLElement).blur();
}
});
}}
I tried to add a EXPO iOS StoreReview API but failed.
have any sample code?
import * as StoreReview from 'expo-store-review';
...
export default SettingPage() {
handleReview = () => {
if (StoreReview.isSupported()) {
StoreReview.requestReview();
}
};
render (
...
<TouchableOpacity onPress={handleReview}>
<Text>Click Review</Text>
</TouchableOpacity>
);
}
add ios-appStoreUrl android-playStoreUrl fields in app.json
I am using react-native-webview for rendering a webview. When I navigate from one page to other inside the webview and then try to go back using this.webviewref.goBack() I get the exception of nodeHandle expected to be non-null.
Here is my piece of code
<View style={{ flex: 1 }}>
<Header
headingText={headerText}
onpress={() => {
// this.dispatchCustomEvent(BACK_PRESS);
if (this.canGoBack) {
this.webViewRef.goBack();
} else NavigationActions.pop();
}}
/>
<WebView
source={{ uri: "http://localhost:3001/invite/" }}
bounces={false}
javaScriptEnabled={true}
ref={webViewRef => (this.webViewRef = webViewRef)}
// injectedJavaScript={patchPostMessageJsCode}
onMessage={event => {
const { type, data } = JSON.parse(event.nativeEvent.data);
console.log({ type });
console.log({ data });
this.handleEvent(type, data);
}}
onNavigationStateChange={navState =>
(this.canGoBack = navState.canGoBack)
}
/>
</View>
console logging this.webViewRef shows that the goBack method exists in the weViewRef
The code for which throws the nodeHandle expected to be non-null can be found here https://github.com/react-native-community/react-native-webview/blob/master/src/WebView.ios.tsx
I am unable to understand what is the problem with getWebViewHandle
and why nodeHandle is null.
I had the same problem. It turns out that my react-native version is too low. It requries at least 0.57. After upgraded to 0.59.5 and other dependencies, this problem disappears.
I had the problem too and I found a solution, my solution at leasts.
I had this piece code:
Versions:
"react": "16.11.0"
"react-native": "0.62.2"
"react-native-webview": "^9.4.0"
<WebView
ref={this._setWebviewRef}
onNavigationStateChange={this._handleWebViewNavigationStateChange}
onMessage={this._handleOnMessage}
source={{uri: this.state.dashboardUrl || ''}}
renderLoading={() => <LoadingSpinner />}
startInLoadingState
incognito
/>
where this._setWebviewRef was the next:
_setWebviewRef = (ref) => {
if (ref && !this.props.webviewRef) {
const {goBack} = ref;
goBack && this.props.setWebviewRef({goBack});
}
};
I'm using redux to save goBack method to use it on the typic _handleAndroidBackButton. So as other guys said, i was giving the fu***** nodeHandle expected to be non-null but i was seeing that goBack method exists on _handleAndroidBackButton context.
Debugging i saw that ref WebView method has multiple calls, not just 1 time as i was controlling. So, deleting this condition && !this.props.webviewRef is already working.
Also, I had tried to set my uri 'hardcoded' with the same error, so that not work for me.
PD: don't try to save entire WebView ref on global state, just save what you need our you will have some errors.
The reason for this problem may be that your component has been rendered for a certain condition at the beginning, but after the condition is not satisfied, the modified component is removed, but the reference of the component is not empty. Therefore, when calling the component method, the component method is called, because the component is not empty, but the reference is still not empty, resulting in an error. To adjust the error caused by the above situation, just set the variable referenced by the previous assignment to null when removing the component
I try to load the local .html file into WebView in React Native:
// load local .html file
const PolicyHTML = require('./Policy.html');
// PolicyHTML is just a number of `1`
console.log('PolicyHTML:', PolicyHTML);
// will cause an error: JSON value '1' of type NSNumber cannot be converted to NSString
<WebView html={PolicyHTML} />
The .html file should be read as a string, not as a resource representative.
How can I load the .html file into WebView in React Native?
By the way, what is the type of those resource representatives from require()? Is it number?
try it:
const PolicyHTML = require('./Policy.html');
<WebView
source={PolicyHTML}
style={{flex: 1}}
/>
I come across this post searching for loading static html.
If your html code is retrieved using, for example, an API, you can render WebView in this way:
<WebView
originWhitelist={['*']}
source={{ html: html, baseUrl: '' }}
/>
Notice that originWhitelistis required as explained in the documentation:
Note that static html will require setting of originWhitelist for
example to ["*"].
<View style={{flex: 1}}>
<WebView
style={{flex: 1}}
source={require("./resources/index.html")}
/>
</View>
To make WebView, the parent has to has a dimension or flex:1. We could set the WebView to flex: 1 too so that it fills up the parent.
If you need to serve local assets as well, then:
put all assets together with index.html into android/app/src/main/assets/www (You can copy them there with gradle task)
Then:
var uri = Platform.OS == "android" ?
"file:///android_asset/www/index.html" :
"./web/www/index.html"
return <WebView source={{ uri }} />
** For iOS didn't tested, please add instruction, how assets should be stored
With Expo tools and generally using Expo:
import { WebView } from "react-native-webview";
import { readAsStringAsync } from "expo-file-system";
import { useAssets } from "expo-asset";
export const MusicSheet = () => {
const [index, indexLoadingError] = useAssets(
require("../assets/musicsheetview/index.html")
);
const [html, setHtml] = useState("");
if (index) {
readAsStringAsync(index[0].localUri).then((data) => {
setHtml(data);
});
}
return (
<View style={styles.container}>
<WebView
onLoad={() => {}}
source={{ html }}
onMessage={(event) => {}}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
height: 100,
display: "flex",
},
});
Try this :
Add your .html file in your project.
Write such lines of code in the file where you want to use WebView Component
const OurStoryHTML = require ('./OurStory.html')
<WebView
source={OurStoryHTML}
style={{flex: 1, marginTop : 44}}
/>
It may help you.
If you're working with assets, project directories is different on the device's directory once the project is build and you can't simply reference them via string url.
Expo
If using expo, you have to require every asset then use useAssets on the require to cache them to the local storage of the device.
useAssets will return an object that contains a localUri
(this is the uri of the image that has been cached)
you can then use the localUri and put it as the src of the image
import { useAssets } from 'expo-asset';
/* . . . */
const IndexHTML = require('./assets/index.html');
const myImage = require('./assets/splash.png');
// url link after image is cached to the device
const [imgSrc, setImgSrc] = useState('');
const [image, imerr] = useAssets(myImage);
const [html, error] = useAssets(IndexHTML);
const webViewProps = {
javaScriptEnabled: true,
androidLayerType: 'hardware',
originWhitelist: ['*'],
allowFileAccess: true,
domStorageEnabled: true,
mixedContentMode: 'always',
allowUniversalAccessFromFileURLs: true,
onLoad: () => {
console.log(image[0].localUri);
setImgSrc(image[0].localUri);
},
source: {
html: '<img src="' + imgSrc + '"/>',
},
};
return <WebView {...webViewProps} />
const webViewProps = {
...
source: IndexHTML,
};
Note: for the expo apporach, files referenced in IndexHTML will not be found
The trick is to turn your html into a string literal to utilize template strings.
Then you have to manually require each of those assets to concatenate localUrl
require() has limited types supported and you need to add a metro.config.js in your root folder.
it will give errors if you require() a .js file since it reads it as a module rather, the workaround approach would be to bundle your assets
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.resolver.assetExts.push(
// Adds support for asset file types
'css', 'ppt', 'obj'
);
module.exports = config;
Moreover, expo can hot reload changes done with the cached assets.
React Native
If you have the android folder in your directory, navigate to
android > app > build.gradle
then add
android {
/* link assets to the local storage of device */
sourceSets {
main { assets.srcDirs = ['src/main/assets', '../../source/assets/'] }
// [do not touch, 'relative to your asset'] }
}
. . .
finally, the relative folder you linked in gradle can be accessed through
file:///android_asset/
for ex. file:///android_asset/index.html -> /asset/index.html
return <WebView source={{uri: `file:///android_asset/index.html`}} />
For IOS, here's how
On the other hand, you have to rebuild vanilla react to see the changes in the assets.. which takes about 20 minutes or so
Alternative
A quick solution would be to integrate a static server, but this is a recent fork of the react-native-static-server that only works in vanilla react native.
Trying to configure facebook connect in my app. newbie to xcode.
I should mention that i am using React-native.
I checked the configs 10 times
still getting this error:
Exception thrown while invoking newSession on target <FacebookLoginManager: 0x7c2579d0> with params (
5
): fb1413783292275789 is not registered as a URL scheme. Please add it in your Info.plist
React-native code :
var FacebookLoginManager = require('NativeModules').FacebookLoginManager;
login() {
FacebookLoginManager.newSession((error, info) => {
if (error) {
this.setState({result: error});
} else {
this.setState({result: info});
}
});
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress={this.login}>
<Text style={styles.welcome}>
Facebook Login
</Text>
</TouchableHighlight>
<Text style={styles.instructions}>
{this.state.result}
</Text>
</View>
);
}
I think the solution is
Replace URL types -> CFBundleURLTypes, URL Schemes -> CFBundleURLSchemes
even though it changes back automatically.
hit the play button and that’s it