How can I use this: https://www.npmjs.com/package/react-native-android-pip
I want to make a webview app can use PIP(Picture in Picture). But Idk how can I use this module in my code.
import * as React from 'react';
import { WebView } from 'react-native-webview';
import AndroidPip from 'react-native-android-pip';
export default class App extends React.Component {
render() {
return <WebView source={{ uri: '(My url)' }} style={{ marginTop: 50 }} />;
}
}
As said here (On the documentation itself), You can use as follow:
import AndroidPip from 'react-native-android-pip';
// Enter Pip mode
AndroidPip.enterPictureInPictureMode()
//Configure aspect ratio, works only on SDK version 26 and above
AndroidPip.configureAspectRatio(width, height)
// When enabled, PIP mode will be automatically entered when app is unfocused( User presses home
//, menu button etc)
AndroidPip.enableAutoPipSwitch()
AndroidPip.disableAutoPipSwitch()
You can call these functions on the click of a button, response of an API, start of a screen, and so on...
[EDIT]
Also, try using the github version of this module, as the npm version is 2 years old, and the github version is at 29 days without an update. Install it as follow:
npm install --save https://github.com/shaun-chiang/rn-android-pip
If you like there is an easier pilgrimage react-native-pip-android
Related
How can i assign one or more progress on circle progress as shown below
I'm using the library react-native-circular-progress
Current:
Expect:
Thanks all !
You can install react-native-circular-gradient-progress to implement this.
If you are using npm then please write
npm install react-native-circular-gradient-progress
If you are using yarn then please write
yarn add react-native-circular-gradient-progress
You can use it like below:
import React from "react";
import { CircularProgress } from "react-native-circular-gradient-progress";
const HomePage: React.FunctionComponent = () => (
<CircularProgress
color="#F00"
size={size}
progress={progress}
/>
)
export default HomePage;
And u will get result like this:
For further explanation of props you can read documentation.
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.
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
Having to work with an application that someone else developed and not available anymore. Pretty new to React-Native and Expo. Keep on getting this error:
fontFamily 'FontAwesome' is not a system font and has not been loaded through Expo.Font.loadAsync.
- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
- If this is a custom font, be sure to load it with Expo.Font.loadAsync.
I googled this and got some other links about what people were encountering and how they solved it e.g.
import {Font} from 'expo' and async load it in via componentDidMount
import {FontAwesome} from '#expo/vector-icons' package
tried deleting where it was used and refreshing app
Here is an example of an Icon a previous developer returned:
<Icon name="sign-in" color={'#FFFFFF'} type="font-awesome" />;
which is being imported like this from react-native-elements:
import { Icon, Button } from 'react-native-elements'
All of these ways I tried didn't work. Tried reading up on Custom Font loading but it looks like everything is being done right to me in the repo. Any help appreciated!
I would use react-native-vector-icons to load in font-awesome.
Make sure and run rnpm link after you yarn or npm install the module.
Using
import Icon from 'react-native-vector-icons/FontAwesome';
const myIcon = (<Icon name="rocket" size={30} color="#900" />)