I have to redirect from my react native app to a third party website which is expecting some values from me
It is already implemented on my main website
Now I want to do it from my expo mobile app
I am doing like this in my website
const mainApp = ()=>{
const goToThird = ()=>{
$("#myform").submit();
}
return(
<button onPress={goToThird}>Verify</button>
)}
//form is hidden
<form id="myForm" action="https://thirdparty.com/verify">
<input type="hidden" name="email" value="myemail#gmail.com"/>
</form>
In the above way third party gets the values and everything is ok
In expo app i have tried doing the same thing with linking by making a query params url but it behaves as a get type url and third party is not able to get my things basically
How can I make a post request such that website is opened in browser when some one clicks on verify button in my expo app.
Tried:
import React from 'react'
import {Linking,View,Button} from 'react-native'
export const Test = ()=>{
const perform = ()=>{
Linking.openURL('https://thirdparty.com/verify?email=myemail#gmail.com');
}
return(
<View>
<Button title="Redirect" onPress={perform}></Button>
</View>
)
}
So by doing the above process it opens the browser but it is a get request and goal isn't achieved.
NOTE: My main website is in React.js
Related
*I am developing an application in React, I was asked to use an iFrame that redirects me to a site external to my app. However, when I check the iFrame, it loads the application itself, not the site I have referenced.
Any idea what could be the problem?
export default function CallPicker_iFrameC(props){
const {iframeSource = '<iframe src="https://admin.callpicker.com/dashboard" width="100%" height="850px"></iframe>'} = props;
return(
<div dangerouslySetInnerHTML={{__html: iframeSource}}></div>
)
}
I tried using i frame but its not asking permission for camera or anything else.
But If we load that url in new page its working fine but not when I open that URL in iframe it should open camera and run as web ar for now its showing model only as webGL
import React from "react";
const About = () => {
return (
<>
<iframe
id="my-iframe"
allow="camera;gyroscope;accelerometer;magnetometer;xr-spatial-
tracking;microphone;"
allowFullScreen={true}
src="https://dickenson.xs-worldwide.com/"
width={"100%"}
height={"650px"}
frameBorder={0}
></iframe>
</>
);
};
export default About;
I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.
What I currently have is very simple. I have the google script on my index.html
and then my ad component which I'm calling under my App component.
import React from 'react';
export default class Ad extends React.Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render () {
return (
<div className='ad'>
<ins className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-4543556906953539'
data-ad-slot='3566322911'
data-ad-format='auto'
data-full-width-responsive="true"
/>
</div>
);
}
}
I was reading this thread and the answer was use googletags to manage served ads:
Using google adsense with React + React Router
However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?
There is a similar sounding question but my problem is different.
While running the react app on localhost it navigates from the following page,
The submit button has the code window.location.href = "/ahana-psychometry/assessments/";
And so it navigates to the page:
But when I press on the submit button on the page at gh-pages, the url changes from blenderous.github.io/ahana-psychometry/create to blenderous.github.io/ahana-psychometry/assessments/. but
but the page displays the 404 message instead:
As you are using react router, the best way is using its methods.
Here is an example, which describes using withRouter HOC to redirect to another page:
import {
withRouter
} from 'react-router-dom'
class Sample extends React.Component {
handleSubmit = (e) => {
...
this.props.history.push('/ahana-psychometry/')
}
render() {
return (
<div>
<h1>Form</h1>
<Form onSubmit={this.handleSubmit} />
</div>
)
}
}
export default withRouter(Sample)
In my react application, when I click on an external link suppose http://www.example.com/about, I do not want it to redirect to that website but I want that about page to render as a popup in my react application. How can I approach this?
You might make a wrapper component for the links that would check if the href prop matches your website location or goes to a 3rd party site, and renders either a normal a tag or a modal dialog with an iframe inside.
Eg. Link.js
import React, { Component, Fragment } from 'react'
import Modal from '...' // any of the available modal component for react
export default class Link extends Component {
state = { isOpen: false }
render () {
const url = new URL(this.props.href)
if (url.hostname === WEBSITE_HOSTNAME) return (
<a href={this.props.href}>{this.props.children}</a>
)
return (
<Fragment>
// you could also use an <a> here if you want users to be able to open the link in a new tab with a right click
<button onClick={() => this.setState({ modalOpen: true })}>{this.props.children}</button>
<Modal isOpen={this.state.isOpen}>
<iframe src={this.props.href} />
</Modal>
</Fragment>
)
}
}
Even better, split it into two components as there's no need for regular links to have any state...