I'm not a dev, and I'm kind of desperate.
I'm having an app built on symphony/react-native. And now we are implementing the stripe payment on the app, my devs seem kind of cornered.
The reason I chose react native is to have one codebase for my mobile and web app.
I'm trying to use stripe to process the payment on my app, but it seems that stripe-react-native doesn't run on web platform.
Does anyone think of a way to make stripe work on web without having to build a separate react app ?
I was thinking about using a platform condition to either run stripe from the react native module or from the stripe.js script, but I'm told that it's not possible.
If someone has any idea we could try, it would be very helpful.
Thanks
If you are using react-native-web, you can override incompatible Node modules in various ways.
One method of launching/building RN Web is to use react-app-rewired, and inside config-overrides.js you can declare a path to your own version of react-native-stripe.
You would need to implement this yourself, write an equivalent implementation for each method, and somehow load the web SDK for Stripe.
It's very doable if you are experienced and a similar process to mocking modules in Jest.
Here is an example:
// config-overrides.js used by react-app-rewired
const webpack = require('webpack');
const path = require('path');
module.exports = {
webpack: function (config, env) {
config.resolve.alias['#stripe/stripe-react-native'] = path.resolve(
'web/react-native-stripe',
);
},
};
(simplified version of the example here https://github.com/webpack/webpack/issues/4039#issuecomment-686158264)
However, if you are not forced to adapt an existing codebase to also support react-native-web, I would strongly recommend starting a new project using Expo which will support Web, iOS and Android right from the beginning. It is now possible to write polyfill modules for incompatible libraries within Expo.
Unfortunately, it's the case. You would need a separate web codebase and a separate mobile codebase. ReactNative is mobile, and for web, you have various choices, like regular web development.
You can choose ReactNative for mobile and ReactJS for web, though, and they will be similar on some level. But they are still different platforms.
Related
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.
I'm trying to integrate the react library called react-canvas-draw with expo.
the error in question is:
Component Exception - View config getter callback for component 'canvas' must be a function (received 'undefined'). Make sure to start component names with a capital letter.
I think its a babel config fix. converting es2015 to es7 or something then to react native code. I have no idea.
So I stopped using react-expo because it's a pain in the ass to configure all the settings with (Babel, es6, jest, eslint, etc & metro configs). I Generally know what all those packages do in layman's terms but I do not know anything with setting them up together and what goes where.
Instead I'm using npx create-react-native-app It comes pre-configured for what I'm doing and it has some neat feature like hot-reloading so it's just as fast in development. It's not as helpful as expo with ease of use with ios and android setup and exports but I can manage the configurations on my own.
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.
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...
I've recently started react native and following guide on tutorial there are
2 option one is create the project via "create-react-native-app myproject" and other one is "react-native init myproject".
the first one(create-react-native-app) generates app.js only whereas other one generates index.android.js and index.ios.js..
I know somehow they are doing same job but whats the real diffirence here ? which one should I pick to start and when the other one is more usefull over?
The create-react-native-app ("CRNA") CLI builds a project template based on Expo, a third-party toolkit which allows you to write cross-platform React Native applications using only JavaScript, and provides a smoother workflow for getting the app running on a real device. In addition, Expo provides access to tons of native APIs, for which you'd normally need libraries or custom native code.
Expo is great, and in an ideal world, it is what most app developers would probably prefer to use, but Expo's architecture sets an unfortunate limitation: You cannot write custom Native Modules, or integrate third-party libraries which depend on custom native code that isn't build into Expo. This means you have only access to the native functionality provided by React Native and Expo, and cannot easily extend it.
By contrast, the react-native CLI's init command creates a plain React Native app template, with native iOS and Android projects you can modify. The downside of this approach is that you'll need to set up the native iOS and Android build chains on your computer, and it's significantly more cumbersome to get started developing and deploying your app.
Luckily, Expo provides a way to detach a CRNA app from their native app shell. This will convert a CRNA project into something similar to the plain project created by react-native init, but with access to all the Expo SDK functionality.
In practice, the best approach for most beginners and new projects is to start with create-react-native-app, and evaluate whether you'll need to detach later. Expo provides a handy guide to help making that decision.