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.
Related
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.
I have made a custom wrapper in android for react-native. When I am using react-native link to install dependancy in android for my Project, it is not doing any changes neither showing any errors. I have followed this document https://www.botreetechnologies.com/blog/how-to-build-a-react-native-android-bridge for same but I have to make changes in android files manually for my Module and package. Do I need to add build.gradle too in android directory? or any other file if I have missed. This is my file structure for bridge.
This is how I am importing my local package in another React Native package's package.json
So currently, I'm working on moving my React Native project outside of Expo and using regular React Native.
As I expect, it generates an ios and Android folder. However, there are about 5k+ worth of files and folders being generated here.
I know that React Native allows you to write your hybrid code in JSX which generates native code in your android and ios folder. You can also write custom native code in the android and ios folders.
My question, how do I know what exactly React Native generates in those folders and which of those files won't be clobbered if I make changes to it?
While creating an app in react native, I didn't get sub directories like android,or IOS. I Used create-react-native-app command.
New version of CRNA integrates Expo Toolkit, and android and ios folders are hidden. If you want to separate these folders, you must detach expo from react native app.
npm run reject
You can read more detail at CRNA's github
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.