How to make https://xr-spinosaurus.glitch.me/ work in a React Native WebView Component?
import React, { Component } from 'react';
import { WebView } from 'react-native';
export default class MyWeb extends Component {
render() {
return (
<WebView
source={{uri: 'https://xr-spinosaurus.glitch.me/'}}
style={{marginTop: 20}}
/>
);
}
}
Right now adding this to react-native only shows VR option but not AR option.
If you access the link directly you could see VR and AR options but I couldn't find the AR option when run in a Web View component inside React-Native
But the same AR option is available if I directly access the link on an ARCore supported Device.
How to make this code also show the AR option in React-Native?
AFAIK that is currently not possible, since the Android WebView doesn't (yet) support the WebXR Device API (and neither on apple). Source: https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API
I've been running into the same problem, hopefully support will be added soon, but for now there's not much you can do.
Related
I already have a react-native project which I cloned and running successfully.
I added a new file to the project and tried to link that page using a button from another page with, this.props.navigation.navigate('DisplayHomeScreen');
I couldn't link the 'DisplayHomeScreen.js'.
But when I link a page which was already there, the navigate function is working fine.
Here is the simple code of DisplayHomeScreen.js
import React, { Component } from 'react';
import { View, Text } from 'react-native';
class DisplayHomeScreen extends Component {
render() {
return (
<View>
<Text>Display Home</Text>
</View>
);
}
}
export default DisplayHomeScreen;
As your code snippet is insufficient to identify the problem.can you please share your navigation stack.Well at spot I can/ recommend doing.
yarn install (if you are using yarn as a package manager)
react-native link
close metro bundle
restart app
Hell, I'm trying to create a tab bar in my react native app, but after importing it, it appears it's always undefined. Has this component been deprecated? I still see it listed in the docs. https://facebook.github.io/react-native/docs/tabbarios.html
import React, { Component } from 'react';
import {
TabBarIOS
} from 'react-native';
export default class App extends Component {
render() {
return (
<TabBarIOS/>
);
}
}
I'm using react-native 0.59.3
Looks like this has been removed as part of a core cleanup effort. There doesn't appear to be any native alternative that also behaves correctly on tvos.
https://github.com/facebook/react-native/commit/02697291ff41ddfac5b85d886e9cafa0261c8b98
I've gone ahead and extracted TabBarIOS out into a native module for anyone looking for this.
https://github.com/modavi/NativeIOS
install instructions:
npm install git+https://github.com/modavi/NativeIOS#master
react-native link native-ios
UPDATE:
react-navigation web support is done. follow this:
https://reactnavigation.org/docs/en/web-support.html
ORIGIN:
I try to share my code between react-native and web.
when I try react-native-web, it works well.
but there is only one question, how to access the specific screen from URL?
I read the react-navigation docs, there nothing about that.
and react-router-native can catch the web URL,
but it has navigator likes StackNavigator/DrawerNavigator.
and idea about that?
I'm not sure what the case was at the time you posted this question, but you definitely can use react-navigation with web now adays.
Now with Linking we can Handle deep links in React Native apps on Android and iOS, plus
Enable URL integration in browser when using on web.
The NavigationContainer component takes in a linking prop which allows you to map out your routes.
const linking = {
prefixes: ['https://mychat.com', 'mychat://'],
config: {
screens: {
Chat: 'feed/:sort',
Profile: 'user',
},
},
};
function App() {
return (
<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
{/* content */}
</NavigationContainer>
);
}
Once we establish what all of the routes or "links" are in our app we can start using Link components to navigate just like in a normal react web application if you used react-router-dom.
import { Link } from '#react-navigation/native';
// ...
function Home() {
return <Link to="/profile/jane">Go to Jane's profile</Link>;
}
These link components should work on both mobile, and web versions.
https://reactnavigation.org/docs/configuring-links/
https://reactnavigation.org/docs/deep-linking/
https://reactnavigation.org/docs/link
I don't think it's possible as ReactNavigation is using an internal state object. Remember, it's mobile framework, it has no concept of URL routing.
I also wanted to point out that even though RN claims web support you will need to be careful with component selection as not all the behaviours are identical (from memory, FlatList does not support touch scroll)
I want to know how I can make a keyboard aware scrollview without using the popular library, because that is currently giving me a bug when using "controlled" TextInputs within the KeyboardAwareScrollView
Has anyone managed to pull this off? Perhaps with the KeyboardAvoidingView?
The solution has to work on both iOS and Android
You can make use of KeyboardAvoidingView component. Import it from the 'react-native' along with all other components you need and keep your UI within that component.
for example,
import {KeyboardAvoidingView} from 'react-native'
export default class App extends React.Component{
render(){
return(
<KeyboardAvoidingView behavior="padding">
Your UI
</KeyboardAvoidingView>
);
}
}
Don't forget to add the prop behaviour="padding". It worked for me on android device. I don't have an iPhone to test it, but hope it would work.
Take a loot at this this link for further information. Hope this helped.
I'm coming from Ionic 2 where I write my code once, and it runs everywhere.
According to this page https://facebook.github.io/react-native/docs/platform-specific-code.html "When building a cross-platform app, you'll want to re-use as much code as possible."
How can I "reuse" code across iOS and Android in ReactNative? In the starter app I see two files: index.ios.js and index.android.js. Is there something like index.js that I can use for sharing across platforms?
It seems like there should be one file for shareable code, since that web page mentioned above also shows how you can use the Platform module to check what OS you are on.
I realize that sometimes you need different behavior on different platforms, but, assuming that my app is simple enough, and my code ends up exactly the same on both platforms, do I have to copy/paste from one to the other? How can I pull same-functionality into it’s own file to be shared on both platforms?
What am I missing?
Thanks!
Here's what you can do. Create a file say main.js that will act as your root page.
main.js
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class Main extends Component {
render() {
return (
<Text>Hello world! from both IOS and Android</Text>
);
}
}
Now on your index.android.js and index.ios.js import that main file and register your Main component as root using AppRegistry.
index.android.js and index.ios.js
import React from 'react';
import {
AppRegistry
} from 'react-native';
import Main from './main';
AppRegistry.registerComponent('DemoApp', () => Main);
if you run react-native run-android and react-native run-ios the Main component will be rendered for both the platforms.
All of the Components with No IOS and Android suffix works for both platforms. Like Navigator works for both ios and android but NavigatorIOS works only for ios. So you'll have to make sure that you're using the cross platform components.
If you need to use platform specific components, then you can use platform detection login to do so:
import { Platform } from 'react-native';
if(Platform.OS === 'ios').....
or
if(Platform.OS === 'android')...