score:0
Accepted answer
the only doable way i found is a multiple steps process.
public web page
create and host a public web page doing the following:
- fetch the browser info onto an object
- redirect to the given redirect url with the info
in a nutshell:
<!doctype html>
<html lang="en">
<body>
<script type="text/javascript">
const browserinfo = {
// currently unable to fetch the default value automatically.
// @see https://developer.mozilla.org/en-us/docs/web/http/content_negotiation/list_of_default_accept_values
acceptheader: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8',
javaenabled: window.navigator.javaenabled(),
language: window.navigator.language,
colordepth: window.screen.colordepth,
screenheight: window.screen.availheight,
screenwidth: window.screen.availwidth,
timezoneoffset: window.navigator.timezoneoffset,
useragent: window.navigator.useragent,
javascriptenabled: true,
}
console.log('browserinfo', browserinfo);
const urlparams = new urlsearchparams(window.location.search);
if (urlparams.has('redirecturl')) {
const redirecturl = new url(urlparams.get('redirecturl'));
object.entries(browserinfo).foreach(([key, value]) => {
redirecturl.searchparams.append(key, value);
});
document.location = redirecturl.tostring();
}
</script>
</body>
</html>
expo app redirect fetching
on expo, you have two things to do:
- start an event listener to fetch the redirect
- open a
webbrowser
instance to the previous public page
example:
import react, { fc, usecallback } from 'react';
import * as linking from 'expo-linking';
import * as webbrowser from 'expo-web-browser';
import * as querystring from 'query-string';
import {
button,
} from '@kidways/apps-components';
import {
buttonprops,
view,
} from 'react-native';
import { usefocuseffect } from '@react-navigation/native';
const app: fc = () => {
const urleventhandler = (event) => {
const parsedurl = querystring.parseurl(event.url);
const path = parsedurl.url.split('/--/')[1];
if (
path === 'browser-info'
) {
// at this point, you have all the needed information.
console.log('browser-info', parsedurl.query);
}
};
usefocuseffect(
usecallback(() => {
linking.addeventlistener('url', urleventhandler);
return () => linking.removeeventlistener('url', urleventhandler);
}, []),
);
const handlebrowserinfotest: buttonprops['onpress'] = () => {
webbrowser.openbrowserasync(
'https://your.domain/browser.html?redirecturl='
+ linking.createurl('browser-info')
);
}
return (
<view>
<button
title="browser info"
onpress={handlebrowserinfotest}
/>
</view>
);
};
with this code, you have a way to fetch the browser info just by pressing the button.
this solution is not ideal because of the user browser opening to achieve that, but i am afraid there is currently no other way.
Source: stackoverflow.com
Related Query
- 3DS2 BrowserInfo data with React Native and Expo
- react native post form data with object and file in it using axios
- Building hybrid React apps for iOS and Android with native performance
- React with MVC data annotations and unobtrusive validation
- Redux in React Native app is very slow with lots of data
- How to use vw and vh css with React Native
- How to nest Scene and navigate with direction='vertical' in React Native Router Flux?
- Why is my React component render called twice, once without data and then later with data, but too late exception?
- React Native Web with Next JS and React Navigation
- Fetching large amount of data with loop or recursion with progress percentage in React / React native
- Save and retrieve states with redux-persist - React Native
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- React Native - text with background and a gap between multiple lines
- react native how to filter data with some key object on json
- redux react strategy with async data and interaction
- How to setup sublime 3 with react native so that when you click on the error and it jump to your code?
- Differentiate between the previous element and current element from the data of a Flatlist in react native
- React Native + Expo + Axios file upload not working because axios is not sending the form data to the server
- React - Axios POST form data with files and strings
- Yarn workspaces with React and React Native
- React - Combine data returned two api calls and set state of an array with these values
- How to do Server Side Rendering in React With React Loadable and Fetching Data for Components (Like Next.js)?
- React expose component function and getting data with ComponentDidMount
- React MUI Datagrid align column data and header with type "number"
- Unable to display data in component with react and redux
- Reading JSON data with axios and React
- Graph streaming real-time data with react and chartjs
- React useEffect(), fetch data with React Hooks and set the formik form
- fetching data in React with DynamicRoutes, nextJS and useEffect
- REACT: How to create a reusable custom hook with functions and effects that can change & react to changes in a host component's data
More Query from same tag
- Express server throws weird "cannot read properties of undefined reading "name" error.."
- React + Axios: Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
- How to remove multiple if statements in javascripts
- Passing data from an Asp.Net view into a React Component
- Handling an Unknown Number of Inputs in React
- react router with flask back end
- Moving Icon Towards Right in Drawer Navigator Toolbar
- Using custom theme in makeStyles
- Webpack + React : reusable component is not defined
- How to run a function in the background of a react app?
- How to set a Default Value to KeyboardDatePicker
- Add a simple authentication in a React app w/o a real backend
- Inheriting State in react components
- What are the advantages of putting data inside a "payload" key in a Redux action?
- How to test Reach UI Menu Button with react testing library
- Rendering a Chart in React with Asynchronous Object Data
- How to change an array element in state in a React
- Property 'filter' does not exist on type 'string'
- React.js Expected onSubmit listener to be a function, instead got type boolean
- undefined object rendered when fetching in react
- Next.js useRouter() not returning variable inside useEffect()
- Get success or failure response from Bluetooth-le write
- How to manipulate recursively nested elements in react
- ReactJS Header Layout , You should not use <Link> outside a <Router>
- React Context and separate classes
- Can't return the result from Axios
- How can implement react-google-maps DirectionsRenderer in my project
- ”Warning: Function components cannot be given refs.“ error while using custom component in nextjs
- How to upgrade version of Nodejs in windows
- How do I assign setInterval to variable and clear it in React + Hooks