Expo integration with Google Sign In - react-native

I am trying to add login via Google account to my application. I have encountered a problem. Expo offers two solutions.
Google (https://docs.expo.dev/versions/latest/sdk/google/) - This can only be used in a development environment. I have used it but it does not work in a standalone application, in my case it throws the error "redirect_uri_mismatch" /
GoogleSignIn (https://docs.expo.dev/versions/latest/sdk/google-sign-in/) - Doesn't work in the emulator so I can't add it to the application because I can't fix potential errors.
My question is what the hell library should I use?
I have already tried expo eject and use Google Sign In from React Native. However I got an error that Expo does not support custom native modules. Help!
Thanks in advance.

Edit: SDK 44 Release
With the release of SDK 44, expo-google-sign-in has now been deprecated in favour of expo-auth-session OR #react-native-google-signin/google-signin packages. If you want to use the latter, you will need to follow the custom development client path.
Pre SDK 44
We've implemented Google-Sign-In using the expo-google-sign-in library. Implementation is easy enough, but you will have to test using a standalone build of your application which is the only slightly annoying piece of the puzzle.
Building a standalone build is now even easier with EAS (not sure if you have an account - but if you don't, I would highly recommend it.)

I've used a GoogleSignIn library, but I also have pro tip for everyone who will implement it.
Instead of building a project every time when you will need to test it, you can build it once and then just use upadate OTA, it's much faster.

Related

Best practice for using Expo development builds while also having Testflight version

I'm building a React Native app and, because I'm working on payments, Expo recommends I use their development build methodology. This is working pretty well.
I am also beginning to push versions of my app to App Store Connect, to share them with specific testers via Testflight. This also works fine.
However, as the developer, I can't have both the development build and the latest Testflight version installed on my phone at the same time because they have the same name.
I'm curious what are best practices React Native developers have to get around situations like this. Is it renaming the development build version of the app to free up that namespace?
To install both at the same time you need to create your development clients with different bundle identifier. There is a guide for that here https://docs.expo.dev/build-reference/variants/.

Make a react native app which not use expo run on web

I have a react-native App which is not using Expo and runs on android and iOS. Is it possible to make it run on Web? I found multiple projects for this purpose but I am not sure if those projects are aimed to be used only with Expo projects or not. I use multiple android and iOS modules in my app, I can't imagine how those modules will be converted to run on web. Any advise? Is what I am trying to do is even possible?
If you're using native modules with android or IOS specific functionality then you'll have to find a replacement that supports web, (or keep them and use something else for web).
Also no need to stay away from expo modules, expo modules can be used outside of expo too, here's how you can set them up: https://docs.expo.dev/bare/installing-expo-modules/
I'd suggest you listen to some of Fernando Rojo's talks about this:
https://www.youtube.com/watch?v=0FfvIuSouTU&ab_channel=SoftwareMansion

Any way to have NodeJS run locally with an Expo app?

After some investigation, I realized I'd have to detach/eject my Expo app in order to use libraries such as nodejs-mobile-react-native, a library that allows you to run (and ship) a NodeJS singleton thread with your client app.
So the problem here is that I can't use this library unless I detach - something that I've been doing my best thus far to avoid. It sees all references to this library as null and I've tried to even manually link it.
Is there perhaps another approach that someone knows of that allows you to run Node alongside React-Native, which is compatible with Expo?
I have also used Expo in the past and because of similar limitations I switched over to Native Development using Swift but, in your situations what you can do is:
expo eject
in the application directory to detach your app from expo, once you have done this then you will have a plain react native app, then you can add any nodejs packages compatible with React Native.
Done!

How to get device Id in expo react native app

I am implementing API to connect app with server. I have to use deviceId there. As mentioned in here we can use third party library 'react-native-device-info'. But when I am using it I am getting errors as attached screenshots. As per error it's saying to do linking but as I am using react version 0.62, so autolinking is there. So What can be issue? It took too much time to search it but till now I didn't get a proper solution.
react-native-device-info library wont work in Expo , since it requires linking of native modules hence the error.It will only work in pure react native apps.
You can check this by expo itself : expo-device
hopeit helps.feel free for doubts
You can use react-native-device-info even in Expo projects. You need to replace Expo Go with a custom build that has react-native-device-info library baked in.
By default, Expo Go used on Android, iPhone Emulators implies managed workflow (aka only expo-* modules are being used). However, using any pure react-native-* libraries falls under bare workflow, so you cannot use Expo Go - the error you see is from Expo Go, not your app.
Build your custom Expo app with expo-dev-client, react-native-device-info libraries included, and install that on your emulators. This needs to be done once when you add a react-native-* library.
Now continue to add code to your project that uses features from react-native-device-info.
npx expo start --dev-client and choose your emulator. Your custom build will be launched and you can make live changes as always like in Expo Go.
Do check out the section on Development Builds from Expo. Needless to say, I have successfully used react-native-device-info on my Expo project, because expo-device cannot provide what I needed.

Recommended libraries for building an app which includes for deep linking and oauth

I have recently started to build a react-native app, which I want to build for both iOS and Android using a firebase Backend, and Branch.io/Firebase deep-linking services. I want to include in it both OAuth provided by Google and some kind of invitation link by using deep-linking. I have encountered problems in finding a way of supporting both.
It is worth mentioning that I am new to React and javascript, and have no experience in it.
I have tried using react-native-cli and tried to add OAuth to Google using firebase. I couldn't find enough documentation, so I followed a tutorial on youtube, and only managed to make it work by switching to Expo instead of react-native-cli.
Then I tried implementing some kind of invitation to groups in my app, using deep linking. I tried firebase's Dynamic links but got an error that firebase.links() is not a function and couldn't solve it due to lack of docs about it.
I then found out about react-native-branch library. It is in Alpha version in Expo so in order to use the native module I found out that I had to detach from Expo, and I wonder if there's an easier way to do it.
I've spent several days, as expected, in order to try and solve those issues. Is there a relatively simple way to do it?