How to run/install the React Native official examples? - android

For example, I'm trying to run the UIExplorer example.
I cloned the https://github.com/facebook/react-native/tree/master/ repository.
Did react-native init ExplorerApp
Copied everything inside the UIExplorerfolder and pasted it inside the ExplorerApp folder (except the android folder)
However, when I run ExplorerApp I still get "Welcome to React Native"!
Maybe I have to modify index.android.js so it somehow points to the pasted files? How to do that?

To run the official RN examples, follow these steps
git clone https://github.com/facebook/react-native.git
cd react-native && npm install
iOS
Now open any example (the .xcodeproj file in each of the Examples subdirectories) and hit Run in Xcode.
Android
You need to install Android NDK : see prerequisites here
To start the Movies Example :
./gradlew :Examples:Movies:android:app:installDebug
Start the packager in a separate shell (make sure you ran npm install):
./packager/packager.sh
Open the Movies app in your emulator

Related

error Android project not found. Are you sure this is a React Native project?

after serval days with react native and android running, I added some external libraries, and all was well.
After re-start of the computer, I got back to the root of the react native project and typed
npx react-native run-android
And got back the error msg
error Android project not found. Are you sure this is a React Native project? If your Android files are located in a non-standard location (e.g. not inside 'android' folder), consider setting `project.android.sourceDir` option to point to a new location. Run CLI with --verbose flag for more details.
my Android project is in standard location : MyReactProject\android.
Any ideas what happed or how to fix this?
I have found a solution that works, but it still don't know what went wrong.
probably from installing the new packages.
Open the Root Directory of my React Native Project
go to \android\app\build\intermediates\signing_config\debug\out
Delete the file signing-config.json
go back to Root Directory
type npx react-native run-android
the solution is based on this site, hope this will help others.
You should check your manifest
I did not have the tag closed
Just found the solution.
You just need to go to node_modules -> glob -> common.js
Find options.allowWindowsEscape and set it to false
It worked for me and it also took 3 hours to find the solution. Hope it will work for you as well.
Make sure you have "android" and "ios" folders in your project root directory exactly like below pictures shows. If you don't have these folders then create them.
npm i react-native-eject
npm i #react-native-community/cli
react-native eject
react-native upgrade
So Basically the Problem Could Be That You May be starting expo CLI quickstart Project in "React native CLI Quickstart" .
There are two ways :-
https://reactnative.dev/docs/environment-setup
the problem can be solved by :-
1)npm install -g expo-cli
2) expo init AwesomeProject
cd
npm start # you can also use: expo start

React Native - Open Old Version Project (up to 0.48v)

I learning React-Native with Windows 10, Using Git Bash Command Prompt and Android Studio Emulator.
I have Install React Native globally by using npm install -g react-native-cli, I always create Project using react-native init ProjectName and
My Project Launching Method is
go into Project Directory with Git Bash CMD and execute react-native run-android.
I notice that most of the Project in Github are older version which consist of index.android.js and index.ios.js (My Project is newer version so it only have index.js). I been trying to open some older version Project, but it seem like it just does not launch with the method I mentioned above.
I also have tried react-native start method from How to open existing project in React Native? but I still not able to launch it.
The error message when I trying to launch the project is Command unrecognized. Make sure that you have run npm install and that you are inside a react-native project. This Problem only occur when I trying to launch project from Github, when I open my own Project there is no such problem.
ps. If I try use npm install in the project directory, it will have some error.
I have try to search from Net, most of their launching method are the same as above and does not work for me, so wanna ask that:
Is my method of launching React-Native is wrong in the very beginning?
Is there anything I need to install so that I can open old version React Native Project?
How can I open this project with my current situation? https://github.com/parkerdan/SampleNavigation
Thank you.
Extra Info (React Native CLI and Node Version):
$ react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
> process.version
'v8.9.4' (Node Version)
After whole day of Searching, I have found the Solution.
Whenever open any Project from Github or any sources, we have to ensure that the we have install all the required Dependencies, as Most of the Project using different type of dependencies that you may have not ever install.
Solution:
Download project
git clone https://github.com/parkerdan/SampleNavigation.git
2. Go to the Project Directory and Install dependencies (IMPORTANT)
Note: For unknown reason, npm install does not work
npm i
or yarn i
Run Project (or any launch method that work you)
react-native run-android
After you clone your project from git and cd to project folder, make sure you run npm install before you can react-native run-android.

React Native iOS and Android folders not present

I'm new to react native, and I've been having some trouble understanding the folder structure of the app which should supposedly be present in the project folder on creation. Basically, when creating the project with npm, I get some starting files (App.js etc.) and a node_modules folder. I've got it up and running with expo, which created the .expo folder as well.
However, when I go to react's official documentation or look into plugins/addons on git they talk several times about an android and an iOS folder in the project root. But they are nowhere to be seen. I then got some hints that I could install and run react-native-upgrade-git, which allegedly would generate these missing folders. But that didn't work either.
So what have I missed? Where are those folders located?
Edit: Here is a screen dump from a Youtube tutorial showing the project structure I'm looking for:
One of the points of Expo on top of React Native is that you don't go down to android or ios code. Expo deals with those folders for you, you don't need to interact with them. Is there a reason you need those folders? if so, you will have to eject. Here's the documentation to do so: Ejecting with ExpoKit
You can get to that project structure by running:
npm run eject
However, it removes the app from the Expo framework, which adds a lot of nice benefits and abstraction from the Android/iOS code.
i think if you want to develop app with ReactNative you start follow this : Getting Started use React Native.
If you create project with ReactNative just write on your terminal like:
react-native init YourProjectName
cd YourProjectName
react-native run-ios //for iOS
I hope my answer helping you to create project with ReactNative. thanks..
Check this Expo document Adding custom native code
In general,
to generate ios folder: expo run:ios
to generate android folder: expo run:android
Try this to generate the Android and iOS folder
react-native eject
react-native link
To add to Funk Soul Ninja's answer after following his directions (thank you! :) ), for those who started with an Expo project:
expo run:ios
did the trick for me.
The command creates the ios folder that contains the project that can be edited and built in Xcode.
I did not do this step, but I believe expo run:android does exactly the analogous thing for Android; but I would suggest checking out Expo documentation on adding custom native code.
I think I am little late but follow this steps if you don't want to read any document.
android and ios folder are not present when react native project is created with expo. so you have to detach expo from your project to create android and ios folder.
first add required package name in app.json file
ios: {
bundleIdentifier: "com.yourcompany.yourappname",
},
android: {
package: "com.yourcompany.yourappname",
}
then run below command in terminal
exp detach
after command is successfully executed you will find android and ios folder
Delete folders android and ios
npm i react-native-eject
react-native eject
I had to run expo eject. The story behind why I didn't have the folders is had to downgrade my react-native application because of some broken dependencies and then I got build failures. So I deleted the ios and android folders then ran expo eject and got all the build issues fixed. Note that I used expo command line via a script in package json so that the versions would match the version my project was using.
run this in the root directory
expo eject
in the begining install react native, after run expo init YourProject , choose minimal (Typescript) . after that go to YourProject directory and do not run npm start. but run npm run android. hope this help
This worked for me: Go to Setting and remove both entries "android" and "ios" from "Files:Exclude". Don't forget both environments - User and Workspace.
Removing entries on Workspace:
... same for User:
If you created the project with Expo you will have the Expo folder instead of ios and android folders
If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues:
npm uninstall -g react-native-cli #react-native-community/cli
then create a new project again:
npx react-native init DemoApp
The simplest way I know
1) Take your app name from your current app.json, let's say the name is "mynativeapp"
2) make a new folder somewhere outside of your current project folder
3) start in it:
react-native init mynativeapp
4) the command above will make android and ios folders internally compatible by name with your project
5) copy android/ios folders into your project folder
Now you can try to start your native project. I checked that for Android:
react-native run-android
enjoy!
P.S. "react": "16.9.0", "react-native": "0.61.4"

why $cordova prepare when use a new phonegap-cordova api(plugin)

Im new with phonegap, cordova and android. Im on mac, recently i install all the needs:
Phonegap 3.3.0-0.19.6
Cordova 3.3.1-0.4.1
Got Android SDK and running on eclipse with no problem. Then create a new Android application on eclipse for phonegap successfully, and running on a phone with android.
Then i create another app with cordoba(terminal), put 2 platforms android and ios, i run prepare etc.. and then import the project(android) into eclipse. At this point the app runs ok, so i proceed to install some plugins for testing (Notifications and Device)
https://cordova.apache.org/docs/en/3.0.0/cordova_device_device.md.html#Device
When i run the app with eclipse the examples always return
Uncaught TypeError: Cannot call method 'alert' of undefined
And its the same with device. So looking over the internet i found that if i run $cordova prepare will work, then i run the command, then run the app on eclipse and it work but always when i install a new plugin for testing i have to run cordova prepare, and the problem is that index.html rewrite with example hello world and i loose my code.
Any help over here, im doing ok?, how to install those plugins and make the test and dont have to run prepare all the time. (Please think on eclipse, i dont what to use terminal all the time)
I had the same exact problem and other posts suggestions didn't work for me.
I solved it by switching the steps a bit, despite the official docs and other posts.
If I add ALL the files AND the core plugins BEFORE I add the platforms, then adding the platforms takes these things with it into the new folder structures AND only build once from the command line before I open the project.
If I need to add anything I do it again. Although I can edit the www files without going through the process again, I do not expect the root www to perpetuate the platform www's. I just copy it myself into all the www folders. It shouldn't be this way but I think this is a well documented bug with multiple command line builds, for now and thats my working fix.
The recommended way is to edit html/js/css... in the root www folder of the project, not in the platfotms/xxx folders.
The reason is that if you have multiple platforms, you just need to modify in one place and cordova prepare or cordova build or phonegap build will propagate your code to all the platforms and update plugins.
If you have only android platform and want to be able to change code directly in eclipse for the platforms/android/assets/www folder, I suggest you create a shell script to
copy all the content of projectroot/platforms/android/assets/www to projectroot/www
run cordova prepare android
Then, instead of running cordova prepare android, you'll just have to run your script after you add new plugins.
Edit
I think there may be a better way for your problem.
You should be able to use plugman to install your plugins instead of cordova.
First you need to install plugman cli : npm install -g plugman
then install a plugin using
plugman -d --platform android --project projectname --plugin nameorurlofplugin
http://cordova.apache.org/docs/en/edge/plugin_ref_plugman.md.html
I had these issues too.
One approach I use now is:
Edit the index.html in the platform folders which is platform/iOS/appname/www and so. Then add plugins using the normal terminal way using cordova plugin add but always run the project using Xcode for iOS and eclipse and not from the terminal because then you will lose your code.
From my experience when you run using .xcodeproj or say android project the www on the inside is used and if you use cordova run ios from terminal the www on the outside will overwrite the www in the platform folders.
If you get xcode errors saying can't find so and so plugin files just move them to the path the error says xcode expects them to be in.

Phonegap 1.3.0 in Eclipse 3.7 on windows

I followed their "how-to":
Phonegap Start
Phonegap wiki
I have succesfully installed the android sdk, but I can not install phonegap 1.3.0. I'm stuck at this step: Step 4. Build the Example PhoneGap App
4A. Open a command window and change directory ('cd') to the 'phonegap-android' folder. In Windows, use git bash as the command window. In Mac OS, use Terminal.
4B. Run the following command. This will create a PhoneGap.jar file and create a basic Android Eclipse project in the output path that can then be opened in Eclipse.
NOTE: The droidgap script has been updated and now there are two methods to create the necessary files. The new script is significantly simpler to use than the old method. For those who prefer the old method, it is still available.
NEW METHOD:
4C. From the 'phonegap-android' folder, run 'ruby bin/droidgap create [path_of_application]'. For the example app, the command would be 'ruby bin/droidgap create example'. If the example folder does not exist inside 'phonegap-android', run 'ruby bin/droidgap gen' first.
These are the steps that I have took:
I have downloaded the callback package from git (see wiki)
I run git bash --> cd to the phonegap-android folder
I run this command: 'ruby bin/droidgap gen'
Then I get: No such file or directory -- bin/droidgap(loadError) and idd the file isnt there.
I can't find droidgrap, who has the anser for me....... The old method don't work either, because I need droidgap for that one 2.
In the end I want to develop a Sencha web app for my android device. What did I forget.... :'(
The AppLaud Eclipse plugin documented on the PhoneGap wiki here eliminates the need for droidgap or any other configuration. Its wizard creates a fully configured PhoneGap for Android project.
(Note: I developed the AppLaud plugin)

Categories

Resources