Как запустить чужой файл через react native

Как запустить чужой проект?

Добрый день . хотел скачать и запустить чужой проект, чтобы рассмотреть его функции. но столкнулся с рядом проблем . что он не изволяет запускаться , и просто не знаю что делать, помогите пожалуйста
___
КЛац

1) в рабочую папку скопировал tutorialProject
2) открыл VS code
3) зашел в рабочую папку и нажал открыть в cmd папку tutorialProject
4) далее я ввожу react-native run-android
и получаю фиаско

d:\JS\tutorialProject>react-native init tutorialProject
internal/modules/cjs/loader.js:657
throw err;
^

Error: Cannot find module ‘graceful-fs’
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:655:15)
at Function.Module._load (internal/modules/cjs/loader.js:580:25)
at Module.require (internal/modules/cjs/loader.js:711:19)
at require (internal/modules/cjs/helpers.js:14:16)
at Object. (d:\JS\tutorialProject\node_modules\react-native\local-cli\cli.js:12:1)
at Module._compile (internal/modules/cjs/loader.js:805:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:816:10)
at Module.load (internal/modules/cjs/loader.js:672:32)
at tryModuleLoad (internal/modules/cjs/loader.js:612:12)
at Function.Module._load (internal/modules/cjs/loader.js:604:3)

начал гуглить и нашел что надо сделать какието зависимости . посредством «react-native init MyProject»
5) react-native init tutorialProject
и получаю туже самую строчку .
пытаюсь через npm сервер запустить и тут прикол .
6) npm intall

d:\JS\tutorialProject>npm install
npm WARN deprecated core-js@1.2.7: core-js@<2.6.5 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm WARN deprecated connect@2.30.2: connect 2.x series is deprecated
npm ERR! path d:\JS\tutorialProject\node_modules\.bin\react-native
npm ERR! code EEXIST
npm ERR! Refusing to delete d:\JS\tutorialProject\node_modules\.bin\react-native: is outside d:\JS\tutorialProject\node_modules\react-native and not a link
npm ERR! File exists: d:\JS\tutorialProject\node_modules\.bin\react-native
npm ERR! Move it away, and try again.

Linking

This section only applies to projects made with react-native init or to those made with Create React Native App which have since ejected. For more information about ejecting, please see the guide on the Create React Native App repository.

Linking gives you a general interface to interact with both incoming and outgoing app links.

Handling deep links

If your app was launched from an external url registered to your app you can access and handle it from any component you want with

If you wish to receive the intent in an existing instance of MainActivity, you may set the launchMode of MainActivity to singleTask in AndroidManifest.xml . See <activity> documentation for more information.

NOTE: On iOS, you’ll need to link RCTLinking to your project by following the steps described here. If you also want to listen to incoming app links during your app’s execution, you’ll need to add the following lines to your *AppDelegate.m :

If you’re targeting iOS 8.x or older, you can use the following code instead:

If your app is using Universal Links, you’ll need to add the following code as well:

And then on your React component you’ll be able to listen to the events on Linking as follows

Opening external links

To start the corresponding activity for a link (web URL, email, contact etc.), call

If you want to check if any installed app can handle a given URL beforehand you can call

Add a handler to Linking changes by listening to the url event type and providing the handler

Remove a handler by passing the url event type and the handler

Try to open the given url with any of the installed apps.

You can use other URLs, like a location (e.g. "geo:37.484847,-122.148386" on Android or "http://maps.apple.com/?ll=37.484847,-122.148386" on iOS), a contact, or any other URL that can be opened with the installed apps.

The method returns a Promise object. If the user confirms the open dialog or the url automatically opens, the promise is resolved. If the user cancels the open dialog or there are no registered applications for the url, the promise is rejected.

Parameters:

This method will fail if the system doesn’t know how to open the specified URL. If you’re passing in a non-http(s) URL, it’s best to check <@code canOpenURL>first.

For web URLs, the protocol ("http://", "https://") must be set accordingly!

Determine whether or not an installed app can handle a given URL.

The method returns a Promise object. When it is determined whether or not the given URL can be handled, the promise is resolved and the first parameter is whether or not it can be opened.

Parameters:

For web URLs, the protocol ("http://", "https://") must be set accordingly!

As of iOS 9, your app needs to provide the LSApplicationQueriesSchemes key inside Info.plist or canOpenURL will always return false.

If the app launch was triggered by an app link, it will give the link url, otherwise it will give null

How to open an external app from react native app?

Is it possible to open an external app when touching a button from my react native app? Specifically, i want to open Whatsapp when I touch a button. How can I do this?

7 Answers 7

Previously below was used,

But later the URL is changed as follows, we can also add phone and text query params shown below,

You can try to use parameters from the API of the application. For example in my case I had to open maps on IOS and start a navigation from Point A to B. So I checked the documentation from HERE, and used the navigation link: «http://maps.apple.com/?saddr=Cupertino&daddr=San+Francisco» to create the query to open the app:

You can use coordinates too, as lat and long :

i wanted to open whatsapp on a click of simple button in my react-native application, which i am developing for android.

I have searched a lot about this but did not got any perfect solution. Although i found one third party library «npm i -S react-native-app-link».

The description in this library is exactly what i wanted to do. But not able to figure it out. If any of you can help it out it will be a great favor for me.

How to Share Code Between React Web and React Native Apps

Introduction
When we build a web app and mobile app using React and React Native (RN), there can be a lot of common functionality between mobile and web. For example, GraphQL queries, state management using Redux, and utility functions.

When we want to change in this functionality, we have to then do it in both our apps. By default, React and React Native don’t allow you to import code from outside the root directory.

In order to do this, we have to configure a few things:

• In the web app, we can import code from outside the root directory by performing a few changes in our Webpack files.
• In the mobile app, we have to modify the metro bundler config.

Before moving ahead with this tutorial, you’ll need to install the following on your development machine:

System Requirements
Node ≥ 8.10 and npm ≥ 5.6
Android Studio
Xcode(for mac)

Now let’s jump to an example implementation.

Directory Structure

1. Create a new project directory

2. Create a new react web app inside the my-app directory

3. Create a new react native app inside the my-app directory

4. Create a new directory for common code inside the my-app directory

The directory structure should now look like this.

Run web app

Run mobile app

When you run the mobile app, Metro bundler looks for JS files only in the mobileApp directory. We also want to load JS files from outside the mobileApp directory i.e from the common directory

Now create a new JS file named sum.js in common directory

Let’s import this function getSum in mobileApp/App.js file

When you try to import anything from outside mobileApp directory, bundler will throw an error: Unable to resolve module

Let’s add our common directory to the metro config on the watch list.

Now, re-build our react native app.

Metro bundler will also look for JS files in the common directory. Now you can import any file from a common directory e.g Redux code, GraphQL queries, utility functions.

Let’s try to use the same getSum method in our Web App

When you try to import anything outside of src directory, the web app fails to compile.

There are multiple ways to fix this error.

1. Don’t use the create-react-app package to create your web app in the first place.
2. If you already have a web app created using create-react-app, you can eject it (more on that later)
3. You can use the react-app-rewired npm package to override the existing configuration.

We already created our app using create-react-app. Let’s eject

When you eject your app, you will see a few extra files and some file changes.

Now we can remove ModuleScopePlugin, which is stopping us from importing files from outside src directory.
Remove ModuleScopePlugin from config/webpack.config.js file.

Start our web app again.

Voila, look at that — you’re now sharing code between your React native web and mobile apps! Write once, deploy everywhere ��