I use a stack navigation from reactnavigation. When opening Screen X I want to automatically update "let userAnswer = "";" with a string within a webview. However, the code won't run. It does run and updates the variable when I save my file in visual studio.
I make the code run via useEffect. This is the webview in my WebViewComponent:
import { useState, useContext, useEffect } from "react";
import { StyleSheet, Text, View, Pressable } from "react-native";
import { WebView } from "react-native-webview";
import { FontAwesome } from "#expo/vector-icons";
import DarkModeContext from "../store/darkmode";
const html = `
<!DOCTYPE html>
<html>
...
<script>
function update() {
var idoc = document.getElementById('iframe').contentWindow.document;
idoc.open();
idoc.write(editor.getValue());
idoc.close();
}
let userAnswer = "";
Here is the useEffect that is supposed to run in WebViewComponent:
useEffect(() => {
webref.injectJavaScript(props.defaultContent);
console.log("mounted")
},[]);
return (
<View>
<View style={{ width: "100%", height: "65%", marginTop: 0 }}>
<WebView
ref={(r) => (webref = r)}
androidHardwareAccelerationDisabled={true} // To prevent crash when opening screen
scalesPageToFit={false}
scrollEnabled={false}
source={{ html }}
/>
</View>
I get default content prop from the screen I am using the wWebViewComponent in:
<WebViewComponent
defaultContent = {`userAnswer += "Hello World"
editor.setValue(userAnswer, 1);
`}
/>
It acts as if the component doesn't mount when navigating to it via reactnavigation, though this is of course not the case. The console.log does return "mounted". Any ideas?
Thanks!
Related
i have a problem when i want to send data of a URL so when you go to the next page your show the spesific url, im using expo cli not react native cli
website.tsx
import React, { useState } from "react";
import { Dimensions } from "react-native";
import { Div, Text } from "react-native-magnus";
import WebView from "react-native-webview";
const Website = ({YOUR_URL}) => {
return (
<WebView
rautomaticallyAdjustContentInsets={false}
source={{uri: YOUR_URL}}
style={{marginTop: 20, height: "100%", width: "100%"}}
onLoad={console.log("Loaded")}
startInLoadingState={true}
javaScriptEnabled={true}
/>
);
};
export default Website;
and this is my button to send the data
<Button w={wp(40)} h={hp(5.5)} ml={hp(2)}
onPress={() => navigation.navigate('Website', {YOUR_URL:data?.external_link})}
// onPress={() => Linking.openURL(data?.external_link)}
>
<Text allowFontScaling={false} fontSize={16} color="#fff">
Selengkapnya
</Text>
if you can help me, thank you very much
For me it worked by passing it precise values for width and height for Webview component and not percentage values. For managing the different display sizes I think you should use "scale".
I'm trying to add a tooltip component to my react native project, I installed React Native Elements to do this. I know it's installed correctly because the Divider component worked perfectly fine. For some reason though, the tooltip doesn't seem to work right, there are no errors but it simply doesn't do anything when I tap on the tooltip.
My entire component is here:
import React from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
} from 'react-native';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import { Tooltip, Text } from "#rneui/themed";
import {Colors} from './Colors';
const InfoTooltip = ({ label, info='' }) => {
return (
<View style={styles.inputLine}>
{ info != '' &&
<Tooltip popover={<Text>Tooltip Info</Text>}>
<Text>Press</Text>
</Tooltip>
}
{ info === '' &&
<Text style={styles.inputLabel}>{label}:</Text>
}
</View>
);
};
const styles = StyleSheet.create({
inputLine: {
flex: 1,
flexDirection: 'row',
},
inputLabel: {
color: Colors.Dove_Gray,
marginTop: 2,
fontSize: 14,
},
infoText: {
color: Colors.Silver,
fontSize: 12,
},
});
export default InfoTooltip;
I'm testing it on iOS and I see the text that says "Press", but when tapped, nothing happens, no popover, no error.
When setting visible to true, the tooltip is shown when I first render the app, but it locks the app up and I can no longer tap anything or scroll.
I'm not sure what I'm doing wrong, Thanks!
Starting with React Native Elements version 4.0, Tooltip is stateless. This means you need to use useState. You should declare a variable, like:
const [open, setOpen] = useState(false);
And include visible, onOpen & onClose Props for it to work:
<Tooltip
visible={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
popover="This is the popover text"
/>
More info in the Migration Guide.
I’ve successfully managed to send a message from React Native (RN) to a WebView.
What I’m struggling with, is getting the message back from the WebView to RN. There’s no errors showing - it’s just that the message never gets through.
Here is the code which I’m using:
React Native code
<WebView
source={Platform.OS === 'ios' ?
{ uri: RNFS.LibraryDirectoryPath + "/offlineplayer/index.html" } :
{ uri: 'file:///android_asset/offlineplayer/index.html' }
}
ref={(webView) => this.webView = webView}
originWhitelist={["*"]}
javaScriptEnabled={true}
domStorageEnabled={true}
startInLoadingState={true}
useWebKit={true}
//scrollEnabled={false}
onLoad={() => this.sendPostMessage()}
allowFileAccess={true}
allowUniversalAccessFromFileURLs={true}
allowFileAccessFromFileURLs={true}
allowingReadAccessToURL={RNFS.LibraryDirectoryPath}
onMessage={this.onMessage}
/>
onMessage(event) {
alert(event.nativeEvent.data);
}
WebView Code
window.postMessage("Post message from web", "*");
The only way to communicate the web with react native is by using window.ReactNativeWebView.postMessage and the onMessage prop.
but window.ReactNativeWebView.postMessage only accepts one argument, which must be a string.
So change window.postMessage to window.ReactNativeWebView.postMessage to fix your issue.
For more information check this sample code
import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
export default class App extends Component {
render() {
const html = `
<html>
<head></head>
<body>
<script>
setTimeout(function () {
window.ReactNativeWebView.postMessage("Hello!")
}, 2000)
</script>
</body>
</html>
`;
return (
<View style={{ flex: 1 }}>
<WebView
source={{ html }}
onMessage={event => {
alert(event.nativeEvent.data);
}}
/>
</View>
);
}
}
Hope this helps you. Feel free for doubts.
I am working with react native, and I am using a video component from the expo. during this how I can change the value for URI attribute dynamically
(As you mentioned in the comment that you already solved the problem and want to play youtube videos)
You can use WebView to play Youtube video.
Working demo: https://snack.expo.io/Syhzx-VvX
Here is the sample code:
import React, { Component } from 'react';
import { StyleSheet, View, WebView, Platform } from 'react-native';
export default class App extends Component<{}> {
render() {
return (
<View style={{ height: 300 }}>
<WebView
style={ styles.WebViewContainer }
javaScriptEnabled={true}
domStorageEnabled={true}
source={{uri: 'https://www.youtube.com/embed/YE7VzlLtp-4' }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
WebViewContainer: {
marginTop: (Platform.OS == 'android') ? 20 : 0,
}
});
Otherwise if you don't want to use WebView, use a third party package like react-native-youtube
I'm trying to use ToolbarAndroid on my React Native Project.
But the Toolbar is not being rendered. Am I missing anything?
Here's the snippet:
toolbar.js
import React, {
Component
} from 'react';
import {
View,
Text,
ToolbarAndroid,
StyleSheet
} from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
export default class Toolbar extends Component {
render() {
return(
<Icon.ToolbarAndroid
title = {this.props.title}
titleColor = 'black'
navIconName = "android-menu"
style = {styles.toolbar}
/>
);
}
}
const styles = StyleSheet.create({
toolbar: {
backgroundColor: 'firebrick',
height: 56
}
});
I've then imported this file to my main file where the component gets rendered.
UPDATE
I applied width to the toolbar and now it's showing. But why should we have to use width and what's the appropriate value to make the toolbar render along whole screen ?
Is it a bug ?
Updated style
const styles = StyleSheet.create({
toolbar: {
backgroundColor: 'firebrick',
height: 56,
width: 300
}
});
This is a working example of such component (but not the same):
<ToolbarAndroid
title = {this.props.title}
titleColor = 'black'
navIconName = "android-menu"
>
<View style={styles.toolbar}>
<Text>{this.props.title}</Text>
</View>
</ToolbarAndroid>
You have to pass a child view to ToolbarAndroid. Also using color names like firebase is not supported out of the box.