I am implementing Stripe in my React Native (Expo) app. When testing it out with ExpoGO it works well, and so does the iOS build via Testflight. However, after building the app for Android it will crash whenever the CardFormField component (provided by Stripe) is rendered.
I have logged the errors in Sentry, and this is where it goes wrong:
Binary XML file line #5 in [censored]:layout/stripe_card_form_view: Error inflating class com.google.android.material.card.MaterialCardView
IllegalArgumentException: The style on this component requires your app theme to be Theme.MaterialComponents (or a descendant).
I then found this, here:
In order to use CardForm component, you need to install and configure Material Components theme in your app.
I do however fail to find information on how I am expected to comply with this requirement using Expo. Do anyone have any ideas?
I am using:
expo 43.0.3
#stripe/stripe-react-native 0.2.2
App is built with eas
I use expo (not an ejected app)
Thanks in advance for any help.
With Expo you have a choice between managed vs. bare workflows. In order to access the build.gradle and styles.xml files to configure the Material Components theme you need to switch to a bare workflow. You need to use expo eject to create the native Android files in question.
Related
I'm working on react native project and I am using expo. I want to add the react-native-share package to my project, however I keep getting this error before I even add any code.
TypeError: null is not an object (evaluating '_reactNative.NativeModules.RNShare.FACEBOOK')
Now I know that expo has it's own version of the share, however you can't specify where a person can share it too, which honestly makes the feature useless. It seems to be clear that the reason I can't use this package is because I am using expo and can't install pod into the project -- due to expo reject it --. So what should I do? Any suggestions on how to work around this?
You can't normally use dependencies with native code using Expo. At least when using the classic build system (you're using it when you run expo start in the terminal to run your project). react-native-share has native code (you can check that by going to the repo and seeing if the library has ios and android folders) and therefore can't be used with "standard" Expo.
If you want to use custom native code in your project, you either need to eject from Expo to the bare workflow or - a newer option - use Expo EAS and custom dev clients. Expo EAS allows you to stay in the managed workflow and still use native modules. You might need to write something called a config plugin for some of those native dependencies you want to use, but looking at the documentation, react-native-share should be working just fine without a config plugin.
So: Either eject to the Expo bare workflow, or use Expo EAS and custom dev clients to use native dependencies with the Expo managed workflow. Do note however that you need at least Expo SDK 41 to use EAS and custom development clients.
To learn more about migrating from the classic build system to EAS, see Expo's guide / documentation.
What is the proper way to use native module in react native expo bare workflow ?
I want to use react-native-pdf and react-native-blob-util
But I got error :
TypeError: null is not an object (evaluating 'ReactNativeBlobUtil.DocumentDir')
And
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
I have following this link : https://openbase.com/js/react-native-pdf
I read in the expo documentation we can use native module using expo bare workflow. And now my project is bare workflow. In the middle of building my apps using expo bare workflow I got and error when using react-native-pdf and react-native-blob-util
I want when user click the button the apps will open the pdf file which have source link pdf from my server.
Is it possible to setup using this native module in expo bare workflow since bare workflow in the documentation said it like this :
https://docs.expo.dev/introduction/managed-vs-bare/
Bare Workflow
In the bare workflow the developer has complete control, along with
the complexity that comes with that. You can use all packages from the
Expo SDK, development builds, and all Expo and EAS Services.
Configuration with app.json / app.config.js is mostly not supported in
this context; instead, you will need to configure each native project
directly.
Please give me a solution of this problem ? If it is not possible please point me to use another best pdf viewer.
Finally solved the problem.
Native Module cannot run in Expo Go
So expo publish will not working because it is run in Expo Go.
Instead, we must change to run in native. Use case example : npm run android or expo run:android. It will run into bare workflow with native module in our code.
I had this same issue. The fix for me was to rebuild the development client first.
npx expo start --dev-client -c
Then run android/iOS.
There is no need to build with expo run:android.
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.
I created a RN with create-react-native-app, and I have now decided to eject. It didn't work initially, and required some packages to be installed (#babel/...), but now, it complains that Module 'expo' does not exist in the Haste module map.
Why does it still require expo, now that it has been ejected? Or have I misunderstood what ejection does?
N.B. during the ejection I chose the option to eject to an RN app, not to ExpoKit. This is on iOS, currently.
When ejecting expo app you'll be asked about using expo-kit or just react-native and it's up to you to choose, plus Module 'expo' does not exist in the Haste module map means you still using expo in your code so double check your code to be sure that you're not importing expo anywhere and try again.
TL;DR
Ejected expo react native app requires expo? the short answer is no.
when using expo app you have the ability to build your app using the expo server so you don't have to have Android Studio or XCode installed all you have to do is $ expo build:[android|ios] and download your built package after the build process is done also you can run your app using expo client app on Android and Ios but once ejecting you'll lose the ability of using expo server as your build environment instead you have to use Android Studio or XCode, but the main difference here is when you choose expo-kit you still have the ability of using expo client to run your app and you still have the ability to use expo modules inside your code but when you choose react-native you can't use expo client instead you have to use the native tools, anyway in all cases once you eject your project you have to build it yourself and you can't undo this step.
Sidenote
You can build very powerful apps using only JavaScript without any need to eject especially when using `expo SDK 31+, I'm working on an app now with features like detecting location, live maps, social login and chat and I don't need to eject it at all.
Please take a look here and here
Update:
One last thing you have to remember is that when using expo or expo-kit you can keep developing ios app on any OS but when using react-native you can't do this you MUST have a mac.
I am new to React Native and I know that there are two ways to develop native applications using react native
1- react native init --> need to compile the native cod
==> Result is Native Application for Android "Android SDK required" and Native Application for IOS "Xcode required"
2- create react native app --> no need to compile the native code !!
as CRNA uses Expo_SDK to access native API, but :
Is the result app is really native! or Expo Sdk is like Cordova but used by React and if result native, Expo claims that the result is native!, have they cloned both Android Sdk and Xcode for IOS or how does it work ?!
Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device’s system functionality (things like the camera, contacts, local storage, and other hardware). That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
Expo also provides UI components to handle a variety of use-cases that almost all apps will cover but are not baked into React Native core, e.g. icons, blur views, and more.
Finally, the Expo SDK provides access to services which typically are a pain to manage but are required by almost every app. Most popular among these: Expo can manage your Assets for you, it can take care of Push Notifications for you, and it can build native binaries which are ready to deploy to the app store.
You should take a look at the Expo doc
Expo app is as native as React native. They do the following things so you don't need to setup Android / iOS SDK locally.
provide Expo App on Android/iOS
so you can build the js code and use Expo App to debug during the development.
provide build server
once you run expo build command, expo will upload the compiled js code and build Android/iOS file on their server. You can download the built file from their server.
You can eject from the Expo, setup Android / iOS SDK locally, and build the app as normal React Native app
Expo (and react-native) apps use native (android and ios) ui components to render the apps ui, like any native android or ios app would. Therefore they can be considered as native apps.
However your app logic is executed within a javascript thread an will communicate with the native threads (through the react-native bridge) to modify the native ui components. Since the bridge is completely asynchronous this should not affect the native ui performance of your application. If you want to understand the communication between js and native code it may be a good start to read this guide.
2- create react native app --> no need to compile the native code !!
With expo there is no need to compile native code, as expo already includes a "ready to use build" of react-native along with several other common react-native libraries. In an expo app this will be used together with your javascript bundle which than communicates through the react-native bridge with the already present native part.
They are basically just abusing the fact that you can inject different javascript bundles into a prebuilt react-native app. (as long as you are using only accessing a subset of the native functionality of that prebuilt app)
Note that Appcenters codepush uses the same functionality and their setup integration actually delivers a nice example how different javascript bundles can be loaded without touching the native part:
in ios AppDelegate.m this line is changed:
original react-native js-bundle loading which always resolves a static bundle
return [[NSBundle mainBundle] URLForResource:#"main" withExtension:#"jsbundle"];
js-bundle loading with codepush which can resolve to different js-bunldes
return [CodePush bundleURL];
Link to full codepush ios integration guide