I want to create my own podcast app.
I found this pre-written code online (github.com/diego3g/rocketcasts) and want to tweak it in order to create my own app.
How do I upload this code into expo?
Unfortunately that React-Native app was not built using Expo. You can tell because it has ios and android folders in its root directory.
Digging deeper you can see that it uses react-native-config as a dependency. This dependency requires access to native code, which Expo does not allow. You would have to go through and remove any dependency that requires native code if you wish to use Expo. This may remove functionality and could take some time to resolve issues.
Also this application was built using react-native: 0.47.2. Currently the most recent version of react-native is 0.57.8 with 0.58.0 just around the corner. That is quite a jump to make if you plan on upgrading the react-native version. Upgrading RN is not as simple as just changing a version code.
Similarly the repos last commit was over a year ago. That means that the majority of dependencies will be out of date and will need upgraded. Again, some dependencies aren’t a simple upgrade you would need to check every single one to make sure that it doesn’t cause unforeseen problems. You would also need to check their compatibility with Expo.
Personally I wouldn’t copy the project. I would look at how they have implemented the functionality and then in a new react-native project I would re-implement the functionality. That way all dependencies would be up to date and you would know that it would work.
Going down the path of editing an existing project like this one may be quite a challenge.
Either way good luck.
You can find more information about Expo here https://docs.expo.io/
And you can find a good explanation of the differences between Expo and react-native init here What is the difference between Expo and React Native?
The standard way to tweak an existing GitHub repository you don't own is to:
fork the repo (that is a GitHub operation, creating a copy of the repo in your account)
clone it and modify it: you can then push back to your GitHub fork.
Related
Has anyone been able to get React-Native 0.7, React-Native-Web and React-Navigation/Stack 6.2.3 to work on web? I have a small app working on iOS and Android which I am trying to enable on web too. iOS and Android portion work fine and using metro.
However, webpack build continues to error out with "Module parse failed: Unexpected token" on the NavigationContainer.
I tried searching both react-native-web and react-navigation Issues on their respective GitHub Repositories. However, could not find something to solve my issue. Also tried modifying webpack.config with several different configurations/loaders.
Used links below as a reference too:
https://arry.medium.com/how-to-add-react-native-web-to-an-existing-react-native-project-eb98c952c12f
https://gist.github.com/skabbes/0bfa0a969aac8ec13f716dda1ad2ab43
Yes, it happens that I maintain a library that does just that: creates a bare React Native app that also runs on the web: 🌒 Luna - https://github.com/criszz77/luna
Here is the live example: https://criszz77.github.io/luna/
You can find more on the wiki page about how it's implemented and you can also implement it by yourself: https://github.com/criszz77/luna/wiki
By using react-scripts, you don't have to handle webpack, babel and other hard configs by yourself.
It currently doesn't run on 0.7 (didn't have time to make the update), but it's in plan to support all the latest versions of course ASAP.
EDIT: Updated to 0.70.3 🎉
I used to see lots of articles about native modules inside RN apps, but very few about RN inside native project. Let's say we have a project, in which we want to add a single screen fully developed using RN. As far as i know, instagram have something like this. I have read official documentation about this, but it left too many questions. Does anybody know the good step-by-step implementation guide?
Mostly, i'm interested in:
What is the structure. Do i really need to move all the project inside /ios and /android folder, wrapping the whole project? What if the project have separate repositories for both platforms?
Do native developers need to install node environment in order to continue working on the project, installing node_modules and staff?
How much is the influence on the app size?
UPDATE: 07.20.2021
I'm still not able to run an RN screen inside native projects. The docs i told about before doesn't contain actual info, steps are not properly described, and even writing exactly as they told, the project still cannot run and crash as fast as i change activity to RN one.
Here are some points related to the questions that you have which might help you.
No, You don't need to move the whole native code to the /android and /ios directory.
Yes if you are about to open the RN screen from the native app you should have set up the react-native environment properly.
The app size might increase as there is a bridge created with javascript and native code. but you should have a choice to upload the .aab bundle file which helps you to provide the platform-specific builds to the users.
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'm using react-native-code-push for my app.
I had released several versions that change only a few of js bugs, which worked fine.
Recently I realized that if a code pushed release involves any change of native code other than javascript, the app crashes while updating. I added several react native packages that need manual linking such as react-native-maps, and released update to some targeted versions hoping them to take those, but no luck.
Then what if an update only involves adding light libraries (using npm install) which don't require native linking? I wonder to what extent exactly the code push allows client-side code updating.
Basically, when you want to add some native code involving link you will have to rebuild your apk / ipa and re-upload it to the stores. If you want to add a new plugin without link there should not be any problem
One advice I could give is to only push bug fixes to your production app. You should not push new features with codepush since apple review (almost) all the applications.
I am working on a project already exists native base and I want to add expo to easily test my application.
The easiest way to do this is to make a new Expo project and copy over all the JavaScript from your existing project.
There isn't a way to react-native link expo or anything like that right now. There might be in the future but even then that wouldn't enable the easy sharing that you want. To get that you need to just use the binary code included with Expo (which can do most things you want to do).
Here is more info: https://docs.expo.io/versions/latest/introduction/faq.html#how-do-i-get-my-existing-react-native-project-running-with-expo
Expo can now be added to an existing project, run the following command for automatic installation:
npx install-expo-modules#latest
If the command fails, you can refer to the docs for manual installation instructions.