Finder is an application created for finding friends in real time around the globe. It's a fun app that obviously only works if you have friends who also use it.
- 🚀 Possibility of updating. This app is friendly for future improvements and has good potential.
- 🎯 Precision. Always get the exact location of your friends.
- 👥 The ability to manage a list of friends. For example, deleting or adding new friends.
- 🌍 With Finder, you can always see where your friend is and know his or her location instantly.
- You will need Node, the React Native command line interface, a JDK, and Android Studio.
- node-js-finder REST API.
- Сonfigured development environment.
- Google Maps API keys.
- Created Firebase account and linked Firebase to react-native-finder app.
- Clone the project
git clone https://github.com/ArtemBurakov/react-native-finder.git
- Go to the project directory
cd react-native-finder
- Install dependencies
npm install
- First, you will need to start Metro, the JavaScript bundler that ships with React Native. To start Metro, run
npx react-native start
inside your React Native project folder:
npx react-native start
- Let Metro Bundler run in its own terminal. Open a new terminal inside your React Native project folder. Run the following:
Before running your React Native app, make sure you've completed the configuration steps, the node-js-finder API server is running, and your React Native app's http requests are correct.
// if you are running on android device
npx react-native run-android
// if you are running on ios device
npx react-native run-ios
Follow the installation instructions for your Linux distribution to install Node 14 or newer.
React Native requires at least the version 8 of the Java SE Development Kit (JDK). You may download and install OpenJDK from AdoptOpenJDK or your system packager. You may also Download and install Oracle JDK 14 if desired.
To make this React Native application fully functional, I created a node-js-finder REST API. How to setup node-js-finder REST API can be found here.
For the application's server logic to work, you need to run the node-js-finder server on your machine or on a remote server. Once node-js-finder server is running, in React Native application change the axios http requests with your server url. Or if you are running node-js-finder server on your local network, you can use localhost
or the IP address of your machine on your local network.
The IP address of your machine can be found using the
ifconfig
command.
Follow this complete guide to install the build tools and all the necessary packages to start React Native development and run a React Native app on your device or emulator.
-
Let's generate and enable the API Keys for Android and iOS Maps SDK. To get an API key:
- Visit the Google Cloud Platform Console.
- Click the project drop-down and select or create the project for which you want to add an API key.
- Click the navigation menu button (top-left corner) and select APIs & Services > Credentials.
- On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
- Click Close. It will list the new API key on the Credentials page under API keys.
-
Now we will have to enable the
Maps SDK for Android
andMaps SDK for iOS
libraries. To do so:- Click the navigation menu button (top-left corner) and select APIs & Services > Library.
- Look for Maps SDK for Android under the Maps section, and click it.
- Click on the Enable button.
- Follow the same step to enable Maps SDK for iOS.
-
After we have successfully generated the key, we need to implement it in the application. You need to perform the following actions:
- On the Credentials page copy your API key.
- Paste your key in
AndroidManifest.xml
file, located inreact-native-finder/android/app/src/main
.
<meta-data android:name="com.google.android.geo.API_KEY" android:value="AIzaSyBn9dlvbhm6AMHGRHYAJo9U7r-9glryZ4g"/> <- replace this key with your copied key <uses-library android:name="org.apache.http.legacy" android:required="false"/>
To start with Firebase visit this page and follow provided steps there.
- After creating your Firebase app, you need to download the
google-services.json
file. - Paste the downloaded file into the
react-native-finder/android/app
folder. - Then follow this guide to complete Firebase implementation in React Native app.
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.