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".
Related
I am new to React Native and i am having trouble with the following error message:
text string must be rendered within a <Text> component
This is my component:
import React from "react";
import { Text, StyleSheet, View, Button } from "react-native";
const HomeScreen = () => {
return (
<View>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
);
};
const styles = StyleSheet.create({
text: {
fontSize: 30,
},
});
export default HomeScreen;
My strings are wrapped within a Text component and the error message persists. Any typo am i not seeing or doing anything wrong?
Your error is likely somewhere else in your app. one way to test this is to comment out the component inside of your App component or wherever your Homescreen component is being called. It's more likely that wherever you're mounting HomeScreen, there is extraneous text. Perhaps something you missed when deleting the boilerplate code.
Give some width and height to your view ,or try give a flex of 1 :
Hope it helps.
<View style = {{flex:1}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
or
<View style = {{width:'100%',height:'100%'}}>
<Text style={styles.text}>Hey!</Text>
<Button title='Go components demo'/>
</View>
using https://github.com/invertase/react-native-apple-authentication
import React from 'react';
import { View } from 'react-native';
import { AppleButton } from '#invertase/react-native-apple-authentication';
async function onAppleButtonPress() {
}
function App() {
return (
<View>
<AppleButton
buttonStyle={AppleButton.Style.WHITE}
buttonType={AppleButton.Type.SIGN_IN}
style={{
width: 160, // You must specify a width
height: 45, // You must specify a height
}}
onPress={() => onAppleButtonPress()}
/>
</View>
);
}
Maybe you don't need this answer anymore, but currently this error still happens and the solution I found was:
import {appleAuth} from '#invertase/react-native-apple-authentication';
<View>
{appleAuth.isSupported && (
<Button title="Sign in with Apple" onPress={AppleSignIn} />
)}
</View>
The AppleButton seems to work fine in production:
<AppleButton
buttonStyle={AppleButton.Style.BLACK}
buttonType={AppleButton.Type.SIGN_IN}
style={styles.appleButton}
onPress={AppleSignIn}
/>
It says in the library docs that it is only available in React Native v0.60+.
// How do you set the image on the top of the screen without losing the aspect ration?
[![import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';
export default class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={{flex:1}}>
<Image
resizeMode="contain"
style={{flex:1}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
</View>
);
}
}
// Skip these lines if you are using Create React Native App.
AppRegistry.registerComponent(
'DisplayAnImageWithStyle',
() => DisplayAnImageWithStyle
);][1]][1]
// Here the liked image shows that it is not fitting well... it is not showing from the top... do you have any idea how I can set the image without any padding?
[1]: https://i.stack.imgur.com/LYNKn.png
So you might wanna use resizeMode: 'cover' with a height and width.
<Image
resizeMode="contain"
style={{ width: 200, height:220, resizeMode: 'cover'}}
source={{uri: 'https://i.pinimg.com/originals/ba/84/1c/ba841cc07934b508458a7faea62141a8.jpg'}}
/>
Here's an example https://snack.expo.io/HJTFg9tU4
Let me know if this works for you.
I am trying to display a video in react-native. But having some issues. 'till now this what I did: I install react-native-video. and also linked it.
And this is the codes:
import React, {Component} from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
Button,
Alert} from 'react-native';
import Video from 'react-native-video';
export default class App extends Component<Props> {
Open() {
}
render() {
return (
<View style={styles.container}>
<Text>
Open the video
</Text>
<Button
onPress={this.Open}
title="Press Me"
/>
<Video
source={{ uri:"https://www.youtube.com/watch?v=HIB8RBhPkBA"}}
resizeMode={"cover"}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor : 'white',
alignItems: 'center',
justifyContent: 'center'
},
});
There is no error in the emulator. But also there is no video too. Is there anything that I did wrong about setup?
unfortunately, react-native-video will not work since the source uri is a link to the youtube page. unless you can procure the video as an asset and append its extension to its url (...video.mp4), it should work. see this.
for a quick fix, you can use the webview component to embed the link.
For displaying youtube videos, you can use this package instead
react-native-youtube
API
import YouTube from 'react-native-youtube'
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
For getting the youtube id from the url, you can use
var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
video_id = video_id.substring(0, ampersandPosition);
}
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