Upgrade to expo 21

.babelrc

@@ -1,5 +1,5 @@
 {
- "presets": ["babel-preset-exponent"],
+ "presets": ["babel-preset-expo"],
  "env": {
  "development": {
  "plugins": ["transform-react-jsx-source"]

exp.json

@@ -3,17 +3,17 @@
  "description": "An empty new project",
  "slug": "nike-plus-running",
  "privacy": "public",
- "sdkVersion": "12.0.0",
+ "sdkVersion": "21.0.0",
  "version": "1.0.0",
  "orientation": "portrait",
  "primaryColor": "#cccccc",
- "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
+ "icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
  "notification": {
- "iconUrl": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
+ "icon": "https://s3.amazonaws.com/exp-us-standard/placeholder-push-icon-blue-circle.png",
  "color": "#000000"
  },
  "loading": {
- "iconUrl": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
+ "icon": "https://s3.amazonaws.com/exp-brand-assets/ExponentEmptyManifest_192.png",
  "hideExponentText": false
  },
  "packagerOpts": {

main.js

@@ -1,12 +1,12 @@
-import Exponent from 'exponent';
+import Exponent from 'expo';
 import React from 'react';
 import {
  StyleSheet,
  Text,
  View,
 } from 'react-native';
 
-import { Font, Components } from 'exponent';
+import { Font, AppLoading } from 'expo';
 
 import SplashScreen from './src/components/SplashScreen';
 import HomeScreen from './src/components/HomeScreen';
@@ -19,7 +19,7 @@ import {
  NavigationProvider,
  StackNavigation,
  NavigationStyles
-} from '@exponent/ex-navigation';
+} from '@expo/ex-navigation';
 
 const Router = createRouter(() => ({
  splash: () => SplashScreen,
@@ -48,7 +48,7 @@ class App extends React.Component {
 
  render() {
  if (!this.state.fontLoaded) {
- return <Components.AppLoading />;
+ return <AppLoading />;
  }
 
  return (

package.json

@@ -6,10 +6,10 @@
  "private": true,
  "main": "main.js",
  "dependencies": {
- "@exponent/ex-navigation": "^2.7.0",
- "@exponent/vector-icons": "~2.0.3",
- "exponent": "~12.0.3",
- "react": "~15.3.2",
- "react-native": "git+https://github.com/exponentjs/react-native#sdk-12.0.0"
+ "@expo/ex-navigation": "^3.1.0",
+ "@expo/vector-icons": "^5.2.0",
+ "expo": "^21.0.0",
+ "react": "16.0.0-alpha.12",
+ "react-native": "https://github.com/expo/react-native/archive/sdk-21.0.2.tar.gz"
  }
 }

src/components/BeginRunScreen.js

@@ -8,7 +8,7 @@ import {
  ScrollView,
  TouchableOpacity
 } from 'react-native';
-import { Components } from 'exponent';
+import { LinearGradient } from 'expo';
 import FadedZoom from '../animations/FadedZoom';
 
 class BeginRunScreen extends React.Component {
@@ -53,7 +53,7 @@ class BeginRunScreen extends React.Component {
  </View>
  <ScrollView>
  <View style={styles.mainBar}>
- <Components.LinearGradient
+ <LinearGradient
  pointerEvents="none"
  colors={['rgba(0,0,0,0.8)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0.8)']}
  start={[0, 0]} end={[1, 0]}

src/components/HistoryScreen.js

@@ -8,7 +8,7 @@ import {
  ScrollView,
  TouchableOpacity
 } from 'react-native';
-import { Components } from 'exponent';
+import { MapView, LinearGradient } from 'expo';
 import FadedZoom from '../animations/FadedZoom';
 
 class HistoryScreen extends React.Component {
@@ -38,7 +38,7 @@ class HistoryScreen extends React.Component {
  </View>
  <ScrollView>
  <View style={{height: 400, zIndex: 1, marginBottom: 30}}>
- <Components.MapView
+ <MapView
  style={{height: 400}}
  initialRegion={{
  latitude: 37.78825,
@@ -47,7 +47,7 @@ class HistoryScreen extends React.Component {
  longitudeDelta: 0.0421,
  }}
  />
- <Components.LinearGradient
+ <LinearGradient
  colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.8)', 'rgba(255,255,255,1)', 'rgba(255,255,255,1)']}
  style={{height: 150, position: 'absolute', bottom: 0, left: 0, right: 0}} />
  <View style={{height: 150, position: 'absolute', bottom: 0, left: 0, right: 0, paddingHorizontal: 35, paddingTop: 40}}>

src/components/HomeScreen.js

@@ -13,7 +13,7 @@ import {
  Dimensions
 } from 'react-native';
 
-import { Components, Location, Permissions } from 'exponent';
+import { MapView, LinearGradient, Location, Permissions } from 'expo';
 import FadedZoom from '../animations/FadedZoom';
 import CardProfile from './CardProfile';
 import CardCoach from './CardCoach';
@@ -180,7 +180,6 @@ class HomeScreen extends React.Component {
  render() {
  let { pan, scale } = this.state;
  let [translateX, translateY] = [pan.x, pan.y];
- const {MapView} = Components;
  return (
  <View style={styles.container}>
  <StatusBar
@@ -202,7 +201,7 @@ class HomeScreen extends React.Component {
  </MapView.Marker>
  </MapView>
  <View style={styles.toolbar}>
- <Components.LinearGradient
+ <LinearGradient
  colors={['rgba(255,255,255,1)', 'rgba(255,255,255,0.8)', 'rgba(255,255,255,0)']}
  style={{height: 50, position: 'absolute', top: 0, left: 0, right: 0}} />
  <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
@@ -243,7 +242,7 @@ class HomeScreen extends React.Component {
  </Animated.View>
  </View>
  <View style={styles.footer}>
- <Components.LinearGradient
+ <LinearGradient
  pointerEvents="none"
  colors={['rgba(255,255,255,0)', 'rgba(255,255,255,0.8)', 'rgba(255,255,255,1)', 'rgba(255,255,255,1)']}
  style={{height: 200, position: 'absolute', bottom: 0, left: 0, right: 0}} />

src/components/RunningScreen.js

@@ -8,7 +8,7 @@ import {
  ScrollView,
  TouchableOpacity
 } from 'react-native';
-import { Components } from 'exponent';
+import { LinearGradient } from 'expo';
 import FadedZoom from '../animations/FadedZoom';
 
 class RunningScreen extends React.Component {
@@ -66,7 +66,7 @@ class RunningScreen extends React.Component {
  </View>
  </View>
  <View style={styles.graphBar}>
- <Components.LinearGradient
+ <LinearGradient
  pointerEvents="none"
  colors={['rgba(0,0,0,0.8)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)']}
  start={[0, 0]} end={[1, 0]}