🆕

bonuses/flip-card/.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-native-wcandillon"
+}

bonuses/flip-card/.gitignore

@@ -0,0 +1,7 @@
+node_modules/**/*
+.expo/*
+npm-debug.*
+*.jks
+*.p12
+*.key
+*.mobileprovision

bonuses/flip-card/.watchmanconfig

@@ -0,0 +1 @@
+{}

bonuses/flip-card/App.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import {
+  View, StyleSheet, Dimensions, ImageSourcePropType,
+} from "react-native";
+import { Asset, AppLoading, DangerZone } from "expo";
+
+import Card from "./components/Card";
+
+const { Animated } = DangerZone;
+const { Value, call } = Animated;
+const { width } = Dimensions.get("window");
+
+interface AppState {
+  card?: {
+    front: ImageSourcePropType;
+    back: ImageSourcePropType;
+  }
+}
+
+export default class App extends React.Component<{}, AppState> {
+  x = new Value(0);
+
+  state: AppState = {
+    card: null,
+  };
+
+  async componentDidMount() {
+    const front = require("./assets/front.png");
+    const back = require("./assets/back.png");
+    await Promise.all([
+      Asset.loadAsync(front),
+      Asset.loadAsync(back),
+    ]);
+    this.setState({ card: { front, back } });
+  }
+
+  render() {
+    const { x } = this;
+    const { card } = this.state;
+    if (!card) {
+      return (<AppLoading />);
+    }
+    return (
+      <View style={styles.container}>
+        <Card front={card.front} back={card.back} {...{ x }} />
+        <Animated.ScrollView
+          style={StyleSheet.absoluteFillObject}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={{ width: width * 2 }}
+          scrollEventThrottle={16}
+          onScroll={Animated.event(
+            [
+              {
+                nativeEvent: {
+                  contentOffset: { x },
+                },
+              },
+            ],
+          )}
+          horizontal
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

bonuses/flip-card/app.json

@@ -0,0 +1,29 @@
+{
+  "expo": {
+    "name": "3d-animations",
+    "slug": "3d-animations",
+    "privacy": "public",
+    "sdkVersion": "32.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ],
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    }
+  }
+}

bonuses/flip-card/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

bonuses/flip-card/components/Card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import {
+  View, Image, StyleSheet, ImageSourcePropType, Dimensions, Platform, Text,
+} from "react-native";
+import { DangerZone } from "expo";
+
+const { Animated } = DangerZone;
+const {
+  Value, concat, interpolate, cond, and, greaterOrEq, lessThan,
+} = Animated;
+const { width } = Dimensions.get("window");
+const perspective = Platform.OS === "ios" ? 1000 : undefined;
+
+interface CardProps {
+  front: ImageSourcePropType;
+  back: ImageSourcePropType;
+  x: Value
+}
+
+export default class Card extends React.PureComponent<CardProps> {
+  render() {
+    const { front, back, x } = this.props;
+    const rotateYAsDeg = interpolate(x, {
+      inputRange: [0, width],
+      outputRange: [0, 180],
+    });
+    const rotateY = concat(rotateYAsDeg, "deg");
+    const opacity = cond(
+      and(greaterOrEq(rotateYAsDeg, -90), lessThan(rotateYAsDeg, 90)),
+      1,
+      0,
+    );
+    const backOpacity = Platform.OS === "android" ? cond(opacity, 0, 1) : 1;
+    /*
+          */
+    return (
+      <View style={styles.container}>
+        <Animated.View style={{
+          ...StyleSheet.absoluteFillObject,
+          justifyContent: "center",
+          alignItems: "center",
+          opacity: backOpacity,
+          transform: [
+            { perspective },
+            { rotateY: "180deg" },
+            { rotateY },
+          ],
+        }}
+        >
+          <Image source={back} style={styles.image} />
+          <Text style={{ color: "white", fontSize: 72 }}>Hello</Text>
+        </Animated.View>
+        <Animated.View style={{
+          ...StyleSheet.absoluteFillObject,
+          opacity,
+          transform: [
+            { perspective },
+            { rotateY },
+          ],
+        }}
+        >
+          <Image source={front} style={styles.image} />
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    width: 306,
+    height: 434,
+  },
+  image: {
+    ...StyleSheet.absoluteFillObject,
+    width: undefined,
+    height: undefined,
+  },
+});

bonuses/flip-card/package.json

@@ -0,0 +1,23 @@
+{
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject",
+    "lint": "eslint App.tsx components/*",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "expo": "^32.0.0",
+    "react": "16.5.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
+  },
+  "devDependencies": {
+    "@types/expo": "^32.0.2",
+    "babel-preset-expo": "^5.0.0",
+    "eslint": "^5.14.1",
+    "eslint-config-react-native-wcandillon": "^1.0.6"
+  },
+  "private": true
+}

bonuses/flip-card/tsconfig.json

@@ -0,0 +1,62 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+//    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "lib": ["es6"],             /* Specify library files to be included in the compilation. */
+    // "allowJs": true,                       /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-native",                    /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true,                           /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
+    "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    "noUnusedLocals": true,                /* Report errors on unused locals. */
+    "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    "forceConsistentCasingInFileNames": true,
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */                     /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */                 /* List of folders to include type definitions from. */
+    "allowSyntheticDefaultImports": true,  /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    // "esModuleInterop": true,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    "types": [
+      "react",
+      "react-native"
+    ]
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+  },
+  "include": [
+    "App.tsx"
+  ]
+}