Skip to content

Commit 1c032e5

Browse files
author
Spike Brehm
authored
Merge pull request react-native-maps#608 from IjzerenHein/feature-animatedregion2
Added support for AnimatedRegion without modifying the AnimatedImplementation.js of react-native
2 parents 5db6469 + 504ffe2 commit 1c032e5

File tree

3 files changed

+61
-64
lines changed

3 files changed

+61
-64
lines changed

‎README.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -263,25 +263,16 @@ Enable lite mode on Android with `liteMode` prop. Ideal when having multiple map
263263
[`<MapView.Circle />` Component API](docs/circle.md)
264264

265265

266-
267-
## Using with the Animated API
268-
269-
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).
270-
271-
In order to get this to work, you will need to modify the `AnimatedImplementation.js` file in the
272-
source of react-native with [this one](https://gist.github.com/lelandrichardson/c0d938e02301f9294465).
273-
274-
Ideally this will be possible in the near future without this modification.
275-
276266
### Animated Region
277267

278-
The MapView can accept an `Animated.Region` value as its `region` prop. This allows you to utilize
279-
the Animated API to control the map's center and zoom.
268+
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.
280269

281270
```jsx
271+
import MapView from 'react-native-maps';
272+
282273
getInitialState() {
283274
return {
284-
region: new Animated.Region({
275+
region: new MapView.AnimatedRegion({
285276
latitude: LATITUDE,
286277
longitude: LONGITUDE,
287278
latitudeDelta: LATITUDE_DELTA,
@@ -306,18 +297,27 @@ render() {
306297

307298
### Animated Marker Position
308299

309-
Markers can also accept an `Animated.Region` value as a coordinate.
300+
Markers can also accept an `AnimatedRegion` value as a coordinate.
310301

311302
```jsx
312303
getInitialState() {
313304
return {
314-
coordinate: new Animated.Region({
305+
coordinate: new MapView.AnimatedRegion({
315306
latitude: LATITUDE,
316307
longitude: LONGITUDE,
317308
}),
318309
};
319310
}
320311

312+
componentWillReceiveProps(nextProps) {
313+
if (this.props.coordinate !== nextProps.coordinate) {
314+
this.state.coordinate.timing({
315+
...nextProps.coordinate,
316+
duration: 500
317+
}).start();
318+
}
319+
}
320+
321321
render() {
322322
return (
323323
<MapView initialRegion={...}>

‎components/AnimatedRegion.js‎

Lines changed: 44 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,40 @@
11
/* eslint-disable */
2+
import {Animated} from 'react-native';
23

3-
class AnimatedRegion extends AnimatedWithChildren {
4-
// latitude: AnimatedValue;
5-
// longitude: AnimatedValue;
6-
// latitudeDelta: AnimatedValue;
7-
// longitudeDelta: AnimatedValue;
8-
// _listeners: {[key: string]: {
9-
// latitude: string,
10-
// longitude: string,
11-
// latitudeDelta: string;
12-
// longitudeDelta: string,
13-
// }};
4+
const AnimatedWithChildren = Object.getPrototypeOf(Animated.ValueXY);
5+
if (__DEV__) {
6+
if (AnimatedWithChildren.name !== 'AnimatedWithChildren') console.error('AnimatedRegion could not obtain AnimatedWithChildren base class');
7+
}
8+
// const __Animated = Object.getPrototypeOf(AnimatedWithChildren);
9+
// if (__Animated.name !== 'Animated') console.error('AnimatedRegion could not obtain Animated base class');
10+
11+
var _uniqueId = 1;
1412

13+
export default class AnimatedMapRegion extends AnimatedWithChildren {
1514
constructor(valueIn) {
1615
super();
17-
const value = valueIn || { // probably want to come up with better defaults
16+
var value = valueIn || { // probably want to come up with better defaults
1817
latitude: 0,
1918
longitude: 0,
2019
latitudeDelta: 0,
21-
longitudeDelta: 0,
20+
longitudeDelta: 0
2221
};
23-
this.latitude = value.latitude instanceof Animated
22+
this.latitude = value.latitude instanceof Animated.Value
2423
? value.latitude
25-
: new AnimatedValue(value.latitude);
26-
this.longitude = value.longitude instanceof Animated
24+
: new Animated.Value(value.latitude);
25+
this.longitude = value.longitude instanceof Animated.Value
2726
? value.longitude
28-
: new AnimatedValue(value.longitude);
29-
this.latitudeDelta = value.latitudeDelta instanceof Animated
27+
: new Animated.Value(value.longitude);
28+
this.latitudeDelta = value.latitudeDelta instanceof Animated.Value
3029
? value.latitudeDelta
31-
: new AnimatedValue(value.latitudeDelta);
32-
this.longitudeDelta = value.longitudeDelta instanceof Animated
30+
: new Animated.Value(value.latitudeDelta);
31+
this.longitudeDelta = value.longitudeDelta instanceof Animated.Value
3332
? value.longitudeDelta
34-
: new AnimatedValue(value.longitudeDelta);
33+
: new Animated.Value(value.longitudeDelta);
3534
this._listeners = {};
3635
}
3736

3837
setValue(value) {
39-
// this.latitude.setValue(value.latitude);
40-
// this.longitude.setValue(value.longitude);
41-
// this.latitudeDelta.setValue(value.latitudeDelta);
42-
// this.longitudeDelta.setValue(value.longitudeDelta);
4338
this.latitude._value = value.latitude;
4439
this.longitude._value = value.longitude;
4540
this.latitudeDelta._value = value.latitudeDelta;
@@ -65,7 +60,7 @@ class AnimatedRegion extends AnimatedWithChildren {
6560
latitude: this.latitude.__getValue(),
6661
longitude: this.longitude.__getValue(),
6762
latitudeDelta: this.latitudeDelta.__getValue(),
68-
longitudeDelta: this.longitudeDelta.__getValue(),
63+
longitudeDelta: this.longitudeDelta.__getValue()
6964
};
7065
}
7166

@@ -92,15 +87,15 @@ class AnimatedRegion extends AnimatedWithChildren {
9287
}
9388

9489
addListener(callback) {
95-
const id = String(_uniqueId++);
96-
const jointCallback = ({ value: number }) => {
90+
var id = String(_uniqueId++);
91+
var jointCallback = (/*{value}*/) => {
9792
callback(this.__getValue());
9893
};
9994
this._listeners[id] = {
10095
latitude: this.latitude.addListener(jointCallback),
10196
longitude: this.longitude.addListener(jointCallback),
10297
latitudeDelta: this.latitudeDelta.addListener(jointCallback),
103-
longitudeDelta: this.longitudeDelta.addListener(jointCallback),
98+
longitudeDelta: this.longitudeDelta.addListener(jointCallback)
10499
};
105100
return id;
106101
}
@@ -114,60 +109,60 @@ class AnimatedRegion extends AnimatedWithChildren {
114109
}
115110

116111
spring(config) {
117-
const animations = [];
112+
var animations = [];
118113
config.hasOwnProperty('latitude') &&
119-
animations.push(timing(this.latitude, {
114+
animations.push(Animated.timing(this.latitude, {
120115
...config,
121-
toValue: config.latitude,
116+
toValue: config.latitude
122117
}));
123118

124119
config.hasOwnProperty('longitude') &&
125-
animations.push(timing(this.longitude, {
120+
animations.push(Animated.timing(this.longitude, {
126121
...config,
127-
toValue: config.longitude,
122+
toValue: config.longitude
128123
}));
129124

130125
config.hasOwnProperty('latitudeDelta') &&
131-
animations.push(timing(this.latitudeDelta, {
126+
animations.push(Animated.timing(this.latitudeDelta, {
132127
...config,
133-
toValue: config.latitudeDelta,
128+
toValue: config.latitudeDelta
134129
}));
135130

136131
config.hasOwnProperty('longitudeDelta') &&
137-
animations.push(timing(this.longitudeDelta, {
132+
animations.push(Animated.timing(this.longitudeDelta, {
138133
...config,
139-
toValue: config.longitudeDelta,
134+
toValue: config.longitudeDelta
140135
}));
141136

142-
return parallel(animations);
137+
return Animated.parallel(animations);
143138
}
144139

145140
timing(config) {
146-
const animations = [];
141+
var animations = [];
147142
config.hasOwnProperty('latitude') &&
148-
animations.push(timing(this.latitude, {
143+
animations.push(Animated.timing(this.latitude, {
149144
...config,
150-
toValue: config.latitude,
145+
toValue: config.latitude
151146
}));
152147

153148
config.hasOwnProperty('longitude') &&
154-
animations.push(timing(this.longitude, {
149+
animations.push(Animated.timing(this.longitude, {
155150
...config,
156-
toValue: config.longitude,
151+
toValue: config.longitude
157152
}));
158153

159154
config.hasOwnProperty('latitudeDelta') &&
160-
animations.push(timing(this.latitudeDelta, {
155+
animations.push(Animated.timing(this.latitudeDelta, {
161156
...config,
162-
toValue: config.latitudeDelta,
157+
toValue: config.latitudeDelta
163158
}));
164159

165160
config.hasOwnProperty('longitudeDelta') &&
166-
animations.push(timing(this.longitudeDelta, {
161+
animations.push(Animated.timing(this.longitudeDelta, {
167162
...config,
168-
toValue: config.longitudeDelta,
163+
toValue: config.longitudeDelta
169164
}));
170165

171-
return parallel(animations);
166+
return Animated.parallel(animations);
172167
}
173168
}

‎components/MapView.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import MapPolygon from './MapPolygon';
1515
import MapCircle from './MapCircle';
1616
import MapCallout from './MapCallout';
1717
import MapUrlTile from './MapUrlTile';
18+
import AnimatedRegion from './AnimatedRegion';
1819
import {
1920
contextTypes as childContextTypes,
2021
getAirMapName,
@@ -571,5 +572,6 @@ Object.assign(MapView, ProviderConstants);
571572
MapView.ProviderPropType = PropTypes.oneOf(Object.values(ProviderConstants));
572573

573574
MapView.Animated = Animated.createAnimatedComponent(MapView);
575+
MapView.AnimatedRegion = AnimatedRegion;
574576

575577
module.exports = MapView;

0 commit comments

Comments
 (0)