React Native: Activity and metrics tracking libraries? - react-native

I'm looking into adding a tracking library (something like what Google Analytics does for the web) to my React Native app.
Are there tools out there to track user activity like swiping, tapping on stuff, etc? I did a quick search but didn't find anything.

To track events you can use google analytics in react-native either as a javascript or a native implementation.
The key difference is that in the native implementation you get a some metadata handled automatically. ( such as device UUID, device model, viewport size, OS version ).
Javascript implementation: https://github.com/react-ga/react-ga
Native bridge: https://github.com/idehub/react-native-google-analytics-bridge

Related

React Native and support for Android Auto, Apple CarPlay, and wearables

I'm about to begin building out an app using React Native. It's a simple audio player that plays music. However, on top of having an audio player in the app, I would also like to support:
Android Auto
Apple CarPlay
Wearables
Does React Native support these platforms out of the box? How good is the integration? Will I run into many bumps along the way?
Thanks!
About Apple Car Play you can use react-native-carplay, but before use it I see expo tag in your question if you are using expo to create you application it's not supported in a expo. read this article to know more how implement add Car Play to your React Native App
about wearables check the repo to know more.
How good is the integration? Will I run into many bumps along the way?
If you are using TypeScript it's will be easy to do, and you have much repos and articles explain how to implement those packages with mobile application

How to read data in background in React Native

I have an app in React Native, that uses the bluetooth connection to read data from external devices.
I need a way to continue to read this data in background when, for example, the user starts a reading session and put the app in background.
What should I use to do this?
My code is divided in two parts:
Scan and Connect
Reading Data from external devices.
You need a background service for this. The following link for Android will help you.
github => react-native-foreground-service
If you want, you can do it yourself as described on the RN official site. But you'll have to write Java code for it.
React Native => Native Module

React Native set TextInput default using native voice input

I want my textinput default using voice input, just like in ios it can automatically switch to use native voice input to input text, and for android it can automatically switch to use google voice input to input
is it possible to do it by react native or using native code? Thanks!
You can use a third party library react-native-voice
This library is compaitable with both android and ios. There is a fine introduction on medium site too.
For Google voice input, This component uses the device’s native recogniton API, which varies for every device. Google Speech API is an external service that you have to pay for, whereas this costs no money.

How can I do Signature Capture in React Native?

I'm trying to understand how I can do a signature capture in React Native. My App is created with create-react-native-app and Expo and I'd prefer to not have to eject the app to get this functionality to work.
Would it be possible to wrap something like this in a webview? https://github.com/szimek/signature_pad
I've also looked at this project, https://github.com/RepairShopr/react-native-signature-capture but it requires me to eject the app and use react-native link.
Looking for any advice or suggestions on how to implement this feature while keeping my project as straightforward as possible (ideally, using create-react-native-app, but if this isn't possible could someone please explain to me why?)
The way React Native works is that each component available in React Native maps to a native component in the underlying platform.
ie. a <Image /> is an ImageView in Android and a UIImageView.h in iOS.
The Javascript code itself runs in a Javascript thread on each platform and as you use Components in React Native, there's a translation layer that passes information from JS into the React Native bridge that then results in corresponding native components being created.
By default, React Native has included the following components: https://facebook.github.io/react-native/docs/components-and-apis.html#basic-components which means that only those components come out-of-the-box in React Native. If you want other components, then you have 2 options, either create a "composite" component in which your JS component is written into other JS components or, if your feature needs a native component not yet exposed by React Native, write your own "native" component to expose certain native functionality to your React Native code.
The way Expo works is that they have wrapped React Native and a handful of 3rd party components and built it within their application. The reason why you can't use a 3rd party native component they don't support is because when that component is used, the app itself doesn't have translation code to go from JS to a native Android/iOS view.
So, to do what you're asking, you'd need to find either a "native" drawing component that Expo has included in their platform/app. OR you need to find a "composite" drawing component that is built with other default React Native components (or other components Expo supports).
ie. On Android, I might build this with a Canvas view, but from what I can tell React Native doesn't support that object natively, so I would probably write this myself, etc.
It's hard for Expo to support every 3rd party "native" component out there because React Native is open source and it iterates so fast that most community-built components aren't always up to date or they might conflict with one another.
I am using react-native-signature-capture.
Working properly on both Android and iOS.
I know it's been a while, but there is an interesting article here: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac
Wait, but how?
Using “expo-pixi”, you can add a component that lets you choose your brush’s color, thickness, and opacity. Then when your user lifts her finger, you get a callback. From there you can take a screenshot of the transparent view or get the raw point data if that’s what you’re looking for.

React Native Business Card Scanner that i can plug in to my App

I was looking for an android Business Card Scanner project that I can integrate with my React Native App.Is there anything like that out there ?
I have written one like that which has all the logic to scan(OCR) and map the respective fields e.g Fname,Lname,designation,phone numbers etc but that was for native iOS and Android .
Checkout this link
This runs on the engine I created, I used tesseract for OCR , react native wrapper for that is available here