Boilerplate code for setting up Redux on a Expo/CNApp project? - react-native

I've used Ignite CLI to bootstrap a simple react native project, and everything from sample components to Redux were set up and ready to go. What's missing from the Ignite project is the ability to use Expo out of the box. So I though I'd look into Expo and Create React Native App, and see if those provide a similar easy out-of-the-box Redux setup.
So does anyone know of any Expo/CNApp boilerplate code for bootstrapping a react-native project, which includes stuff like Redux and sample screens and components?

Expo offers a New Project Template. While it includes fonts, navigation, icons, app loading, push notifications, and some basic screens, it does not include Redux.
There are good Redux examples from Redux.org. I also found this repo and the associated tutorial to be good a example of how to integrate Redux into a React Native app.

Related

Video Calling in Expo React Native Application

I am building a React Native Application using Expo and I want to integrate a 1:1 video calling functionality in the app.
From what I have researched so far on the topic is that I can use SDKs of various libraries like Twilio, Videosdk, VoxImplant etc to implement that feature or I have to use WebRtc in native project alongwith some mechanism to create rooms using socket.io and node and then join users in that room (not completely sure about it but something like this)
But both of these solutions require me to make changes in native files which are not present in expo app by default for which I think I have to run expo run:android and then make require changes in files (correct me if I am wrong)
Although on web I think its relatively easy to implement video calling using vanilla js or react js.
My question is if I implement a webpage that has video calling function and try to open it in webview in my expo react native app will the functionality work on app or not? has someone tried this before.
As I was exploring options I came BigBlueButton APIs and another question on Stackoverflow that is using Webview to connect to BigBlueButton APIs. Can I use this logic to implement something in expo app without ejecting or using any sdks? Will it work
What would be the best way to implement video calling in my expo app
Thanks
Utilizing Expo, you are essentially using 'React Native for Web', and with the new functionality of Expo config-plugins, almost all packages for React Native with auto-linking can be made to work with your Expo app, or more-or-less can have Config Plugins created for them.
For your case, good news for you, you can make it all work on Expo managed workflow, just utilize expo-dev-client and the following library:
react-native-webrtc
There's an Expo config plugin for this package. So now all you have to do is just utilize the Web-based functionality of WebRTC, such as calling:
navigator.mediaDevices.getUserMedia()..
navigator.mediaDevices.enumerateDevices()..
navigator.*
And ensure it works properly on Web. Then, just make a platform hook at your App.js / First loaded module / before having these WebRTC based functionalities calling the aforementioned library's initializer. e.g:
import React, { useEffect } from "react";
import { Platform } from "react-native";
import { registerGlobals } from "react-native-webrtc";
...
Platform.OS !== "web" && useEffect(() => {
registerGlobals();
}, []);
...
One more thing you'd have to do is that for Web, have the <video> element and for native apps, resolve it to <RTCView>, so essentially you could also make a platform specific component/module that resolves to either the web-only <video> tag or the native <RTCView> based on platform, like the example above. Perhaps even have the imports be resolved based on dependencies if you face any errors importing 'registerGlobals' at Web, for example.

Why do I need to install redux along with react-redux?

If react-redux depends on redux and can't function without it, why would redux not be part of react-redux library?Is it only because someone may want to uninstall react-redux and still want to keep with redux in a react project? Or is there some other logic?
Because Redux is a standalone JS library that can be used with any UI framework (React, Angular, Vue) or even vanilla JS / jQuery. React-Redux is the specific bindings library that lets your React components interact with the Redux store, and there are bindings libraries for other UI layers as well. So, there are separate but related libraries that do different jobs.
Please see my post The History and Implementation of React-Redux and my talk A Deep Dive into React-Redux for more details on what React-Redux does and how it works.

React Native boilerplate files

this is my situation:
new to react native
familiar with react.js for web
successfully ran the boilerplate from the react-native cli.
Can someone send me links to docs or articles discussing or explaining the files in the boilerplate?
Which files are safe to delete? I want to make a minimized build as possible and understand the whole ecosystem behind it.
I'm sure react native compiles with babel since it has jsx in it. But how?
I just don't understand yet how react native works. Thanks a lot guys.

How can i incorporate Expo components in a non-expo React Native app?

I'd like to use Expo's barcode scanner component in a non-expo app that i've already mostly built:
https://docs.expo.io/versions/latest/sdk/bar-code-scanner.html
Is it reasonable to do this? Or is it more reasonable to create a new Expo app then migrate my existing codebase into the new expo app?
My existing app was created using react-ignite, not sure if that is relevant or does not make a difference.
Generally speaking, integrating Expo components with native dependencies (such as the camera) into a non-Expo app is possible, but is a bit tricky, as you'd have to lift the source code from the Expo codebase into your application.
The JavaScript code for these modules exists in the expo/expo-sdk module, and are quite straightforward:
CameraBasedBarCodeScanner
Camera
However, the native module that's required to make the Camera work are embedded within the expo/expo client application, and depends on other parts of the Expo codebase.
Instead, I recommend you use the react-native-camera component, which supports barcode scanning out of the box, and is easier to integrate into a plan React Native application.

React native based app

Which framework should I follow to create react-native based apps or what is the best appropriate way if I want to use Redux for creating new apps.
I just want to build an app using react native along with redux and I am not sure what library should I use for that ?
I know little about Redux thunk and saga but as a newbie I am confused what could be use for my app that gives me more flexible .
From my personal expirience, to develop I use Atom once installed you can add more plugins in order to customize it.
For debug purposes I use a couple of Chrome plugins like React Developers Tools and Redux Dev Tools
As I said, these are my options but there are so many others...