Skip to content

Commit

Permalink
[Docs] Update Android installation to reflect new versions of RN. Closes
Browse files Browse the repository at this point in the history
  • Loading branch information
christopherdro committed Mar 1, 2016
1 parent ace8bc2 commit 3eb3345
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 12 deletions.
41 changes: 35 additions & 6 deletions docs/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ First, download the library from npm:
npm install react-native-maps --save
```

Then you must install the native dependencies. You can use [`rnpm`](https://github.com/rnpm/rnpm) to
Then you must install the native dependencies. You can use [`rnpm`](https://github.com/rnpm/rnpm) to
add native dependencies automatically:

`$ rnpm link`
Expand All @@ -17,15 +17,15 @@ or do it manually as described below:
## iOS

1. Open your project in XCode, right click on `Libraries` and click `Add
Files to "Your Project Name"` Look under `node_modules/react-native-maps` and add `AIRMaps.xcodeproj`.
Files to "Your Project Name"` Look under `node_modules/react-native-maps` and add `AIRMaps.xcodeproj`.
2. Add `libAIRMaps.a` to `Build Phases -> Link Binary With Libraries.
3. Click on `AIRMaps.xcodeproj` in `Libraries` and go the `Build
Settings` tab. Double click the text to the right of `Header Search
Paths` and verify that it has `$(SRCROOT)/../react-native/React` as well as `$(SRCROOT)/../react-native/Libraries/Image` - if they
aren't, then add them. This is so XCode is able to find the headers that
the `AIRMaps` source files are referring to by pointing to the
header files installed within the `react-native` `node_modules`
directory.
directory.
4. Whenever you want to use it within React code now you can: `var MapView =
require('react-native-maps');`

Expand All @@ -46,6 +46,35 @@ or do it manually as described below:
```

3. and finally, in `android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java` add:

**Newer versions of React Native**
```
...
import com.AirMaps.AirPackage; // <--- This!
...
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "sample";
}
@Override
protected boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
new AirPackage() // <---- and This!
);
}
}
```

**Older versions of React Native**
```
...
import com.AirMaps.AirPackage; // <--- This!
Expand All @@ -54,7 +83,7 @@ or do it manually as described below:
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
Expand All @@ -64,9 +93,9 @@ or do it manually as described below:
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "MyApp", null);
setContentView(mReactRootView);
}
```
Expand Down
10 changes: 4 additions & 6 deletions example/examples/DraggableMarkers.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,14 @@ var MarkerTypes = React.createClass({
>
<MapView.Marker
coordinate={this.state.a}
onDragEnd={(e) => this.setState({ a: e.nativeEvent.coordinate })}
onSelect={(e) => console.log('onSelect', e)}
onDrag={(e) => console.log('onDrag', e)}
onDragStart={(e) => console.log('onDragStart', e)}
onPress={(e) => console.log('onPress', e)}
draggable
>
<PriceMarker amount={99} />
</MapView.Marker>
<MapView.Marker
coordinate={this.state.b}
onDragEnd={(e) => this.setState({ b: e.nativeEvent.coordinate })}
draggable
/>
</MapView>
</View>
);
Expand Down

0 comments on commit 3eb3345

Please sign in to comment.