I am a beginner at React Native and have begun to take some time off to work on my new app project. I have noticed that there is a lot of difference with RN old and the new version. One is the combination index.js and App.js instead of index.android.js & index.ios.js.
The other is the new folder structure after react-native init-ios/android is completely changed. Following the standard installation guidelines and creating RN project, I do not see App directory created at all (the only folders are tests, android, iOS, node_modules.
Have you seen this after the latest upgrade? How do I rectify this? Any suggestions will be great.
Create your own app directory, put all your logic in there.
Import the root file into App.js in root folder.
$ react-native run-android or $ react-native run-ios` and app should run as expected.
You can use create-reactive-app with expo if don't wish to use the react-native-cli. See react-native docs, getting started for more information.
Related
Right now I am trying to add sqlite-storage(https://github.com/andpor/react-native-sqlite-storage) and react-native-fs(https://github.com/itinance/react-native-fs/) to a project being done in react-native. Both, however, require me to add some lines of code to the ios and android files. Case is, I created this project using expo, and expo doesn't seem to have those files available.
Currently, I am trying to create some sort of offline storage for my app (I think I'll ditch sqlite because it won't be as necessary and just keep the react-native-fs and write the data on JSON).
I have already tried linking and re-installing it many times and it doesn't seem to work, since it keeps returning the "RNFSManager is undefined" error when I use react-native-fs. A few of the people with this problem I found said they had to manually link, but they all had access to those files I don't have (like setting and gradle, things expo doesn't give me direct access to), so I am not sure what I should do.
SQLite and FileSystem are both included on expo.
First you need to add them to your project with:
expo install expo-sqlite
expo install expo-file-system
Then you only need to import them
import { SQLite } from 'expo-sqlite';
import * as FileSystem from 'expo-file-system';
For more info you can check the expo docs for
FileSystem
and
SQLite
You will need to eject your expo project, so the android and ios folder will be created.
After that, you will be able to add nativecode to your react-native app.
The expo documentation is nicely done, you will have all the infos about the pros and cons of ejecting
I am new to Expo but so far it seems super neat not having to open up Android Studio / Xcode to run my app locally. Not having to touch that stuff makes it so much more convenient to develop.
However, I want to incorporate in app purchases (subscriptions) in my app and from the research I've done so far it doesn't seem like Expo's solution (https://docs.expo.io/versions/latest/sdk/in-app-purchases/) is very developed.
I found this npm package for in app purchases and it looks promising: https://github.com/dooboolab/react-native-iap. However it is not supported by Expo, and I don't feel like it's worth giving up all the benefits of Expo just for this one feature.
I noticed a comment in the issues here that was quite intriguing: https://github.com/dooboolab/react-native-iap/issues/174#issuecomment-393704277
This person suggests that I can continue using the master branch with Expo, and then following these steps to eject and deploy when time is ready. I've never done this, but I'm wondering if this could work:
On master:
1) Run npm install --save react-native-iap but DON'T run react-native link react-native-iap.
2) Wrap my In App Purchase module with this code. This way your code won't crash when calling IAP methods
import { NativeModules } from 'react-native';
const { RNIapModule } = NativeModules;
function hasIAP() {
return !!NativeModules.RNIapModule;
}
3) Continue developing using Expo, and just skipping the IAP stuff if !hasIAP()
On separate branch used for final QA / deployment:
1) Create a new branch called detached
2) Run expo eject
3) Run react-native link react-native-iap and all the other Manual Installation steps listed here: https://github.com/dooboolab/react-native-iap#manual-installation
4) QA everything
5) Deploy
Does anyone have experience doing this hybrid "expo for development, no expo for production" approach?
If you eject and use the Expo, you can use it like a default React-native project. The Android folder and the iOS folder are created and you will enter the appropriate package name before you create them. The modules you have installed and the modules in Expo are added to the package list when you eject the Expo. Check MainApplication.java for Android or Info.list files for iOS. There are some things that do not apply to App.json settings that were responsible for setting up after you ejected the Expo. It can be set up by referring to the official document.
Once the Expo has been ejected, the React-native link command is performed brilliantly.
ejecting the Expo does not change or disappear from the module usage
I am familiar with React Native. I got a new macbook and I am trying to create a new file. However, when I run create-react-native-app [name of app] I am greeted with:
This command requires Expo CLI.
Do you want to install it globally [Y/n]?
When I pressed Y it created the file, however, in a complete file layout. It looked so odd and there were some files missing too.
Normally, when I run create-react-native-app it created the file without asking anything about expo. I am pretty confused. I'm pretty sure I have done wrong somewhere. Where and how I can get the traditional installation process back?
I also know that expo helps with testing. Since may I have been using npm start and npm run ios to test my apps on device and xcode simulation.
https://facebook.github.io/react-native/docs/getting-started I followed this.
New version out now and create react native app has been merged with expo CLI.
To avoid any bug use new version to create react apps, follow the command bellow which is also in the link given in your question.
expo init AwesomeProject
After installation you will be guided to start project with expo start.
cd AwesomeProject
expo start
I am new to application development with React-native. While creating project with the command react-native init appname the index.js file is also created inside the project folder. Today, I have learned that there is a better way than installing android emulator to test react-native projects which is Expo. To create expo projects I need to create react-native project with create-react-native-app appname command. However, the index.js file is not created while creating project with this way. Even though, I manually created the index.js file, it does not work as it should.
One more question: What is aim of App.js and index.js?
React Native: (react-native init)
A little bit of history. In earlier versions of React Native, separate index.js files were required for iOS and Android. App.js was meant to contain the top level cross platform code for your app. Then index.ios.js and index.android.js would import the cross platform code from App.js and register/link it with the underlying native modules. That allowed you to place top-level cross platform code in one file while placing top-level platform specific code in other files. The index.*.js files were the connectors that wired up the Javascript to native Android or iOS code.
As React Native evolved to remove the platform specific index files, they kept the paradigm of having the top-level Javascript in App.js and using index.js to wire that code to the native modules.
Bottom Line
As a practical matter, don't touch index.js. Make your top-level modifications in App.js.
Expo: (create-react-native-app)
Expo operates a little differently than baseline React Native. You will notice that an Expo project does not contain the ios or android directories. That is because there is no native code associated with an Expo project. All of the native code is contained in the Expo SDK. Since there is no native code to wire up to your Javascript, you do not need an index.js file.
Bottom Line
You should not need an index.js file in an Expo project. If your Expo project is not working, there is likely another problem that needs to be resolved.
Missed index.android.js file ?
In project created with create-react-native-app you don't get index.android.js / index.ios.js files. Infact you won't get those files even in projects created with react-native-init starting RN v0.49( https://github.com/facebook/react-native/releases/tag/v0.49.0 ). Maybe a typo in the question or some confusion create-react-native-app creates a React-Native app not an Native script app.