diff --git a/types/react-map-gl/index.d.ts b/types/react-map-gl/index.d.ts
index d36f2dfaf0..40ffc13c31 100644
--- a/types/react-map-gl/index.d.ts
+++ b/types/react-map-gl/index.d.ts
@@ -3,6 +3,7 @@
 // Definitions by: Robert Imig <https://github.com/rimig>
 //                 Fabio Berta <https://github.com/fnberta>
 //                 Sander Siim <https://github.com/sandersiim>
+//                 Otto Urpelainen <https://github.com/oturpe>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 3.0
 
@@ -80,18 +81,24 @@ export class StaticMap extends React.PureComponent<StaticMapProps> {
 }
 
 export interface ExtraState {
-    isDragging: boolean;
-    isHovering: boolean;
+    inTransition?: boolean;
+    isDragging?: boolean;
+    isHovering?: boolean;
+    isPanning?: boolean;
+    isRotating?: boolean;
+    isZooming?: boolean;
 }
 
 export interface PositionInput {
     pos: [number, number];
 }
 
-export type ViewportChangeHandler = (viewState: ViewState) => void;
+export type ViewportChangeHandler = (viewState: ViewportProps) => void;
+
+export type ContextViewportChangeHandler = (viewState: ViewportProps, interactionState: ExtraState, oldViewState: ViewportProps) => void;
 
 export interface MapControllerOptions {
-    onViewportChange?: ViewportChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     onStateChange?: (state: MapState) => void;
     eventManager?: any;
     isInteractive: boolean;
@@ -209,18 +216,26 @@ export class LinearInterpolator extends TransitionInterpolator {
 export class FlyToInterpolator extends TransitionInterpolator {}
 
 export interface ViewStateChangeInfo {
-    viewState: ViewState;
+    viewState: ViewportProps;
+}
+
+export interface ContextViewStateChangeInfo {
+    viewState: ViewportProps;
+    interactionState: ExtraState;
+    newViewState: ViewportProps;
 }
 
 export type ViewStateChangeHandler = (info: ViewStateChangeInfo) => void;
 
+export type ContextViewStateChangeHandler = (info: ContextViewStateChangeInfo) => void;
+
 export interface InteractiveMapProps extends StaticMapProps {
     maxZoom?: number;
     minZoom?: number;
     maxPitch?: number;
     minPitch?: number;
-    onViewStateChange?: ViewStateChangeHandler;
-    onViewportChange?: ViewportChangeHandler;
+    onViewStateChange?: ContextViewStateChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     onInteractionStateChange?: (state: ExtraState) => void;
     transitionDuration?: number;
     transitionInterpolator?: TransitionInterpolator;
@@ -272,8 +287,8 @@ export interface MapContextProps {
     viewport?: WebMercatorViewport;
     map?: MapboxGL.Map;
     mapContainer: HTMLElement | null;
-    onViewStateChange?: ViewStateChangeHandler;
-    onViewportChange?: ViewportChangeHandler;
+    onViewStateChange?: ContextViewStateChangeHandler;
+    onViewportChange?: ContextViewportChangeHandler;
     isDragging: boolean;
     eventManager?: EventManager;
 }
diff --git a/types/react-map-gl/react-map-gl-tests.tsx b/types/react-map-gl/react-map-gl-tests.tsx
index 2978c53273..43bc073674 100644
--- a/types/react-map-gl/react-map-gl-tests.tsx
+++ b/types/react-map-gl/react-map-gl-tests.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 import {
-    ViewState,
     InteractiveMap,
     CanvasOverlay,
     SVGOverlay,
@@ -10,22 +9,31 @@ import {
     CanvasRedrawOptions,
     HTMLRedrawOptions,
     SVGRedrawOptions,
-    StaticMap
+    StaticMap,
+    ViewportProps
 } from 'react-map-gl';
 import * as MapboxGL from "mapbox-gl";
 
 interface State {
-    viewState: ViewState;
+    viewport: ViewportProps;
 }
 
 class MyMap extends React.Component<{}, State> {
     readonly state: State = {
-        viewState: {
+        viewport: {
+            width: 400,
+            height: 400,
             bearing: 0,
             latitude: 0,
             longitude: 0,
             zoom: 3,
-        }
+            pitch: 0,
+            altitude: 1.5,
+            maxZoom: 20,
+            minZoom: 0,
+            maxPitch: 60,
+            minPitch: 0,
+        },
     };
     private map: MapboxGL.Map;
 
@@ -33,11 +41,11 @@ class MyMap extends React.Component<{}, State> {
         return (
             <div>
                 <InteractiveMap
-                    {...this.state.viewState}
+                    {...this.state.viewport}
                     mapboxApiAccessToken="pk.test"
-                    height={400}
-                    width={400}
                     ref={this.setRefInteractive}
+                    onViewportChange={viewport => this.setState({ viewport })}
+                    onViewStateChange={({ viewState }) => this.setState({ viewport: viewState })}
                 >
                     <FullscreenControl className="test-class" container={document.querySelector('body')} />
                     <GeolocateControl className="test-class" style={{ marginTop: "8px" }} />
@@ -102,7 +110,7 @@ class MyMap extends React.Component<{}, State> {
                     />
                 </InteractiveMap>
                 <StaticMap
-                    {...this.state.viewState}
+                    {...this.state.viewport}
                     mapboxApiAccessToken="pk.test"
                     height={400}
                     width={400}