Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added support for AnimatedRegion without modifying the AnimatedImplementation.js of react-native #608

Merged
merged 2 commits into from
Sep 28, 2016
Merged

Added support for AnimatedRegion without modifying the AnimatedImplementation.js of react-native #608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d42a3b1
Added support for AnimatedRegion without modifying the AnimatedImplem…
IjzerenHein Sep 25, 2016
c9055e5
Wrapped getAnimatedWithChildren prototype check in __DEV__ to ensure …
IjzerenHein Sep 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,25 +263,16 @@ Enable lite mode on Android with `liteMode` prop. Ideal when having multiple map
[`<MapView.Circle />` Component API](docs/circle.md)



## Using with the Animated API

The API of this Map has been built with the intention of it being able to utilize the [Animated API](https://facebook.github.io/react-native/docs/animated.html).

In order to get this to work, you will need to modify the `AnimatedImplementation.js` file in the
source of react-native with [this one](https://gist.github.com/lelandrichardson/c0d938e02301f9294465).

Ideally this will be possible in the near future without this modification.

### Animated Region

The MapView can accept an `Animated.Region` value as its `region` prop. This allows you to utilize
the Animated API to control the map's center and zoom.
The MapView can accept an `MapView.AnimatedRegion` value as its `region` prop. This allows you to utilize the Animated API to control the map's center and zoom.

```jsx
import MapView from 'react-native-maps';

getInitialState() {
return {
region: new Animated.Region({
region: new MapView.AnimatedRegion({
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
Expand All @@ -306,18 +297,27 @@ render() {

### Animated Marker Position

Markers can also accept an `Animated.Region` value as a coordinate.
Markers can also accept an `AnimatedRegion` value as a coordinate.

```jsx
getInitialState() {
return {
coordinate: new Animated.Region({
coordinate: new MapView.AnimatedRegion({
latitude: LATITUDE,
longitude: LONGITUDE,
}),
};
}

componentWillReceiveProps(nextProps) {
if (this.props.coordinate !== nextProps.coordinate) {
this.state.coordinate.timing({
...nextProps.coordinate,
duration: 500
}).start();
}
}

render() {
return (
<MapView initialRegion={...}>
Expand Down
93 changes: 44 additions & 49 deletions components/AnimatedRegion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,40 @@
/* eslint-disable */
import {Animated} from 'react-native';

class AnimatedRegion extends AnimatedWithChildren {
// latitude: AnimatedValue;
// longitude: AnimatedValue;
// latitudeDelta: AnimatedValue;
// longitudeDelta: AnimatedValue;
// _listeners: {[key: string]: {
// latitude: string,
// longitude: string,
// latitudeDelta: string;
// longitudeDelta: string,
// }};
const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
if (__DEV__) {
if (AnimatedWithChildren.name !== 'AnimatedWithChildren') console.error('AnimatedRegion could not obtain AnimatedWithChildren base class');
}
// const __Animated = Object.getPrototypeOf(AnimatedWithChildren);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove these comments?

// if (__Animated.name !== 'Animated') console.error('AnimatedRegion could not obtain Animated base class');

var _uniqueId = 1;

export default class AnimatedMapRegion extends AnimatedWithChildren {
constructor(valueIn) {
super();
const value = valueIn || { // probably want to come up with better defaults
var value = valueIn || { // probably want to come up with better defaults
latitude: 0,
longitude: 0,
latitudeDelta: 0,
longitudeDelta: 0,
longitudeDelta: 0
};
this.latitude = value.latitude instanceof Animated
this.latitude = value.latitude instanceof Animated.Value
? value.latitude
: new AnimatedValue(value.latitude);
this.longitude = value.longitude instanceof Animated
: new Animated.Value(value.latitude);
this.longitude = value.longitude instanceof Animated.Value
? value.longitude
: new AnimatedValue(value.longitude);
this.latitudeDelta = value.latitudeDelta instanceof Animated
: new Animated.Value(value.longitude);
this.latitudeDelta = value.latitudeDelta instanceof Animated.Value
? value.latitudeDelta
: new AnimatedValue(value.latitudeDelta);
this.longitudeDelta = value.longitudeDelta instanceof Animated
: new Animated.Value(value.latitudeDelta);
this.longitudeDelta = value.longitudeDelta instanceof Animated.Value
? value.longitudeDelta
: new AnimatedValue(value.longitudeDelta);
: new Animated.Value(value.longitudeDelta);
this._listeners = {};
}

setValue(value) {
// this.latitude.setValue(value.latitude);
// this.longitude.setValue(value.longitude);
// this.latitudeDelta.setValue(value.latitudeDelta);
// this.longitudeDelta.setValue(value.longitudeDelta);
this.latitude._value = value.latitude;
this.longitude._value = value.longitude;
this.latitudeDelta._value = value.latitudeDelta;
Expand All @@ -65,7 +60,7 @@ class AnimatedRegion extends AnimatedWithChildren {
latitude: this.latitude.__getValue(),
longitude: this.longitude.__getValue(),
latitudeDelta: this.latitudeDelta.__getValue(),
longitudeDelta: this.longitudeDelta.__getValue(),
longitudeDelta: this.longitudeDelta.__getValue()
};
}

Expand All @@ -92,15 +87,15 @@ class AnimatedRegion extends AnimatedWithChildren {
}

addListener(callback) {
const id = String(_uniqueId++);
const jointCallback = ({ value: number }) => {
var id = String(_uniqueId++);
var jointCallback = (/*{value}*/) => {
callback(this.__getValue());
};
this._listeners[id] = {
latitude: this.latitude.addListener(jointCallback),
longitude: this.longitude.addListener(jointCallback),
latitudeDelta: this.latitudeDelta.addListener(jointCallback),
longitudeDelta: this.longitudeDelta.addListener(jointCallback),
longitudeDelta: this.longitudeDelta.addListener(jointCallback)
};
return id;
}
Expand All @@ -114,60 +109,60 @@ class AnimatedRegion extends AnimatedWithChildren {
}

spring(config) {
const animations = [];
var animations = [];
config.hasOwnProperty('latitude') &&
animations.push(timing(this.latitude, {
animations.push(Animated.timing(this.latitude, {
...config,
toValue: config.latitude,
toValue: config.latitude
}));

config.hasOwnProperty('longitude') &&
animations.push(timing(this.longitude, {
animations.push(Animated.timing(this.longitude, {
...config,
toValue: config.longitude,
toValue: config.longitude
}));

config.hasOwnProperty('latitudeDelta') &&
animations.push(timing(this.latitudeDelta, {
animations.push(Animated.timing(this.latitudeDelta, {
...config,
toValue: config.latitudeDelta,
toValue: config.latitudeDelta
}));

config.hasOwnProperty('longitudeDelta') &&
animations.push(timing(this.longitudeDelta, {
animations.push(Animated.timing(this.longitudeDelta, {
...config,
toValue: config.longitudeDelta,
toValue: config.longitudeDelta
}));

return parallel(animations);
return Animated.parallel(animations);
}

timing(config) {
const animations = [];
var animations = [];
config.hasOwnProperty('latitude') &&
animations.push(timing(this.latitude, {
animations.push(Animated.timing(this.latitude, {
...config,
toValue: config.latitude,
toValue: config.latitude
}));

config.hasOwnProperty('longitude') &&
animations.push(timing(this.longitude, {
animations.push(Animated.timing(this.longitude, {
...config,
toValue: config.longitude,
toValue: config.longitude
}));

config.hasOwnProperty('latitudeDelta') &&
animations.push(timing(this.latitudeDelta, {
animations.push(Animated.timing(this.latitudeDelta, {
...config,
toValue: config.latitudeDelta,
toValue: config.latitudeDelta
}));

config.hasOwnProperty('longitudeDelta') &&
animations.push(timing(this.longitudeDelta, {
animations.push(Animated.timing(this.longitudeDelta, {
...config,
toValue: config.longitudeDelta,
toValue: config.longitudeDelta
}));

return parallel(animations);
return Animated.parallel(animations);
}
}
2 changes: 2 additions & 0 deletions components/MapView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import MapPolygon from './MapPolygon';
import MapCircle from './MapCircle';
import MapCallout from './MapCallout';
import MapUrlTile from './MapUrlTile';
import AnimatedRegion from './AnimatedRegion';
import {
contextTypes as childContextTypes,
getAirMapName,
Expand Down Expand Up @@ -571,5 +572,6 @@ Object.assign(MapView, ProviderConstants);
MapView.ProviderPropType = PropTypes.oneOf(Object.values(ProviderConstants));

MapView.Animated = Animated.createAnimatedComponent(MapView);
MapView.AnimatedRegion = AnimatedRegion;

module.exports = MapView;