I want to make barber app in which users can try hair styles on them using Augmented reality technology. I want to build the app using react native, and I have found that in react native only ViroReact providing the facility of AR. So can we implement this thing using ViroReact?? If not then what should I use??
You can use the capability of face tracking provided by AR platform to assist the app in implementing natural interactions between users and virtual objects.
Here is the documentation of ViroReact.
Huawei provides React Native plug-ins for you to integrate AR Engine, by using the capabilities of facial recognition, graphics rendering, and AR display to access Product (hair style) AR fitting.
The main procedures are as follows:
Create a FaceViewActivity inherited from Activity, and create the corresponding layout file.
Override the onCreate method in FaceViewActivity to obtain FaceView.
Create a listener for Switch. When Switch is enabled, call the loadAsset method to load the 3D model of the product. Set the position of facial recognition in LandmarkType.
mSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
#Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
mFaceView.clearResource();
if (isChecked) {
// Load materials.
int index = mFaceView.loadAsset("FaceView/sunglasses.glb", LandmarkType.TIP_OF_NOSE);
}
}
});
Create a onBtnTryProductOn in MainActivity. When the user taps the onBtnTryProductOn button, the FaceViewActivity is called, which enables the user to view the AR fitting effects.
You can download the plugin on Github.
For more details, see docs.
I am to late for answer but may be use full to others.
Sceneform library may be useful for AR face detection and it related filtering functionality. Its available for react native & android native
Related
I want to implement share the screenshot of the current view in both ios/android. Dont know which one of these API's are better and why they both exist too.
React Native's Share is a method of React Native like static share(content, options) that Open a dialog to share text content.
On that the .open() method allows a user to share a premade message via a social medium they choose.
For Further React Native Share Documentation
On the other react-native-share is a package of npm. It is a simple tool for sharing messages and files with other apps.
For further react-native-share
both act as same but one is a method and the other is a package. You can use both to share text or messages with others.
I hope it will beneficial for you to apply. and understanding that differences.
What I have
I am trying to adapt a web designed library to react native, this implies that certain things must be replaced like the use of custom events, I want to implement this behaviour, create and dispatch/trigger custom events in RN.
I have reviewed some answers to similar questions, but there are some options to simulate custom events that are no longer works by the new react-native versions, since React Native doesn’t include the Node Standard Library.
What I want
this is a piece of code in which custom events are implemented and captured, this is what I want to simulate in RN.
const authEvent = new Event('auth');
// Listen for the event.
window.addEventListener('auth', function (e) { /* ... */ }, false);
// Dispatch the event.
el.dispatchEvent(authEvent);
I have a use case in which the user should be able to click on a slider that has its data served from server.
The data contains some information that would be used to:
Open another view and initialize it with some parameters.
Open external app(s) and send data to it.
Can I use the Linking api in react to make it navigate internally within the app or is that reserved only for react navigation? My intuition is to use something like this:
Linking.canOpenURL(retrievedDate).then(supported => {
if (!supported) {
// use react navigation
} else {
Linking.openURL(retrievedData);
}
}).catch(err => console.error('An error occurred', err));
But I'm not sure if that's going to be the best practice/most generic one?
Your suggestions are highly appreciated.
Linking means you are online and running a web application.
React-Native is for developing (with React type coding) MOBILE apps. A mobile app is not running in a browser and its pages are not linked to URLs. So you should be using the navigation, which creates a certain UI for Android devices and a different UI for IOS (Apple) devices, and allows the user (and/or the programmer) to "navigate" between the "screens".
If for some obscure reason you are developing a web app with React-Native, you can of course use the linking api. https://facebook.github.io/react-native/docs/linking
Problem
I'm integrating React Native into an existing Android app (ie. making a hybrid app). I've created an Activity to host a React Native view. This works fine.
Now, I need to pass structured data from native into React Native. Represented as JSON, it looks something like this:
{
"landscape": ["http://example.com/1.jpg", "http://example.com/2.jpg"],
"portrait": ["http://example.com/3.jpg", "http://example.com/4.jpg"]
}
Given the context I describe how can I make this data available as props inside of the React Native app?
I see that this is an initialProperties argument available, but it seems to accept a Bundle, which as far as I can tell (Android newbie here) only accepts scalar values.
One option I am considering
Create JSON object in Java
Convert to a string
Add to Bundle and pass into initialProperties
Ingest as JSON and deserialize in React Native app
... but this seems hackish and requires me to add special code for Android that was not required for iOS.
Alternatives?
Is there a straightforward approach that I am missing?
Have you tried passing an array of strings into the Bundle?
bundle.putStringArray("landscape",yourArrayOfStrings]);
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