jlengrand/getmehigh-native
1
0
Fork 0
mirror of https://github.com/RamonGebben/getmehigh-native.git synced 2026-03-10 08:41:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added mapbox via instructions but broken

Browse Source
This commit is contained in:
Ramon Gebben
2016-01-10 11:04:27 +01:00
parent 49b441ceca
commit 377af2e5ce
9 changed files with 594 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -8,11 +8,13 @@ npm i
```
## Running
To run your app on iOS:
Open <project foler>/ios/getMeHighMobile.xcodeproj in Xcode
Hit the Run button
- Open <project foler>/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 <project foler>/getMeHighMobile
react-native run-android

121
android/app/app.iml Normal file
View File

@@ -0,0 +1,121 @@
<?xml version="1.0" encoding="UTF-8"?>
<module external.linked.project.id=":app" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$/.." external.system.id="GRADLE" external.system.module.group="getMeHighMobile" external.system.module.version="unspecified" type="JAVA_MODULE" version="4">
<component name="FacetManager">
<facet type="android-gradle" name="Android-Gradle">
<configuration>
<option name="GRADLE_PROJECT_PATH" value=":app" />
</configuration>
</facet>
<facet type="android" name="Android">
<configuration>
<option name="SELECTED_BUILD_VARIANT" value="debug" />
<option name="SELECTED_TEST_ARTIFACT" value="_android_test_" />
<option name="ASSEMBLE_TASK_NAME" value="assembleDebug" />
<option name="COMPILE_JAVA_TASK_NAME" value="compileDebugSources" />
<option name="SOURCE_GEN_TASK_NAME" value="generateDebugSources" />
<option name="ASSEMBLE_TEST_TASK_NAME" value="assembleDebugAndroidTest" />
<option name="COMPILE_JAVA_TEST_TASK_NAME" value="compileDebugAndroidTestSources" />
<option name="TEST_SOURCE_GEN_TASK_NAME" value="generateDebugAndroidTestSources" />
<option name="ALLOW_USER_CONFIGURATION" value="false" />
<option name="MANIFEST_FILE_RELATIVE_PATH" value="/src/main/AndroidManifest.xml" />
<option name="RES_FOLDER_RELATIVE_PATH" value="/src/main/res" />
<option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res" />
<option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />
</configuration>
</facet>
</component>
<component name="NewModuleRootManager" inherit-compiler-output="false">
<output url="file://$MODULE_DIR$/build/intermediates/classes/debug" />
<output-test url="file://$MODULE_DIR$/build/intermediates/classes/androidTest/debug" />
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/debug" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/debug" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/androidTest/debug" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/res" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/resources" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/assets" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/aidl" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/java" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/jni" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/rs" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/res" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/assets" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/aidl" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/jni" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/rs" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/res" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/resources" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/assets" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/aidl" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/java" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/jni" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/rs" isTestSource="true" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/assets" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/bundles" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/classes" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/coverage-instrumented-classes" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/dependency-cache" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/dex" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/dex-cache" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.android.support/appcompat-v7/23.0.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.android.support/recyclerview-v7/23.0.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.android.support/support-v4/23.0.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.fresco/drawee/0.8.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.fresco/fbcore/0.8.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.fresco/fresco/0.8.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.fresco/imagepipeline-okhttp/0.8.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.fresco/imagepipeline/0.8.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/com.facebook.react/react-native/0.17.1/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/exploded-aar/org.webkit/android-jsc/r174650/jars" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/jacoco" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/javaResources" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/libs" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/lint" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/manifests" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/ndk" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/pre-dexed" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/proguard" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/res" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/rs" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/symbols" />
<excludeFolder url="file://$MODULE_DIR$/build/outputs" />
<excludeFolder url="file://$MODULE_DIR$/build/tmp" />
</content>
<orderEntry type="jdk" jdkName="Android API 23 Platform" jdkType="Android SDK" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" exported="" name="fresco-0.8.1" level="project" />
<orderEntry type="library" exported="" name="react-native-0.17.1" level="project" />
<orderEntry type="library" exported="" name="imagepipeline-okhttp-0.8.1" level="project" />
<orderEntry type="library" exported="" name="imagepipeline-0.8.1" level="project" />
<orderEntry type="library" exported="" name="support-v4-23.0.1" level="project" />
<orderEntry type="library" exported="" name="stetho-1.2.0" level="project" />
<orderEntry type="library" exported="" name="jsr305-3.0.0" level="project" />
<orderEntry type="library" exported="" name="jackson-core-2.2.3" level="project" />
<orderEntry type="library" exported="" name="appcompat-v7-23.0.1" level="project" />
<orderEntry type="library" exported="" name="okhttp-2.5.0" level="project" />
<orderEntry type="library" exported="" name="okhttp-ws-2.5.0" level="project" />
<orderEntry type="library" exported="" name="okio-1.6.0" level="project" />
<orderEntry type="library" exported="" name="fbcore-0.8.1" level="project" />
<orderEntry type="library" exported="" name="drawee-0.8.1" level="project" />
<orderEntry type="library" exported="" name="android-jsc-r174650" level="project" />
<orderEntry type="library" exported="" name="stetho-okhttp-1.2.0" level="project" />
<orderEntry type="library" exported="" name="bolts-android-1.1.4" level="project" />
<orderEntry type="library" exported="" name="library-2.4.0" level="project" />
<orderEntry type="library" exported="" name="commons-cli-1.2" level="project" />
<orderEntry type="library" exported="" name="recyclerview-v7-23.0.1" level="project" />
<orderEntry type="library" exported="" name="support-annotations-23.0.1" level="project" />
</component>
</module>

2
android/app/src/main/java/com/getmehighmobile/MainActivity.java
View File

@@ -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();

2
android/build.gradle
View File

@@ -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')
}
}

19
android/getMeHighMobile.iml Normal file
View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<module external.linked.project.id="getMeHighMobile" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" external.system.module.group="" external.system.module.version="unspecified" type="JAVA_MODULE" version="4">
<component name="FacetManager">
<facet type="java-gradle" name="Java-Gradle">
<configuration>
<option name="BUILD_FOLDER_PATH" value="$MODULE_DIR$/build" />
<option name="BUILDABLE" value="false" />
</configuration>
</facet>
</component>
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.gradle" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

3
android/settings.gradle
View File

@@ -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')

84
index.android.js
View File

@@ -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 (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
<Mapbox
style={styles.map}
rotateEnabled={true}
showsUserLocation={true}
accessToken={'pk.eyJ1IjoiZ2V0bWVoaWdoIiwiYSI6ImNpajdhNmVvYTAwMjgwcmx2ZWd0ZHNqcWYifQ.pTmM4OyyeoZSNZ_aG8EhPw'}
styleURL={'asset://styles/mapbox-streets-v7.json'}
centerCoordinate={this.state.center}
userLocationVisible={true}
zoomLevel={this.state.zoom}
debugActive={false}
direction={this.state.direction}
annotations={this.state.annotations}
onRegionChange={this.onChange}
onOpenAnnotation={this.onOpenAnnotation}
onUpdateUserLocation={this.onUpdateUserLocation}/>
<View style={styles.text}>
<Text>Latitude: {this.state.mapLocation.latitude}</Text>
<Text>Longitude: {this.state.mapLocation.longitude}</Text>
<Text>zoom level: {this.state.mapLocation.zoom}</Text>
</View>
</View>
);
}
@@ -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);

378
mapview.android.js Normal file
View File

@@ -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 (
<View>
<View style={styles.row}>
<Text>
{'Latitude'}
</Text>
<TextInput
value={'' + region.latitude}
style={styles.textInput}
onChange={this._onChangeLatitude}
selectTextOnFocus={true}
/>
</View>
<View style={styles.row}>
<Text>
{'Longitude'}
</Text>
<TextInput
value={'' + region.longitude}
style={styles.textInput}
onChange={this._onChangeLongitude}
selectTextOnFocus={true}
/>
</View>
<View style={styles.row}>
<Text>
{'Latitude delta'}
</Text>
<TextInput
value={
region.latitudeDelta == null ? '' : String(region.latitudeDelta)
}
style={styles.textInput}
onChange={this._onChangeLatitudeDelta}
selectTextOnFocus={true}
/>
</View>
<View style={styles.row}>
<Text>
{'Longitude delta'}
</Text>
<TextInput
value={
region.longitudeDelta == null ? '' : String(region.longitudeDelta)
}
style={styles.textInput}
onChange={this._onChangeLongitudeDelta}
selectTextOnFocus={true}
/>
</View>
<View style={styles.changeButton}>
<Text onPress={this._change}>
{'Change'}
</Text>
</View>
</View>
);
},
_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 (
<View>
<MapView
style={styles.map}
onRegionChange={this._onRegionChange}
onRegionChangeComplete={this._onRegionChangeComplete}
region={this.state.mapRegion}
annotations={this.state.annotations}
/>
<MapRegionInput
onChange={this._onRegionInputChanged}
region={this.state.mapRegionInput}
/>
</View>
);
},
_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 (
<MapView
style={styles.map}
onRegionChangeComplete={onRegionChangeComplete}
region={this.state.mapRegion}
annotations={this.state.annotations}
/>
);
},
});
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 = '<MapView>';
exports.description = 'Base component to display maps';
exports.examples = [
{
title: 'Map',
render() {
return <MapViewExample />;
}
},
{
title: 'showsUserLocation + followUserLocation',
render() {
return (
<MapView
style={styles.map}
showsUserLocation={true}
followUserLocation={true}
/>
);
}
},
{
title: 'Callout example',
render() {
return <AnnotationExample style={styles.map} annotation={{
title: 'More Info...',
rightCalloutView: (
<TouchableOpacity
onPress={() => {
alert('You Are Here');
}}>
<Image
style={{width:30, height:30}}
source={require('image!uie_thumb_selected')}
/>
</TouchableOpacity>
),
}}/>;
}
},
{
title: 'Draggable pin',
render() {
return <AnnotationExample style={styles.map} annotation={{
draggable: true,
onDragStateChange: (event) => {
console.log('Drag state: ' + event.state);
},
}}/>;
}
},
{
title: 'Custom pin color',
render() {
return <AnnotationExample style={styles.map} annotation={{
title: 'You Are Purple',
tintColor: MapView.PinColors.PURPLE,
}}/>;
}
},
{
title: 'Custom pin image',
render() {
return <AnnotationExample style={styles.map} annotation={{
title: 'Thumbs Up!',
image: require('image!uie_thumb_big'),
}}/>;
}
},
{
title: 'Custom pin view',
render() {
return <AnnotationExample style={styles.map} annotation={{
title: 'Thumbs Up!',
view: <View style={{
alignItems: 'center',
}}>
<Text style={{fontWeight: 'bold', color: '#f007'}}>
Thumbs Up!
</Text>
<Image
style={{width: 90, height: 65, resizeMode: 'cover'}}
source={require('image!uie_thumb_big')}
/>
</View>,
}}/>;
}
},
{
title: 'Custom overlay',
render() {
return <MapView
style={styles.map}
region={{
latitude: 39.06,
longitude: -95.22,
}}
overlays={[{
coordinates:[
{latitude: 32.47, longitude: -107.85},
{latitude: 45.13, longitude: -94.48},
{latitude: 39.27, longitude: -83.25},
{latitude: 32.47, longitude: -107.85},
],
strokeColor: '#f007',
lineWidth: 3,
}]}
/>;
}
},
];

3
package.json
View File

@@ -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"
}
}