I am trying to add an app icon to a react-native application and am not able to do so also could hardly find anything about this in the documentation or any other sources which I am able to implement successfully.
Got this one working by using react-native-icon Package but is there Something like a single command to get icons configured into the respective folders when they are created using react-native eject command.
The app icons are controlled from the native side of the project.
You can set them up from Xcode or Android Studio fairly easily.
Perhaps take a look at Xcode 9 - Add an App Store icon and Set icon for Android application
use android asset studio
drag and drop your icon and change filters if you like and then download it.
Unzip it and then replace your res icon folder with this one
indepth tut tutorial
Related
I'm working on a react-native app using expo.
I have no problem to display the application on my Android Phone using the QR CODE provided by Metro Builder.
But I would like my customers to be able to see my project even when i'm not working on it.
I published my application using expo publish and Metro Builder gave me a link that is similar to this : https://expo.io/#USERNAME/projects/MyProjectName. My project is in unlisted visibility, so that anyone with the link can see it.
Yet, i'm not able to open it in my Android Expo application. When I visit the link, it doesn't ask me to open it with Expo, and there's no button to do it. If I try to copy the link to my clipboard, and then click Open from clipboard in Expo Go, it will open the navigator again.
I also tried to generate a QR CODE from the link, but it does the same.
How do you open your project in Expo Go when you're not into development ?
You can just use the QR code which already generated by expo is provided in that project link eg. https://expo.io/#USERNAME/MyProjectName or with release channel https://expo.io/#USERNAME/MyProjectName?release-channel=MyReleaseChannelName
Take a screenshot of that QR code and send it. Regardless of the project visibility they will be able to install the app by scanning it with their phone.
I'm trying to understand React Native development environment. I'm using Visual Code in Windows.
I've got a simple project A that I set up using the Expo tutorial as a "Managed Expo Project". Just a simple page and I'm trying to use a checkbox component.
I've got another inherited React Native project B, and I want to find out if it's a "Managed Expo Project" or a "Bare React native" project. It does include Expo, but I have read that even a Bare React Native Project can include expo.
So: Is there a setting on a line in a config file somewhere that makes it one or the other? ie Does the existence of "expo": "~40.0.0", in dependencies in package.json define it?
(I came to this point because I'm trying to use CheckBox from "#react-native-community/checkbox". Project B builds fine when using this, but my simple project A does not. I see on Expo website that this does not work with Expo, and that we are supposed to use a component Expo-Checkbox instead. SO I wanted to confirm the 2 projects are both expo-managed.)
Thank you.
Run expo diagnostics in your project and it will tell you what workflow you're using. The heuristics used to determine your project type are:
do you have an ios directory or android directory?
do you have react-native-unimodules in your package.json?
Usually people end up with a bare workflow project by accident when they eject and then don't properly revert their project once they decide to abort.
npm install expo-env-info
npm expo-env-info
Outputs
...
Expo Workflow: bare
I know it might be very basic question. But I am very new and got a codebase with only android support. I need to add iOS for it. Please help me
As you're aiming to build a cross-platform app, React Native provides two ways to organize the code and seperate it by platform: platform module or platform-specific file extensions.
As you already have an Android app, I assume it has more complexity so you might want to split the code out into separate files.
You say you have an Android app but i don't thing that at any point you specified that the app should only build for Android (you can review in the package and the project configuration). So, the following command should be enough:
react-native run-ios
If you created your react native app from a template (e.g. using npx react-native init ProjectName), it already provides an ios and android folder, so it already supports it. If the file is not there, you could follow the instructions that #Rajan shared above to recreate the ios folder.
If your problem is running the iOS application using npm run ios, and its failing to build or the javascript throws an error, the quickest thing to try is cd ios, then pod install. If this does not work, it might be because you have additional dependencies you have installed, which require specific instructions and configuration to be done in the ios folder. This is library dependent, if needed, will be explained in depth in the README.md of the library. For example, react-native-firebase has a lot of steps, and is different to the android configuration.
Sometimes it is helpful to modify these configurations in XCode instead of editing the files manually (e.g. plist, xml, xproj). You can open xcode quickly using xed ios when in the root project folder.
Note: As usual, remember to have the libraries available in the node_modules folder, npm install.
In the future, you might choose to run different javascript code based on the platform (platform-specific code). React native allows that by using file.android.js and file.ios.js. However, your IDE is likely to struggle with the 2 files, and won't be as helpful compared to file.js. Alternatively, you can import Platform and conditionally check at runtime, what your platform is.
If you used Expo, you don't have access to the native code, but will already support iOS.
I have created a react-native app using expo. Now I am looking for share-extension to the app to import CSV data from email attachment to my app.
I have tried npm package but that does not work for me(I was not able to build my project with that npm package in Xcode)
I think react-native or expo does not have any share API
In this picture, you can see how he got the option to import data into the app.
I understand that without share extension API, I think react-native and Expo both are useless because you can create the app but you don't expand it.
Looking for the solution or any other alternate solution.
I'm afraid this is not possible with expo.
First of all, are you looking for a way to create your own extension, or do you just want your app to be in the "open with list" that you have in the screenshot on the right? (Sharing and "open with" are two distinct things.)
If you just want your app to be listed in the standard "open with list", you do not need to use github.com/alinz/react-native-share-extension since it serves a different purpose. To quote the repo:
This is a helper module which brings react native as an engine to drive share extension for your app.
So with the package you can use react native to create your own share extension
To get your app into the "open with list", you need to go to target settings and change it according to the screenshot (example for MS word). Read more about it here. However, I'm afraid you won't be able to do this with expo without ejecting.
How to get the url of the file in react-native? You need to make sure that libRCTLinking.a is in the Link Binary with Libraries in Xcode (it'll probably be there already). And then you can follow the docs and call Linking.getInitialURL to get the file url. Then it really depends on what you want to do with the file. If you need something complicated, you'll likely need to write native code. If you just want to upload the file to some server, then you can make use of blob support that was added to RN 0.54 in this commit. An example of how to use the blob support is here.
I want to know if it's possible to have "dynamic" app icons for both Android and iOS apps when using React Native.
Ideally, I'd like my dev / beta app to have a different icon so I can tell it apart from the production app, without having two different apps completely.
For iOS you can create multiple targets using xcode. You can do this by duplicating the configuration of your existing app, then adding the new icons to the newly created target.
Here is a guide on how to do that.
https://engineering.circle.com/different-app-icons-for-your-ios-beta-dev-and-release-builds-af4d209cdbfd
Android apps already have two build types, release and debug. To add new icons for the debug (dev) build simply add a new src file called debug containing the respective icons. Here is more info on how to do that.
How to provide different Android app icons for different gradle buildTypes?