https://github.com/a7medev/react-native-map-input

A React Native Component for Getting Location using a Map
https://github.com/a7medev/react-native-map-input

android formik forms ios react react-native react-native-maps

Last synced: 6 days ago
JSON representation

A React Native Component for Getting Location using a Map

• Host: GitHub
• URL: https://github.com/a7medev/react-native-map-input
• Owner: a7medev
• Created: 2021-06-01T22:37:23.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-12-20T15:58:34.000Z (almost 3 years ago)
• Last Synced: 2024-10-07T05:43:05.261Z (about 1 month ago)
• Topics: android, formik, forms, ios, react, react-native, react-native-maps
• Language: TypeScript
• Homepage:
• Size: 11.2 MB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Native Map Input

A React Native Component for Getting Location using a Map

  

  

### Installation

```sh

yarn add react-native-map-input

```

or

```sh

npm install react-native-map-input --save

```

#### You have to install:

- [react-native-maps](https://github.com/react-native-maps/react-native-maps/blob/master/docs/installation.md)

- [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)

### Example

1. Usage with basic React state

   ```jsx

   import React, { useState } from 'react';

   import MapInput, { MapInputVariant } from 'react-native-map-input';

   const MyForm = () => {

     const [coordinate, setCoordinate] = useState({

       latitude: 37.78825,

       longitude: -122.4324,

       latitudeDelta: 0.0922,

       longitudeDelta: 0.0421,

     });

     return (

       // ...

       

       // ...

     );

   };

   ```

2. Usage with Formik

   ```jsx

   import React from 'react';

   import { Formik } from 'formik';

   import FormikMapInput from 'react-native-map-input/FormikMapInput';

   const initialValues = {

     // ...

     location: {

       latitude: 37.78825,

       longitude: -122.4324,

       latitudeDelta: 0.0922,

       longitudeDelta: 0.0421,

     },

     // ...

   };

   const MyForm = () => {

     const handleSubmit = (data) => {

       console.log(data.location);

     };

     return (

       

         {() => (

           // ...

           

           // ...

         )}

       

     );

   };

   ```