Presently I am using Linking but it is opening the url outside the app, I want this app to be opened within the app without showing the URL.
But unable to open Webview on TouchableOpecity onPress event in React-Native. Do I need to add a page and then open the page with URL ?
Can anyone please help.
I am considering the simplest of cases where i am rendering a single component and no navigator is being used.
class ABC extends Component {
constructor(props){
super(props)
this.state = {
check : false
}
}
renderWebView(){
if(this.state.check){
return(
<WebView
source={{uri: 'your url goes here'}}
style={{marginTop: 20}}
/>
);
}else {
return(
<TouchableOpacity
onPress={()=>this.setState({check: true})}>
<Text>Open WebView</Text>
</TouchableOpacity>
);
}
}
render() {
return (
<View style={{flex:1}}>
{this.renderWebView()}
</View>
);
}
}
You can use one of the Navigators and treat the webview component as one route.
Related
I'm pretty new to the idea of states in react native and have trouble using them to change the states of the components. I have three text components one which is a question and another two are answers (yes and no), and another text component that checks if my answer to the question is write, so the check text component. When I click on yes for a certain question the state of the last check component should change to 'right' if the answer was yes or to 'wrong' if the answer is no. So basically, this is what I want to do :
So, the idea is when i click on yes and then check the pop-up should be this. This is the code I have so far:
import React, {useState} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
export default function App() {
const [myState, setMyState] = useState('Yes');
const [myState2, setMyState2] = useState('Right');
const updateState = () => {
let tempStr = myState;
if (tempStr == "Yes"){
setMyState2('Right');
}
else{
setMyState2('Wrong');
};
}
return (
<View style={{alignItems: 'center', top: 150}}>
<Text>Is the earth round?</Text>
<Text mystate={setMyState}>Yes</Text>
<Text mystate={setMyState}>No</Text>
<Text mystate2={setMyState2}>Check</Text>
</View>
);
}
Currently, none of my text components seem to work.
Can anyone tell me how it could be done. Thanks!
I believe this will sufficiently help you with your question. useEffect is basically the new ComponentWillUpdate for hooks, and you should use it to check for when a state in a functional component updates. On the other hand, your code wasn't working because you were passing a mystate prop to the Text component. There is simply no mystate prop, and there also isn't a command to tell the app that you are pressing the text. You can simply use the onPress prop. Personally I prefer using a TouchableOpacity, but you could use a Button or even just pass it into the Text component itself.
import React, { useState, useEffect } from 'react'
import { View, Text, TouchableOpacity, Alert } from 'react-native'
export default function App() {
const [myAnswer, setMyAnswer] = useState('Who knows')
const [correct, setCorrect] = useState('')
useEffect(() => {
if (myAnswer == 'Who knows') setCorrect('Please answer!')
else if (myAnswer == 'Round') setCorrect('Correct!')
else if (myAnswer == 'Not round') setCorrect('Wrong :(')
}, [myAnswer])
return (
<View style = {{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
<Text>Is the Earth round?</Text>
<TouchableOpacity
onPress = {() => setMyAnswer('Round')}>
<Text>Yes</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {() => setMyAnswer('Not round')}>
<Text>Nope</Text>
</TouchableOpacity>
<TouchableOpacity
onPress = {() => { Alert('Your answer was...', correct) }}>
<Text>Check My Answer</Text>
</TouchableOpacity>
</View>
)
This is my source code:
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
isVisible: false,
};
}
openModal = () => {
this.setState({isVisible: true});
}
openPicker = () => {
this.setState({isVisible: false});
ImagePicker.openPicker({
mediaType: "video",
}).then((video) => {
console.log(video);
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.openModal}>
<Text>Choose Image</Text>
</TouchableOpacity>
{
this.state.isVisible &&
<Modal style={styles.modal}>
<View style={styles.conModal}>
<TouchableOpacity style={styles.touch} onPress={this.openPicker}>
<Text style={styles.text}>Open Gallery</Text>
</TouchableOpacity>
</View>
</Modal>
}
</View>
);
}
}
When user tap "Choose Image" button, app will show "Choose Image" modal which allow user choose "Open Gallery" button or other buttons such as "Open Camera",...
After user choose "Open Gallery" button, app will close "Choose Image" modal by this.setState({isVisible: false}) before open Gallery.
It's working perfectly on Android. But it only work once time on iOS. Next time, app also show Gallery but it's closed immediately.
If i change logic to: open Gallery before close "Choose Image" modal by this.setState({isVisible: false}), it will work. But my customer don't accept it.
Please help me.
Thanks.
open gallery after some delay. I think it may work
openPicker = () => {
this.setState({isVisible: false});
// open gallery after some delay.
setTimeout(()=>{
ImagePicker.openPicker({
mediaType: "video",
}).then((video) => {
console.log(video);
});
},700) // you can change delay time as per your requirement
}
I'm a student and I developing a mobile app with React Native.
My target is this image:
(https://cdn.discordapp.com/attachments/403580119714889736/407172407049060352/Apercu_bingo_2_choisir_invites.jpg)
I could write the code with independent buttons, the problem appears when I want to add different images to each button. (I'm waiting for the back dev to create a boucle to add all the images with the shortest code possible (looking forward for some loop ideas ;) ).
import React, {Component} from 'react';
import Button from 'react-native-button';
import
{
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight,
Alert,
Image,
ScrollView,
TouchableWithoutFeedback
}
from 'react-native';
import styles from './Styles';
class ToggleButton extends React.Component {
render() {
return (
<View style={styles.cont2}>
<TouchableHighlight style={styles.bubblechoice} onPress={this.props.onPress}>
<View style={[styles.overlay, this.props.selected ? {backgroundColor: '#3C1088'} : {}]}>
<Image style={styles.bubblechoice} source={require('./photo1.jpg')}/>
</View>
</TouchableHighlight>
</View>
);
}
}
export default class MyComponent extends Component
{
constructor(props) {
super(props);
this.state = {
inv1: false,
inv2: false,
};
}
updateChoice(type) {
let newState = {...this.state};
newState[type] = !newState[type];
this.setState(newState);
}
render() {
return (
<View style={styles.containerinvite}>
<ScrollView contentContainerStyle={styles.list}>
<ToggleButton label='inv1' onPress={() => { this.updateChoice('inv1') } } selected={this.state.inv1}/>
<ToggleButton label='inv2' onPress={() => { this.updateChoice('inv2') } } selected={this.state.inv2}/>
<TouchableWithoutFeedback
onPress={() => {Alert.alert('OK');}}>
<View style={styles.button}>
<Text style={styles.buttonText}>ok</Text>
</View>
</TouchableWithoutFeedback>
</View>
);
}
onPress1 = () => {
this.setState({
inv1: !this.state.inv1
});
}
onPress2 = () => {
this.setState({
inv2: !this.state.inv2
});
}
}
The result that I have is:
https://scontent-cdt1-1.xx.fbcdn.net/v/t35.0-12/28580783_10216099091730046_1132055272_o.png?oh=fdb33bbe2b82f29cac1d80b8e25f269e&oe=5A9B2488&dl=1, https://www.facebook.com/
The thing is that the View that changes the status color can't be without children, so I can't just change the image from there. I tried different options but I'm still can manage different photos with independents buttons.
From your parent component you should pass your photos to the child component and use that prop for your source instead of
<Image style={styles.bubblechoice} source={require('./photo1.jpg')}/> =>> This is wrong.
<Image style={styles.bubblechoice} source={require(photoUrls)}/> =>> It should be like this.
If you have further questions about it do not hesitate to ask.
I am using rn-viewpager for tabs in react-native. But I am having issues in opening new page on each tab selected.
I am using following link: react-native-viewpager
export default class ViewPagerPage extends Component {
render() {
return (
<View style={{flex:1}}>
<IndicatorViewPager
indicatorPosition="top"
style={{flex:1, paddingTop:20, backgroundColor:'white'}}
indicator={this._renderTitleIndicator()}
>
<View style={{backgroundColor:'cadetblue'}}>
<Text>page one</Text>
</View>
<View style={{backgroundColor:'cornflowerblue'}}>
<Text>page two</Text>
</View>
<View style={{backgroundColor:'#1AA094'}}>
<Text>page three</Text>
</View>
</IndicatorViewPager>
</View>
);
}
_renderTitleIndicator() {
return <PagerTitleIndicator titles={['Page1', 'Page2', 'Page3']} />;
}
return (
<PagerTabIndicator
tabs={tabs}
textStyle={{color:'#999'}}
selectedTextStyle={{color:'#111'}}
iconStyle={{width:25, height:25, tintColor:'#999'}}
selectedIconStyle={{width:25, height:25, tintColor:'#111'}}
/>
);
}
}
I want to open page.js file on click of every tab.
I want to add WebView in my app and want to scale the page to fit into my mobile.
I use scalesPageToFit to do this, but it don't work in Android.
I'm using 0.30 verison of react-native.
this is my code:
class Test extends Component {
constructor(props) {
super(props);
this.state = {scalesPageToFit: true};
}
onNavigationStateChange(navState) {
this.setState({
scalesPageToFit: true
});
}
render() {
return (
<View>
<WebView
automaticallyAdjustContentInsets={false}
scalesPageToFit={this.state.scalesPageToFit}
onNavigationStateChange={() => this.onNavigationStateChange()}
style={{height: 500}}
source={{uri: "http://www.avosannonces.fr"}}
/>
</View>
);
}
}
This is what I get : This is what i get with scalesPageToFit in react-native