I’m working on an VR app using Expo and a-frame with a webview. Everything worked well with iOS12 but I have some problems since I updated to iOS13 and SDK35. When I start the webview, it is impossible to use the VR mode, the scene can only be moved if the user is manually swiping the screen.
After some research, I found that iOS13 requires an user gesture for using the device motion:
https://github.com/aframevr/aframe/issues/4277
I looked in the Expo doc but the Permissions doesn’t seem to handle the DeviceMotion permission (and the DeviceMotion page only says we can check if it’s enabled or not). Is there any way to solve this ?
Thanks in advance
You can use react-native-gesture-handler
You can run expo install react-native-gesture-handler
You can use this if you want to solve the problem of gestures. The rights to gestures appear to be missing from the document.
Example
import { TapGestureHandler, RotationGestureHandler } from 'react-native-gesture-handler';
class ComponentName extends Component {
render () {
return (
<TapGestureHandler>
<RotationGestureHandler>
...
</RotationGestureHandler>
</TapGestureHandler>
);
}
}
Read the react-native-gesture-handler docs for more information on the API and usage.
Related
Can anyone tell me how it is possible to insert a loading screen while a screen is loading. (i am using the React Native Stack Navigator).
There are a couple of ways you can do this. We have a couple of npm libraries to do the task. One is React native loading spinner (This package has been currently deprecated). You can read the documents to see how to implement those. If you want to create beautiful animations, You can use react-native-animated-loader. There are tons of libraries you could find on Github and npm. If you want Instagram-like loading(displaying some placeholder stuff before rendering your react-native component), there is react-native-easy-content-loader. Please go through the docs for more info.
You can also implement your own loading screen from scratch and use the useEffect hook to render the loading screen before the component is loaded
I am currently updating the version of my application, and I have a function that is used that no longer exists, I tried several things according to the documentation
but I get either an "Invalid Hook Call" error or something else...
The problem without the withNavigationFocus function is that when the screen is rendered, the data is not displayed. I have to press Cmd+S to refresh and have the data on the screen. Knowing that the props are linked to Redux.
This is the line that causes the problem:
export default withNavigationFocus(connect(mapStateToProps, mapDispatchToProps)(Home));
I can't find an alternative so far, does anyone have an idea?
Upgrade doc link here
You can install a backward compatibility package and you can continue to use HOCs withNavigation and withNavigationFocus.
Inpm install #react-navigation/native#^5.x #react-navigation/compat#^5.x #react-navigation/stack#^5.x
It was designed with React Navigation 5. I didn't test with version 6
I am developing simple grid location based application in React Native using Uber H3. I installed H3 by
npm install h3-js. Then
I created a file to read H3Index from latitude and longitude.
import {geoToH3} from 'h3-js';
const getH3Index = () => {
const result = geoToH3(37.3615593, -122.0553238, 7);
console.log(result);
};
When I start to run my React Native application, app hangs on white screen(splash screen) and blocks the whole application. If I comment these lines, app works fine. If uncomment this line, both iOS and Android app is not working.
Any help would be much appreciated!
Please see https://github.com/uber/h3-js/issues/35
This is likely due to a document is not defined error. See the issue thread for several possible workarounds, including this fork which is intended for React Native.
I an writing a react-native app, And I noticed that while the buttons look like native buttons when clicked - they do not behave as one (At lease not like android button behave).
Clicking on android app button - make a sound and give the user an haptic Feedback.
On the sound I saw that there is github discussions and open issue, but I could not found anywhere anything about the haptic Feedback.
How can I make my view (any touchable view..) to make haptic feedback on click?
This is really important feeling in an app.
I want something like this (In android)
View view = findViewById(...)
view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY);
This doesn't require from the app to have permission for Vibrate.
And managing haptic feedback on my own with the Vibrate api will cause users that disable this option globally to experience bad behavior
Thanks
If you are using Expo with react-native, I recommend you to use Expo haptics
After installing the library You can use it like:
<TouchableOpacity onPress = { ()=> {
Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success)
or
Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
or
Haptics.selectionAsync()
} } > </TouchableOpacity>
I found this component on github https://github.com/charlesvinette/react-native-haptic
I didn't try it yet, but it should help you to get the haptic feedback you want.
I also have nearly the same requirements and I ended up using this library react-native-haptic-feedback.
Keep in mind that haptic feedback is available only on some latest android devices and in iOS above iPhone 6s. Here is a simple code snippet:
import ReactNativeHapticFeedback from "react-native-haptic-feedback";
const options = {
enableVibrateFallback: true,
ignoreAndroidSystemSettings: false
};
ReactNativeHapticFeedback.trigger("impactMedium", options);
In your case, it will work directly with the button's onPress method such as:
<TouchableOpacity onPress={()=>{ReactNativeHapticFeedback.trigger("impactMedium", options);}} />
Note: I found that the most versatile type which is supported by maximum devices is impactMedium.
You can use the built-in Vibration module facebook.github.io/react-native/docs/touchablewithoutfeedback
import { Vibration } from 'react-native';
...
<TouchableWithoutFeedback
onPressIn={() => Vibration.vibrate()}
/>
Remember to include this in your AndroidManifest
<uses-permission android:name="android.permission.VIBRATE" />
I published a project on Github which provides this functionality.
Check this repo out: react-native-haptic-view
I am using react-native-camera to build a barcode scanner for Android and iOS both.
I am able to scan the barcode in iOS but the issue is there is no visual for the scanning boundary. And I want the whole screen to be able to scan the bar code not just the middle of the screen.
Is there any way around it?
If there is some other library that would also work for me.
Well it took me all day but I finally found a library that worked. If anyone finds their way here and is looking for a barcode scanner for react native that works on android...I am here to help.
https://github.com/ideacreation/react-native-barcodescanner
1st if you do not have rnpm get it...it is very helpful!(npm install -g rnpm)(https://github.com/rnpm/rnpm)
then run these commands in your project file:
npm install --save react-native-barcodescanner
rnpm link react-native-barcodescanner
at this point I synced gradle and reran the app from android studios...not sure if it is needed(also sometimes rnpm link forgets a new line character...if you have an error message about the word include it is because this...just find it in your setting.gradle file add a new line before the word include)
now it is ready to use.
import it:
import BarcodeScanner from 'react-native-barcodescanner';
then use it in your render function's return statment:
<BarcodeScanner
onBarCodeRead={this._BarCodeRead}
style={styles.preview}
torchMode='off'
cameraType='back'
/>
If you need more info check out that link. I hope this helped someone avoid the torture I endured going through library after old library that did not work.
Happy coding! :)
I recommend using React Native Community's React Native Camera. It's quite well maintained and you can simply pass a callback prop to receive the output:
<RNCamera onBarCodeRead={this.handleBarCodeRead}></RNCamera>
Your callback will be invoked when a barcode is detected in the camera's view. From the docs:
Event contains data (the data in the barcode) and type (the type of the barcode detected).
There is a react-native library for scanning QR codes with Highlighting scanning area with animated scan bar that moves up and down.
You can use isShowScanBar prop to show scan bar or either disable by passing false to this prop.
Github Link https://github.com/shifeng1993/react-native-qr-scanner#readme
It's npm is also here https://www.npmjs.com/package/react-native-qr-scanner
It's props are listed here https://www.npmjs.com/package/react-native-qr-scanner#qrscanner
Firstly, Install the react-native-camera library as this library is dependent on it.
Just run this command in root directory of your project
npm i react-native-qr-scanner
then run this link command react-native link react-native-camera && react-native-qr-scanner
Import it using :
import {QRscanner} from 'react-native-qr-scanner';
<QRscanner onRead={this.onRead}
cornerBorderColor ='black'
cornerRadius={40}
isRepeatScan = {true}
cornerBorderRadius={40}
cornerColor ='black'
scanBarColor='black'
cornerBorderWidth={10}
cornerBorderLength={60}
hintText="Please Align QRCode"
renderBottomView={this.bottomView} flashMode={this.state.flashMode}
finderY={50}/>
onRead = (res) => {
alert(JSON.stringify(res))
}
It works for both Android and iOS
js.coach is a good place to look for react native plugins
https://github.com/ideacreation/react-native-barcodescanner
https://github.com/leofidjeland/react-native-barcode
Just found universal code scanner - combines android and ios:
https://www.npmjs.com/package/react-native-barcode-scanner-universal
Tried on Android works just fine.
Expo provides BarCodeScanner component out of the box (preinstalled in managed apps).
It works like a charm, I definitely recommend it.
You can see if BarCodeScanner works with your bar code, try it in snack: https://snack.expo.io/#documentation/barcodescanner-example