From 7475486034196205b47ac17a15bf87c6c1d2e96d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Nu=C3=B1ez?= Date: Fri, 30 Jul 2021 02:45:46 -0600 Subject: [PATCH] Update Readme.md (#1470) --- README.md | 67 +++++++++++++++++++++++++++++++------------------- ios/install.md | 8 ++++++ 2 files changed, 50 insertions(+), 25 deletions(-) diff --git a/README.md b/README.md index 71cbca893..74d6b7b23 100644 --- a/README.md +++ b/README.md @@ -25,37 +25,33 @@ We also support [MapLibre](https://github.com/maplibre/maplibre-gl-native) flavo height="300" /> -## Installation -### Prerequisit -On Android we support from version 6 (API 23) upwards +## Prerequisite + +1. On Android we support from version 6 (API 23) upwards +2. Please [Sign Up to Mapbox](https://account.mapbox.com/auth/signup/) to get the Mapbox Access Token. -### Dependencies +## Dependencies - [node](https://nodejs.org) - [npm](https://www.npmjs.com/) - [React Native](https://facebook.github.io/react-native/) (0.60+) -### Git -``` -git clone git@github.com:react-native-mapbox-gl/maps.git -cd maps -``` +## Installation -### Yarn +### Step 1 - Install Package: -``` +```sh +# install with Yarn yarn add @react-native-mapbox-gl/maps -``` -### Npm -``` +# or install with NPM npm install @react-native-mapbox-gl/maps --save ``` -## Installation Guides +### Step 2 - Installation Guides: - [Android](/android/install.md) - [iOS](/ios/install.md) @@ -63,29 +59,50 @@ npm install @react-native-mapbox-gl/maps --save - [Example](/example) -## Getting Started +### Getting Started For more information, check out our [Getting Started](/docs/GettingStarted.md) section -### Adding a map +## Run Project +Before you run your project be sure you have completeded the Installation Guides for Android or iOS. + +### Run iOS Simulator +```sh +# Run with NPM +yarn run ios + +# or Run with NPM +npm run ios +``` + +### Run Android Simulator +```sh +# Run with NPM +yarn run android + +# or Run with NPM +npm run android +``` + +## Adding a map ```js -import React, { Component } from "react"; -import { StyleSheet, View } from "react-native"; -import MapboxGL from "@react-native-mapbox-gl/maps"; +import React, { Component } from 'react'; +import { StyleSheet, View } from 'react-native'; +import MapboxGL from '@react-native-mapbox-gl/maps'; -MapboxGL.setAccessToken(""); +MapboxGL.setAccessToken(''); const styles = StyleSheet.create({ page: { flex: 1, - justifyContent: "center", - alignItems: "center", - backgroundColor: "#F5FCFF" + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF' }, container: { height: 300, width: 300, - backgroundColor: "tomato" + backgroundColor: 'tomato' }, map: { flex: 1 diff --git a/ios/install.md b/ios/install.md index 49e217397..36d89383a 100644 --- a/ios/install.md +++ b/ios/install.md @@ -28,6 +28,14 @@ Add the following to your `ios/Podfile`: Running `pod install` will add Mapbox iOS SDK `5.8.0` +```sh +# Go to the ios folder +cd ios + +# Run Pod Install +pod install +``` + You are good to go! Read on if you want to edit your Mapbox version or flavor.