There is a standard WebView and I want to implement an update in it using a swipe down, well, about like on a FlatList (onRefresh), but I don't know how to do it.
export default function QrScreen () {
return (
<View style={styles.ert__webv__container}>
<View style={styles.ert__webv__main}>
<WebView
originWhitelist={['*']}
source={{ uri: `${e_glav.e_url}/eqrcode/index.html` }}
/>
</View>
</View>
);
}
Related
I am currently developing an application that enables the user to view sports videos and I would like to implement the following feature :
The user is presented with a list of videos but can only see the next ones if he first views the first ones. At the moment I have simply added a lock on the thumbnail of the videos that should be blocked but the user can still click a bit aside and play the video. I have look through all the props of the package react-native-video but didn't see any that would fit my need. At
Would you have ideas ?
Here is also a sample of the code :
<View style={styles.videoRow}>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2013.mp4?alt=media&token=da011245-fce2-4796-a78b-3abc518c73ef'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate3(playbackStatus)}
/>
{!debloque3 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
<View>
<Video
style={styles.image}
source={{uri: 'https://firebasestorage.googleapis.com/v0/b/roundpower-88ef9.appspot.com/o/BootyAbsPower%2FTuto%2014.mp4?alt=media&token=cd3d12be-05fd-4fc4-91d9-cd518faf14ce'}}
useNativeControls
resizeMode="contain"
isLooping
onPlaybackStatusUpdate={(playbackStatus) => onPlaybackStatusUpdate4(playbackStatus)}
/>
{!debloque4 ? <View>
<FontAwesome5 name="lock" size={40} color="white" style={styles.icon}/>
</View> : <Text>''</Text>}
</View>
</View>
Yeah, a really easy way you can do this is just prevent the thing you don't want to the user to tap on from receiving any pointerEvents (i.e. touch events).
A really simple quick-and-dirty way of doing this like so:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
{/* Obscure the TouchableOpacity with a View which completely covers it */}
{shouldPreventTouches && <View style={StyleSheet.absoluteFill} />}
</View>
</View>
);
Alternatively, you could also just wrap the <Video /> component within a <View /> and useState to toggle between pointerEvents="none" and pointerEvents="auto". Both have the same effect of preventing touch information from being passed to children:
import * as React from 'react';
import {TouchableOpacity, StyleSheet, View} from 'react-native';
const onPress = () => console.error("I don't want this to happen.");
export default () => (
<View style={[StyleSheet.absoluteFill, styles.center]}>
{/* red box in the middle */}
<View
pointerEvents={shouldPreventTouches ? 'none' : 'auto'}
style={{width: 50, height: 50, backgroundColor: 'red'}}>
<TouchableOpacity
onPress={onPress}
style={StyleSheet.absoluteFill}
/>
</View>
</View>
);
Depends what you prefer.
You could reuse the logic you have for showing the lock or not on the video element, and render the video only if it is unlocked.
<View>
{
debloque ? <Video/> : <FontAwesome5 name="lock" size={40} color="white" style={styles.icon} />
}
</View>
Alternatively you could set the source of the video to null until it is unlocked, to initialize the player but prevent anything to be played, according to the docs.
I want to use a WebView to display a youtube playlist whenever I click on a image. But I can't manage to display the WebView, only a blank white page. Here is the code :
showBelier(){
this.setState({ishowing:true});
return(
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
/>
)}
<View style = {{flexDirection: 'row', justifyContent:'space-between', position:'relative'}}>
<TouchableOpacity onPressIn={() => this.setState({belier: !this.state.belier})} onPress={()=> this.showBelier()}>
<Image style = {styles.image} source={ this.state.belier === true ? require("../Images/couleurs/icons8-belier-100.png")
: require("../Images/gris/beliergris.png")}/>
</TouchableOpacity>
</View>
Thanks in advance !
If you have a render method like showBelier inside another function of an element it won't be visible. Please include the method inside your render like this:
<View>
<TouchableOpacity onPress={() => this.setState({belier: !this.state.belier})}}>
....
</TouchableOpacity>
{this.showBelier()}
</View>
And adjust your method like this:
showBelier(){
if(this.state.belier) {
return(
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
source={{ uri: "https://www.youtube.com/watch?v=WiOKM4SvC5U&list=PLSlVQ0kIy6qx3s6EHtgStY2kzVfXKwuFD" }}
/>
)}
}
I have a React Native App built with ExpoKit SDK 32. I have a main switch navigator (from React Navigation) which starts with a Loading Screen, there I do some business logic to decide what screen should load next (Screen A or B), on the next screen I disable the Splash Screen.
The problem is: Whenever I move from the Loading Screen to screen A, I get a White flash.
I have not seem it happen on iOS, only on Android.
Screen A has a imageBackground Component on the whole screen. The image is cached and its the same as the splash screen.
I've tried rendering an image equal to the SplashScreen on the background of the Loading Screen. Same result.
Then I put on my componentDidMount of Screen A SplashScren.hide(). Same result.
The best outcome as been putting 'SplashScreen.hide()' on the onLoadEnd of my background Image of Screen A.
Any help is appreciated! Is there a better way to deal with this kind of situation involving the Switch Component on React Navigation?
This is how my Screen A looks now:
async imageLoaded() {
SplashScreen.hide();
try {
const usuario = await SecureStore.getItemAsync(LOGIN_USUARIO_LOCAL_AUTH);
if (usuario) {
await this.localAuth();
}
} catch (err) {
// faz nada
}
}
....
render() {
const { usuario, senha } = this.state;
const { logando, localAuthHardware } = this.props;
const labelHardware = localAuthLabel(localAuthHardware);
return (
<SafeAreaView style={styles.safeArea}>
<ImageBackground
source={require('../../../assets/images/start.png')}
resizeMode="cover"
style={styles.container}
imageStyle={styles.container}
onLoadEnd={this.imageLoaded}
fadeDuration={0}
>
<KeyboardAwareScrollView alwaysBounceVertical={false} keyboardShouldPersistTaps="handled">
<Image
source={require('../../../assets/images/baladapp-icone.png')}
style={styles.baladappicone}
resizeMode="contain"
fadeDuration={0}
/>
<View style={styles.baladappView}>
<Image
source={require('../../../assets/images/BaladAPP.png')}
resizeMode="contain"
style={styles.baladapp}
fadeDuration={0}
/>
<Text style={styles.produtorText}>PRODUTOR</Text>
</View>
<View style={styles.formView}>
<TextInput
placeholder="Usuário"
style={[styles.input, { elevation: 1.3 }]}
underlineColorAndroid="transparent"
value={usuario}
onChangeText={this.changeUsuario}
keyboardType={Platform.OS === 'ios' ? 'email-address' : 'visible-password'}
autoCorrect={false}
autoCapitalize="none"
/>
<PasswordInputField
placeholder="Senha"
style={styles.input}
enablesReturnKeyAutomatically
underlineColorAndroid="transparent"
value={senha}
onChangeText={this.changeSenha}
containerStyle={[styles.containerPasswordStyle, { elevation: 1.3 }]}
onSubmitEditing={this.login}
/>
<TouchableOpacity
onPress={this.abrirRecuperarSenha}
style={styles.esqueceuTextView}
hitSlop={hitSlop15}
>
<Text style={styles.esqueceuText}>Esqueceu a senha?</Text>
</TouchableOpacity>
<Button
text="ACESSAR SISTEMA"
containerStyle={styles.button}
textStyle={styles.buttonText}
onPress={this.login}
loading={logando}
loadingColor={colors.branco}
/>
{localAuthHardware.length > 0 && (
<TouchableOpacity
onPress={this.localAuth}
style={styles.localAuthView}
hitSlop={hitSlop15}
>
<Text style={styles.esqueceuText}>{`Acessar com ${labelHardware}`}</Text>
</TouchableOpacity>
)}
</View>
</KeyboardAwareScrollView>
</ImageBackground>
</SafeAreaView>
);
}
I have a simple WebView and would like to know which word in it was tapped. For example if a user taps on any of the words in the article on the picture, such as "balloon", I would like to capture that.
Here is the code and the render.
export default class App extends React.Component {
render() {
return (
<View style={{top:100, height: 500, backgroundColor:'red' }}>
<WebView
source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
style={{height:"200", marginTop: 20}}
/>
</View>
);
}
}
UPDATE:
This is how I got WebView to communicate back the JS events based on #pritesh answer.
<WebView
source={{uri: 'https://www.reuters.com/article/us-art-banksy/we-just-got-banksy-ed-balloon-girl-painting-self-destructs-at-sale-idUSKCN1MG0B4?feedType=RSS&feedName=artsNews'}}
style={{height:"200", marginTop: 20}}
javaScriptEnabled={true}
injectedJavaScript={`document.body.addEventListener('click',
function(e){
window.postMessage("Message from WebView","*");
console.log(e);
})`}
onMessage={e => console.log("message", e)}
/>
On top of my head one approach you can try is by using the injectJavascript or injectedJavascript props of WebView.So you can register some kind of listener on the body and the use it to detect what is being pressed, like:
<WebView
ref={c => this._webview = c}
javaScriptEnabled={true}
injectedJavaScript={`document.body.addEventListener('click', function(e){
console.log(e)
})`}
/>
But you check to research how to pass the callback from Webview to React.
I've been testing out the WebView component, but I can't seem to get it to render things.
Sample here: https://snack.expo.io/r1oje4C3-
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView source={{html: '<p>Here I am</p>'}} />
<WebView source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}
When running the above example in Expo, neither of the two WebView components seem to render. What am I doing wrong?
It seems that you need to provide a width style parameter, like so :
<WebView
source={{uri: 'https://github.com/facebook/react-native'}}
style={{width: 300}}
/>
Note that you might have to provide a height style parameter as well. You can also add flex: 1 to the style.
add style prop with flex: 1 on WebView
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url. You get a new url each time you save.
</Text>
<WebView style={{flex: 1}} source={{html: '<p>Here I am</p>'}} />
<WebView style={{flex: 1}} source={{ uri: 'http://www.google.com'}} />
</View>
);
}
}