diff --git a/README.md b/README.md index 926649e..64f027c 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,13 @@ npm i ``` ## Running + To run your app on iOS: - Open /ios/getMeHighMobile.xcodeproj in Xcode - Hit the Run button + - Open /ios/getMeHighMobile.xcodeproj in Xcode + - Hit the Run button + To run your app on Android: - Have an Android emulator running (quickest way to get started), or a device connected +Have an Android emulator running (quickest way to get started), or a device connected ```bash cd /getMeHighMobile react-native run-android diff --git a/android/app/app.iml b/android/app/app.iml new file mode 100644 index 0000000..9031708 --- /dev/null +++ b/android/app/app.iml @@ -0,0 +1,121 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/android/app/src/main/java/com/getmehighmobile/MainActivity.java b/android/app/src/main/java/com/getmehighmobile/MainActivity.java index f3685bf..cda0636 100644 --- a/android/app/src/main/java/com/getmehighmobile/MainActivity.java +++ b/android/app/src/main/java/com/getmehighmobile/MainActivity.java @@ -10,6 +10,7 @@ import com.facebook.react.ReactRootView; import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; +import com.mapbox.reactnativemapboxgl.ReactNativeMapboxGLPackage; public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler { @@ -26,6 +27,7 @@ public class MainActivity extends Activity implements DefaultHardwareBackBtnHand .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) + .addPackage(new ReactNativeMapboxGLPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); diff --git a/android/build.gradle b/android/build.gradle index ccdfc4e..0f188af 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -9,6 +9,8 @@ buildscript { // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files + +// compile project(':reactnativemapboxgl') } } diff --git a/android/getMeHighMobile.iml b/android/getMeHighMobile.iml new file mode 100644 index 0000000..472a8ba --- /dev/null +++ b/android/getMeHighMobile.iml @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/android/settings.gradle b/android/settings.gradle index 0142cce..e2823e7 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,3 +1,6 @@ rootProject.name = 'getMeHighMobile' include ':app' +include ':reactnativemapboxgl' + +project(':reactnativemapboxgl').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-mapbox-gl/android') diff --git a/index.android.js b/index.android.js index 80a3af0..dd161b7 100644 --- a/index.android.js +++ b/index.android.js @@ -11,20 +11,66 @@ var { Text, View, } = React; +var Mapbox = require('react-native-mapbox-gl'); var getMeHighMobile = React.createClass({ + getInitialState: function() { + return { + mapLocation: { + latitude: 0, + longitude: 0 + }, + center: { + latitude: 40.72345355209305, + longitude: -73.99343490600586 + }, + annotations: [{ + latitude: 40.72052634, + longitude: -73.97686958312988, + title: 'This is marker 1', + subtitle: 'Hi mom!' + },{ + latitude: 40.714541341726175, + longitude: -74.00579452514648, + title: 'This is marker 2', + subtitle: 'Neat, this is a subtitle' + }], + zoom: 12, + direction: 0 + } + }, + onChange: function(e) { + this.setState({ mapLocation: e }); + }, + onOpenAnnotation: function(annotation) { + console.log(annotation) + }, + onUpdateUserLocation: function(location) { + console.log(location) + }, render: function() { return ( - - Welcome to React Native! - - - To get started, edit index.android.js - - - Shake or press menu button for dev menu - + + + Latitude: {this.state.mapLocation.latitude} + Longitude: {this.state.mapLocation.longitude} + zoom level: {this.state.mapLocation.zoom} + ); } @@ -32,21 +78,15 @@ var getMeHighMobile = React.createClass({ var styles = StyleSheet.create({ container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#F5FCFF', + flexDirection: 'column', + flex: 1 }, - welcome: { - fontSize: 20, - textAlign: 'center', - margin: 10, - }, - instructions: { - textAlign: 'center', - color: '#333333', - marginBottom: 5, + map: { + flex:5, }, + text: { + padding: 20 + } }); AppRegistry.registerComponent('getMeHighMobile', () => getMeHighMobile); diff --git a/mapview.android.js b/mapview.android.js new file mode 100644 index 0000000..0048854 --- /dev/null +++ b/mapview.android.js @@ -0,0 +1,378 @@ +'use strict'; + +var React = require('react-native'); +var { + Image, + MapView, + PropTypes, + StyleSheet, + Text, + TextInput, + TouchableOpacity, + View, +} = React; + +var regionText = { + latitude: '0', + longitude: '0', + latitudeDelta: '0', + longitudeDelta: '0', +}; + +var MapRegionInput = React.createClass({ + + propTypes: { + region: PropTypes.shape({ + latitude: PropTypes.number.isRequired, + longitude: PropTypes.number.isRequired, + latitudeDelta: PropTypes.number, + longitudeDelta: PropTypes.number, + }), + onChange: PropTypes.func.isRequired, + }, + + getInitialState() { + return { + region: { + latitude: 0, + longitude: 0, + } + }; + }, + + componentWillReceiveProps: function(nextProps) { + this.setState({ + region: nextProps.region || this.getInitialState().region + }); + }, + + render: function() { + var region = this.state.region || this.getInitialState().region; + return ( + + + + {'Latitude'} + + + + + + {'Longitude'} + + + + + + {'Latitude delta'} + + + + + + {'Longitude delta'} + + + + + + {'Change'} + + + + ); + }, + + _onChangeLatitude: function(e) { + regionText.latitude = e.nativeEvent.text; + }, + + _onChangeLongitude: function(e) { + regionText.longitude = e.nativeEvent.text; + }, + + _onChangeLatitudeDelta: function(e) { + regionText.latitudeDelta = e.nativeEvent.text; + }, + + _onChangeLongitudeDelta: function(e) { + regionText.longitudeDelta = e.nativeEvent.text; + }, + + _change: function() { + this.setState({ + region: { + latitude: parseFloat(regionText.latitude), + longitude: parseFloat(regionText.longitude), + latitudeDelta: parseFloat(regionText.latitudeDelta), + longitudeDelta: parseFloat(regionText.longitudeDelta), + }, + }); + this.props.onChange(this.state.region); + }, + +}); + +var MapViewExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + mapRegion: undefined, + mapRegionInput: undefined, + annotations: [], + }; + }, + + render() { + return ( + + + + + ); + }, + + _getAnnotations(region) { + return [{ + longitude: region.longitude, + latitude: region.latitude, + title: 'You Are Here', + }]; + }, + + _onRegionChange(region) { + this.setState({ + mapRegionInput: region, + }); + }, + + _onRegionChangeComplete(region) { + if (this.state.isFirstLoad) { + this.setState({ + mapRegionInput: region, + annotations: this._getAnnotations(region), + isFirstLoad: false, + }); + } + }, + + _onRegionInputChanged(region) { + this.setState({ + mapRegion: region, + mapRegionInput: region, + annotations: this._getAnnotations(region), + }); + }, + +}); + +var AnnotationExample = React.createClass({ + + getInitialState() { + return { + isFirstLoad: true, + annotations: [], + mapRegion: undefined, + }; + }, + + render() { + if (this.state.isFirstLoad) { + var onRegionChangeComplete = (region) => { + this.setState({ + isFirstLoad: false, + annotations: [{ + longitude: region.longitude, + latitude: region.latitude, + ...this.props.annotation, + }], + }); + }; + } + + return ( + + ); + }, + +}); + +var styles = StyleSheet.create({ + map: { + height: 150, + margin: 10, + borderWidth: 1, + borderColor: '#000000', + }, + row: { + flexDirection: 'row', + justifyContent: 'space-between', + }, + textInput: { + width: 150, + height: 20, + borderWidth: 0.5, + borderColor: '#aaaaaa', + fontSize: 13, + padding: 4, + }, + changeButton: { + alignSelf: 'center', + marginTop: 5, + padding: 3, + borderWidth: 0.5, + borderColor: '#777777', + }, +}); + +exports.displayName = (undefined: ?string); +exports.title = ''; +exports.description = 'Base component to display maps'; +exports.examples = [ + { + title: 'Map', + render() { + return ; + } + }, + { + title: 'showsUserLocation + followUserLocation', + render() { + return ( + + ); + } + }, + { + title: 'Callout example', + render() { + return { + alert('You Are Here'); + }}> + + + ), + }}/>; + } + }, + { + title: 'Draggable pin', + render() { + return { + console.log('Drag state: ' + event.state); + }, + }}/>; + } + }, + { + title: 'Custom pin color', + render() { + return ; + } + }, + { + title: 'Custom pin image', + render() { + return ; + } + }, + { + title: 'Custom pin view', + render() { + return + + Thumbs Up! + + + , + }}/>; + } + }, + { + title: 'Custom overlay', + render() { + return ; + } + }, +]; diff --git a/package.json b/package.json index 8857b24..7af4296 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "start": "node_modules/react-native/packager/packager.sh" }, "dependencies": { - "react-native": "^0.17.0" + "react-native": "^0.17.0", + "react-native-mapbox-gl": "^3.0.0" } }