I noticed that create-react-native-app isn't creating an android/ subdirectory in my project. Is this normal behavior? I'm using Node 8.1.0, NPM 4.6.1. Here's my directory structure:
I need to edit the AndroidManifest.xml file, which is supposed to live in the android/ subdirectory, but apparently it doesn't even exist. Why is this happening? Thanks.
This is a normal behavior.
When you need directories ios/ and android/,
yarn run eject
When you create a react-native app, its comes with Expo.
Expo is a free and open source toolchain built around React Native to help you build native iOS and Android apps using JavaScript and Reac,it lets you build with their app on both ios and android.
When you eject, you create your own files, but lose the power to build on IOS without a mac.
react-native eject should do the work if you want.
react-native init ProjectName
This should create your project with ios and android folders and without depended on Expo.
Also about your question:
The init command for react-native installs all the necessary components it needs and starts up the environment to start developing in react-native. It’s required to start working in React Native, just like git init to initialize a git repo, or npm init to create a local package.
create-react-native-app is something else entirely, it’s based of the original create-react-app started by Dan Abramov (the creator of Redux). In short it’s an encapsulated and curated bundle of developer tools designed for bootstrapping projects and helping beginners learn the react-native without having to deal with all the tedious configuration usually associated with creating a React project (setting up Webpack/babel, configuring hot reloading, testing, linting, etc.).
The init command is vital to react-native, so get used to using it. If you are new to react-native I would highly suggest though you look into create-react-native-app, it’s an excellent steeping stone for learning the heart of react-native before having to deal with configuration. This comming from a guy who learned react-native the long way, I wish it would have existed when I was learning.
Source: https://forum.freecodecamp.org/t/difference-between-create-react-native-app-and-react-native-init-app/103609/2
Related
I am modifying a specific node module (react-native-keychain) for android, but I am not sure if changes are affecting yet. What is the procedure to rebuild the project? - Will these just work or am I doing something wrong? (I am using a real device)
npm install
npm start
react-native run-android
Thanks
For reference, this is what I want to achieve:
https://github.com/oblador/react-native-keychain/issues/337#issuecomment-728191068
Also, it is: "react-native": "0.63.2", so linking is not required
A rebuild will usually consist of re-install packages, re-link as necessary, then fire off the build/run script.
However, there are a lot of factors that influence the correct approach.
For example, is your development OS Mac, Windows or Linux? Is your project Expo managed, or is it full React Native.
I would suggest you take the awesomely comprehensive React Native docs as a starting point:
https://reactnative.dev/docs/running-on-device
If that doesn't do it, look in the side panel of that site for additional information -- you might want to start with the section entitled 'The Basics' and take it from there.
I just started using expo for developing an app when I found out that apparently there are two different approaches into app development.
If I run:
expo init test
It prompts the following:
Choose a template: (Use arrow keys)
----- Managed workflow -----
❯ blank minimal dependencies to run and an empty root component
tabs several example screens and tabs using react-navigation
----- Bare workflow -----
bare-minimum minimal setup for using unimodules
If I chose bare-minimum option, I get the following directories:
android App.js app.json babel.config.js index.js ios node_modules package.json package-lock.json __tests__
So as if I chose blank I only get the following:
App.js app.json assets/ babel.config.js node_modules/ package.json package-lock.json
What I know so far: You can use React-Native, or Kotlin, or another language for different platforms.
What I don't quite understand: Apparently you can build your app with React-Native and get deeper access to platform resources with another language such as Kotlin, Java or Swift... Why is this necessary? Why you React-Native doesn't use full resources in the first instance? And finally, how react-native links with such a different languages?
You are using an Expo. Expo is a tool that assists React-native. If you want to use Java or SWIFT language, you must eject Expo. Create your own modules in JAVA or SWIFT and use them in React Native.
useful links:
Expo eject(ExpoKit)
Create Native Modules in ios
Create Native Modules in android
react-native link after Expo eject
I've built some little prototypes within Expo with React Native but now I'm in the middle of a real project and I'm now discovering I will definitely need to eject my project for certain components to work.
My question is, once I eject, can I ever write React Native Code without having to init again which I assume will erase any changes I made at the native level?
Any techniques or references are appreciated.
Your question is a bit confusing, so I'll try to answer it as best as I can.
TL;DR: You will be able to write React Native code once you eject from Expo without having to use expo-cli init.
Expo Init
When you say "...can I ever write React Native Code without having to init again..." I assume you mean exp init (or expo-cli init) as opposed to react-native init. These commands merely initialize the project for you, so you shouldn't need to run them more than once.
For more information about how they differ from one another I recommend this GitHub issue thread.
Expo Eject
Expo allows you to eject your pure-JS project from the Expo iOS/Android clients, providing you with native projects that can be opened and built with Xcode and Android Studio. Those projects will have dependencies on ExpoKit, so everything you already built will keep working as it did before.
This means that when you eject your app you'll be writing React Native code outside of the Expo client environment, meaning you'll have access to the native code for Android and iOS. Even so, you will write normal React Native code (Javascript and JSX).
Also once you eject, Expo will add Expo Kit to your project which will give you access to some of Expo's features. For more information check their docs.
I am going through the React Navigation documentation.
In the React Navgation - Getting Started instructions, it says that
"To finalise installation of react-native-gesture-handler for Android", I need to edit the MainActivity.java file.
However I don't have that file in my project, or any other similar directory pertaining to it (./android).
I created my project using expo-cli, in particular:
# To create a new React Native project
$ expo init project-name
# And to run the App in Expo
$ expo start
I am wondering if I have to create a build and how is it done, in order for Expo to create the files used by Android and iOS builds, or is there something else that I'm missing?
Expo
As you used Expo to create your app you will not have an android folder as these are abstracted away from you.
If you wish to use a dependency that requires you to edit native code then you need to eject your application. https://docs.expo.io/versions/latest/expokit/eject
From your command line run expo eject and it will build the necessary ios and android folders for you. However there are several ramifications if you eject your app. You should read the above link carefully.
react-navigation
However, as Expo recommend using react-navigation you don't need to install the react-native-gesture-handler as it is already installed in Expo
https://reactnavigation.org/blog/2018/11/17/react-navigation-3.0.html#installation
First, install the library using your favorite package manager:
yarn add react-navigation#^3.0.0
Next, install react-native-gesture-handler. If you’re using Expo you don’t need to do anything here, it’s included in the SDK.
It even mentions it on the installation instructions page https://reactnavigation.org/docs/en/getting-started.html#installation
Next, install react-native-gesture-handler. If you’re using Expo you
don’t need to do anything here, it’s included in the SDK. Otherwise:
react-native-gesture-handler
Similarly checking the documentation for react-native-gesture-handler it says:
Gesture Handler is already part of Expo and there is no extra
configuration required. However, consider that the Expo SDK team may
take some time to include the newest version of the library - so Expo
might not always support all our latest features as soon as they are
out.
https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-expo-https-expoio
Creating a build with Expo
There is no point repeating the steps here to create a build with Expo it goes into quite some detail in the Expo documentation which can be found here https://docs.expo.io/versions/latest/distribution/building-standalone-apps
I need some clarify of the difference between create-react-native-app then detached and react-native init.
I understand that the former one will create an app based on the expo and later require detached to expose the native code of android and iOS for native code implementation. The react-native init will generate the native code at the same time.
Are there any difference after detach from expo after created from create-react-native-app command, compared with react-native init?
The only significant difference is that you still depend on the Expo SDK. From the website:
We call this "detaching" because you still depend on the Expo SDK, but your project no longer lives inside the standard Expo client. You control the native projects, including configuring and building them yourself.