feat: update to Expo SDK 33

CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.3.0](https://github.com/serlo/serlo-abc/compare/1.2.4..1.3.0) - June 6, 2019
+
+### Changed
+
+- Update to Expo SDK 33
+
+## [1.2.4](https://github.com/serlo/serlo-abc/compare/1.2.3..1.2.4) - June 5, 2019
+
+### Fixed
+
+- Fix chapters using sound files for letters `D` and `R`
+
 ## [1.2.3](https://github.com/serlo/serlo-abc/compare/1.2.2..1.2.3) - February 4, 2019
 
 ### Changed

app.ci.json

@@ -0,0 +1,44 @@
+{
+  "expo": {
+    "name": "Serlo ABC",
+    "slug": "serlo-abc",
+    "privacy": "public",
+    "platforms": ["ios", "android"],
+    "sdkVersion": "32.0.0",
+    "icon": "./appIcon-ios.png",
+    "packagerOpts": {
+      "nonPersistent": true
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "ios": {
+      "bundleIdentifier": "org.serlo.abc",
+      "icon": "./appIcon-ios.png",
+      "supportsTablet": true,
+      "buildNumber": "1.2.5"
+    },
+    "android": {
+      "package": "org.serlo.abc",
+      "icon": "./appIcon-android.png",
+      "permissions": [
+        "READ_EXTERNAL_STORAGE",
+        "READ_INTERNAL_STORAGE",
+        "READ_PHONE_STATE",
+        "RECORD_AUDIO",
+        "WRITE_EXTERNAL_STORAGE",
+        "com.android.launcher.permission.INSTALL_SHORTCUT",
+        "com.htc.launcher.permission.READ_SETTINGS",
+        "om.htc.launcher.permission.UPDATE_SHORTCUT"
+      ],
+      "versionCode": 6
+    },
+    "assetBundlePatterns": [
+      "src/assets/images/*",
+      "src/assets/sounds/*",
+      "src/assets/words/images/*",
+      "src/assets/words/sounds/*"
+    ],
+    "version": "1.2.5"
+  }
+}

app.json

@@ -4,7 +4,7 @@
     "slug": "serlo-abc",
     "privacy": "public",
     "platforms": ["ios", "android"],
-    "sdkVersion": "32.0.0",
+    "sdkVersion": "33.0.0",
     "icon": "./appIcon-ios.png",
     "packagerOpts": {
       "nonPersistent": true

package.json

@@ -1,16 +1,18 @@
 {
   "name": "@serlo/serlo-abc",
-  "version": "1.2.5",
-  "versionCode": 6,
+  "version": "1.3.0",
+  "versionCode": 7,
   "main": "node_modules/expo/AppEntry.js",
   "repository": "serlo/serlo-abc",
   "scripts": {
     "build": "expo start",
     "build:android": "expo build:android --config app.ci.json",
     "build:ios": "expo build:ios --config app.ci.json",
     "build:status": "expo build:status",
-    "deploy:development": "npm-run-all --serial expo:config:development expo:publish",
-    "deploy:master": "npm-run-all --serial expo:config:master expo:publish",
+    "deploy:development": "npm-run-all --serial expo:config:development expo:publish expo:config:clean",
+    "deploy:master": "npm-run-all --serial expo:config:master expo:publish expo:config:clean",
+    "deploy:android": "npm-run-all --serial expo:config:master build:android expo:config:clean",
+    "deploy:ios": "npm-run-all --serial expo:config:master build:ios expo:config:clean",
     "generate": "npm-run-all generate:*",
     "generate:ids": "node scripts/generate-ids",
     "generate:sounds": "ts-node scripts/generate-sounds",
@@ -24,7 +26,6 @@
     "expo:config:clean": "rimraf app.ci.json",
     "expo:login": "expo login",
     "expo:publish": "expo publish --config app.ci.json",
-    "postexpo:publish": "run-s expo:config:clean",
     "start": "expo start",
     "android": "expo android",
     "ios": "expo ios",
@@ -39,16 +40,24 @@
     "changelog": "ts-node scripts/changelog"
   },
   "dependencies": {
+    "@expo/vector-icons": "^10.0.0",
     "chroma-js": "^2.0.0",
-    "expo": "^32.0.0",
+    "expo": "^33.0.0",
     "expo-analytics": "^1.0.0",
+    "expo-asset": "^5.0.0",
+    "expo-av": "~5.0.0",
+    "expo-constants": "~5.0.0",
+    "expo-font": "~5.0.0",
+    "expo-permissions": "~5.0.0",
+    "expo-web-browser": "~5.0.0",
     "fluent-ffmpeg": "^2.0.0",
     "ramda": "^0.26.0",
-    "react": "16.5.0",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
+    "react": "16.8.3",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-svg": "^9.0.0",
     "react-native-swipe-gestures": "^1.0.0",
     "react-router-native": "^4.0.0",
-    "sentry-expo": "^1.0.0"
+    "sentry-expo": "~1.11.0"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
@@ -74,13 +83,12 @@
     "gm": "^1.0.0",
     "husky": "^1.0.0",
     "jest": "^24.0.0",
-    "jest-expo": "^32.0.0",
+    "jest-expo": "^33.0.0",
     "lint-staged": "^8.0.0",
     "npm-run-all": "^4.0.0",
     "prettier": "^1.0.0",
     "react-devtools": "^3.0.0",
-    "react-dom": "16.5.0",
-    "react-native-svg": "^8.0.0",
+    "react-dom": "16.8.6",
     "react-test-renderer": "^16.5.0",
     "rimraf": "^2.0.0",
     "semver": "^6.0.0",

packages/entities/asset-resolver/abstract-asset-resolver.ts

@@ -1,6 +1,6 @@
-import { Audio } from 'expo';
-import { Maybe } from '../../maybe';
+import { Audio } from 'expo-av';
 
+import { Maybe } from '../../maybe';
 import * as AssetTypes from './asset-types';
 
 export abstract class AbstractAssetResolver {

packages/entities/asset-resolver/mock-asset-resolver.ts

@@ -1,4 +1,5 @@
-import { Audio } from 'expo';
+import { Audio } from 'expo-av';
+
 import { AbstractAssetResolver } from './abstract-asset-resolver';
 
 export class MockAssetResolver extends AbstractAssetResolver {

packages/entities/exercise-groups/connect-syllables.ts

@@ -43,6 +43,7 @@ export class ConnectSyllables extends AbstractExerciseGroup {
       }),
       ...(filter(
         exercise => !!exercise,
+        // tslint:disable-next-line:no-any
         map<string, AbstractExercise<any, any, any> | undefined>(word => {
           const wordObj = this.createWord(word);
           if (!wordObj) {

packages/entities/word/abstract-word.interface.ts

@@ -1,4 +1,4 @@
-import { Audio } from 'expo';
+import { Audio } from 'expo-av';
 
 import { Maybe } from '../../maybe';
 import { AbstractAssetResolver, AssetTypes } from '../asset-resolver';

scripts/changelog.ts

@@ -23,6 +23,16 @@ const releases: Parameters<typeof generateChangelog>['0'] = [
     tagName: '1.2.3',
     date: '2019-02-04',
     changed: ["Don't play long sounds in repeat lesson"]
+  },
+  {
+    tagName: '1.2.4',
+    date: '2019-06-05',
+    fixed: ['Fix chapters using sound files for letters `D` and `R`']
+  },
+  {
+    tagName: '1.3.0',
+    date: '2019-06-06',
+    changed: ['Update to Expo SDK 33']
   }
 ];
 

src/asset-resolver.ts

@@ -44,8 +44,12 @@ export class AssetResolver extends AbstractAssetResolver {
 
   private cleanId(id: string): string {
     // Don't ask. Somehow, "d" and "r" can't be used as keys in production mode
-    if (id === 'd') return 'd_letter'
-    if (id === 'r') return 'r_letter'
+    if (id === 'd') {
+      return 'd_letter';
+    }
+    if (id === 'r') {
+      return 'r_letter';
+    }
 
     return id
       .replace(/\s/g, '_')

src/assets/sounds.ts

@@ -1,4 +1,4 @@
-import { Audio } from 'expo';
+import { Audio } from 'expo-av';
 
 const sounds: { [id: string]: () => Audio.Sound } = {
   a: () => require('./sounds/a.mp3'),

src/assets/words/sounds.ts

@@ -1,4 +1,4 @@
-import { Audio } from 'expo';
+import { Audio } from 'expo-av';
 
 const sounds: { [id: string]: () => Audio.Sound } = {
   abend_long: () => require('./sounds/abend_long.mp3'),

src/components/common/RoundText.js

@@ -20,7 +20,10 @@ class RoundText extends Component {
     super(props);
 
     this.state = {
-      size: new Animated.Value(props.size),
+      size:
+        typeof props.size !== undefined
+          ? new Animated.Value(props.size)
+          : undefined,
       fontSize: new Animated.Value(this.getBaseFontSize(props))
     };
   }
@@ -65,6 +68,7 @@ class RoundText extends Component {
       missingCorrect
     } = this.props;
     const { size, fontSize } = this.state;
+
     return (
       <View
         style={[
@@ -85,8 +89,7 @@ class RoundText extends Component {
             overflow: 'hidden',
             alignItems: 'center',
             justifyContent: 'center',
-            height: size,
-            width: size
+            ...(size !== undefined ? { height: size, width: size } : {})
           }}
         >
           {isIcon ? (
@@ -120,7 +123,7 @@ class RoundText extends Component {
               style={{
                 position: 'absolute',
                 height: 3.5,
-                width: size,
+                ...(size !== undefined ? { width: size } : {}),
                 borderRadius: 1,
                 backgroundColor: highlighted && !wrong ? PRIMARY_WEAK : WHITE,
                 transform: [{ rotate: '-45deg' }],

src/components/common/Video.js

@@ -1,7 +1,8 @@
 import { propOr } from 'ramda';
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import { Constants, Video } from 'expo';
+import { Video } from 'expo-av';
+import Constants from 'expo-constants';
 
 const styles = {
   container: {

src/components/common/buttons.stories.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore: TODO: add declaration file
 import { Entypo } from '@expo/vector-icons';
 // @ts-ignore TODO: add declaration file
 import { storiesOf } from '@storybook/react-native';

src/components/common/buttons.tsx

@@ -1,3 +1,4 @@
+import { Ionicons } from '@expo/vector-icons';
 import chroma from 'chroma-js';
 import * as React from 'react';
 import {
@@ -9,11 +10,7 @@ import {
 import { BLACK_TRANSPARENT, PRIMARY_WEAK, WHITE } from '../../styles/colors';
 
 interface RoundIconButtonProps extends TouchableOpacityProperties {
-  IconComponent: React.ComponentType<{
-    name: string;
-    size?: number;
-    color: string;
-  }>;
+  IconComponent: typeof Ionicons;
   name: string;
   size: number;
 }

src/components/common/canvas.tsx

@@ -1,22 +1,15 @@
-// @ts-ignore
 import { MaterialIcons } from '@expo/vector-icons';
-import { Constants, Svg as ExpoSvg } from 'expo';
+import Constants from 'expo-constants';
 import * as R from 'ramda';
 import * as React from 'react';
 import { PanResponder, PanResponderInstance, Text, View } from 'react-native';
-import { Circle, G, Polyline } from 'react-native-svg';
+import { Circle, G, Polyline, Svg } from 'react-native-svg';
 
 import { Maybe } from '../../../packages/maybe';
 import { BLACK_TRANSPARENT, PRIMARY_WEAK } from '../../styles/colors';
 import { WithDimensions } from '../helpers/dimensions';
 import { RoundIconButton } from './buttons';
 
-const Svg = ExpoSvg as typeof ExpoSvg & {
-  Circle: typeof Circle;
-  G: typeof G;
-  Polyline: typeof Polyline;
-};
-
 export type RawPoint = [number, number];
 export type RawPath = RawPoint[];
 
@@ -101,27 +94,27 @@ class Canvas extends React.Component<CanvasProps, CanvasState> {
           <Svg style={{ flex: 1 }}>
             {R.addIndex<RawPath>(R.map)(
               (path, index) => (
-                <Svg.G key={`path_${index}`}>
-                  <Svg.Circle
+                <G key={`path_${index}`}>
+                  <Circle
                     cx={path[0][0]}
                     cy={path[0][1]}
                     r={this.props.strokeWidth / 2}
                     fill={PRIMARY_WEAK}
                   />
-                  <Svg.Polyline
+                  <Polyline
                     points={this.generateTextPoints(path)}
                     fill="none"
                     stroke={PRIMARY_WEAK}
                     strokeLinejoin="round"
                     strokeWidth={this.props.strokeWidth}
                   />
-                  <Svg.Circle
+                  <Circle
                     cx={path[path.length - 1][0]}
                     cy={path[path.length - 1][1]}
                     r={this.props.strokeWidth / 2}
                     fill={PRIMARY_WEAK}
                   />
-                </Svg.G>
+                </G>
               ),
               this.state.paths
             )}

src/components/common/screens.tsx

@@ -1,5 +1,5 @@
 // @ts-ignore TODO: add declaration file
-import { Constants } from 'expo';
+import Constants from 'expo-constants';
 import * as React from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 

src/components/helpers/Audio.js

@@ -1,4 +1,4 @@
-import { Audio } from 'expo';
+import { Audio } from 'expo-av';
 import { forEach, filter, identity, map, zipWith } from 'ramda';
 import { Component } from 'react';
 

src/components/helpers/PlaySounds.stories.tsx

@@ -1,4 +1,3 @@
-// @ts-ignore: TODO: add declaration file
 import { Ionicons } from '@expo/vector-icons';
 // @ts-ignore
 import { action } from '@storybook/addon-actions';