Merge pull request #774 from sfroment/dev/sfroment/splash-screen

feat(client): add berty splash screen

.circleci/config.yml

@@ -301,9 +301,9 @@ jobs:
       - attach_workspace:
           at: ~/go/src/berty.tech/
 
-      # if build breaks, increment vX in both restore_cache and save_cache
-      - restore_cache:
-          key: v2-ios-golang-{{ .Environment.GOVERSION }}-2
+      # # if build breaks, increment vX in both restore_cache and save_cache
+      # - restore_cache:
+      #     key: v2-ios-golang-{{ .Environment.GOVERSION }}-2
 
       - run:
           name: install-go
@@ -327,12 +327,12 @@ jobs:
               gomobile init
             fi
 
-      - save_cache:
-          key: v2-ios-golang-{{ .Environment.GOVERSION }}-2
-          paths:
-            - ~/go/pkg
-            - ~/go/src/github.com
-            - ~/go-install
+      # - save_cache:
+      #     key: v2-ios-golang-{{ .Environment.GOVERSION }}-2
+      #     paths:
+      #       - ~/go/pkg
+      #       - ~/go/src/github.com
+      #       - ~/go-install
 
       - run:
           name: install core
@@ -400,8 +400,8 @@ jobs:
           at: ~/go/src/berty.tech/
 
       # if build breaks, increment vX in both restore_cache and save_cache
-      - restore_cache:
-          key: v2-ios-golang-{{ .Environment.GOVERSION }}-3
+      # - restore_cache:
+      #     key: v2-ios-golang-{{ .Environment.GOVERSION }}-3
 
       - run:
           name: install-go
@@ -425,12 +425,12 @@ jobs:
               gomobile init
             fi
 
-      - save_cache:
-          key: v2-ios-golang-{{ .Environment.GOVERSION }}-3
-          paths:
-            - ~/go/pkg
-            - ~/go/src/github.com
-            - ~/go-install
+      # - save_cache:
+      #     key: v2-ios-golang-{{ .Environment.GOVERSION }}-3
+      #     paths:
+      #       - ~/go/pkg
+      #       - ~/go/src/github.com
+      #       - ~/go-install
 
       - run:
           name: install core

client/react-native/android/app/build.gradle

@@ -98,7 +98,7 @@ android {
     buildToolsVersion rootProject.ext.buildToolsVersion
 
     defaultConfig {
-        applicationId "chat.berty"
+        applicationId "chat.berty.main"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
@@ -166,6 +166,7 @@ android {
 }
 
 dependencies {
+    compile project(':lottie-react-native')
     compile project(':react-native-vector-icons')
     compile project(':react-native-svg')
     compile project(':react-native-restart')

client/react-native/android/app/src/main/AndroidManifest.xml

@@ -14,16 +14,25 @@
         android:icon="@mipmap/ic_launcher"
         android:allowBackup="false"
         android:theme="@style/AppTheme">
+
         <activity
-            android:name=".MainActivity"
-            android:launchMode="singleTask"
-            android:label="@string/app_name"
-            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
-            android:windowSoftInputMode="adjustResize">
+            android:name=".SplashActivity"
+            android:theme="@style/SplashTheme"
+            android:label="@string/app_name">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
+        </activity>
+
+        <activity
+            android:name=".MainActivity"
+            android:launchMode="singleTask"
+            android:label="@string/app_name"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+            android:windowSoftInputMode="adjustResize"
+            android:exported="true"
+            >
             <intent-filter>
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />

client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.airbnb.android.react.lottie.LottiePackage;
 import com.oblador.vectoricons.VectorIconsPackage;
 import com.horcrux.svg.SvgPackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
@@ -43,6 +44,7 @@ protected List<ReactPackage> getPackages() {
                 new CorePackage(),
                 new ImagePickerPackage(),
                 new MainReactPackage(),
+            new LottiePackage(),
                 new RNCameraPackage(),
                 new RNNetworkInfoPackage(),
                 new ReactNativeExceptionHandlerPackage(),

client/react-native/android/app/src/main/java/chat/berty/main/SplashActivity.java

@@ -0,0 +1,18 @@
+package chat.berty.main;
+
+import android.content.Intent;
+import android.os.Bundle;
+import android.support.v7.app.AppCompatActivity;
+
+import chat.berty.main.MainActivity;
+
+public class SplashActivity extends AppCompatActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Intent intent = new Intent(this, MainActivity.class);
+        startActivity(intent);
+        finish();
+    }
+}

client/react-native/android/app/src/main/res/drawable/background_splash.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+
+    <item
+        android:drawable="@color/white"/>
+
+    <item
+        android:width="200dp"
+        android:height="200dp"
+        android:drawable="@mipmap/berty_square"
+        android:gravity="center" />
+
+
+</layer-list>

client/react-native/android/app/src/main/res/values/styles.xml

@@ -2,7 +2,17 @@
 
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:windowBackground">@drawable/background_splash</item>
+
+        <!-- Customize your theme here. -->
+    </style>
+
+    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <item name="android:windowBackground">@drawable/background_splash</item>
+
         <!-- Customize your theme here. -->
     </style>
 
+    <color name="white">#FFFFFF</color>
+
 </resources>

client/react-native/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Berty'
+include ':lottie-react-native'
+project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-svg'

client/react-native/common/components/App.js

@@ -1,15 +1,19 @@
-import { Linking, Platform } from 'react-native'
+import { Linking, Platform, Animated, Easing } from 'react-native'
 import { SafeAreaView } from 'react-navigation'
 import KeyboardSpacer from 'react-native-keyboard-spacer'
 import React, { PureComponent } from 'react'
 import { parse as parseUrl } from '../helpers/url'
-
-import { Loader } from './Library'
+import LottieView from 'lottie-react-native'
+import { Flex } from './Library'
 import Accounts from './Screens/Accounts'
+import { colors } from './../constants'
 
 export default class App extends PureComponent {
   state = {
     loading: true,
+    hide: true,
+    duration: 4000,
+    progress: new Animated.Value(0),
     deepLink: {
       routeName: 'main',
       params: {},
@@ -30,6 +34,7 @@ export default class App extends PureComponent {
     }
 
     Linking.addEventListener('url', this._handleOpenURL)
+    this.startAnimation()
     this.setState({ loading: false })
   }
 
@@ -60,21 +65,47 @@ export default class App extends PureComponent {
     }
   }
 
+  startAnimation () {
+    Animated.timing(this.state.progress, {
+      toValue: 1,
+      duration: this.state.duration,
+      easing: Easing.linear,
+    }).start(({ finished }) => {
+      if (finished) {
+        this.setState({ hide: false })
+      }
+    })
+  }
+
   render () {
-    const { loading, deepLink } = this.state
-    if (loading) {
-      return <Loader />
-    }
+    console.log(this.onAnimationFinished)
+    const { loading, deepLink, hide, progress } = this.state
     return (
       <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
-        <Accounts
-          ref={nav => {
-            this.navigation = nav
-          }}
-          screenProps={{
-            deepLink,
-          }}
-        />
+        { hide && Platform.OS !== 'web'
+          ? <Flex.Rows
+            align='center'
+            justify='center'
+            style={{ 'width': '100%',  height: '100%', zIndex: 1000, position: 'absolute', backgroundColor: colors.white }}
+          >
+            <LottieView
+              source={require('./../static/animation/BertyAnimation.json')}
+              progress={progress}
+              loop={false}
+              style={{ 'width': 320 }}
+              autoSize
+            />
+          </Flex.Rows>
+          : null }
+        { !loading
+          ? <Accounts
+            ref={nav => {
+              this.navigation = nav
+            }}
+            screenProps={{
+              deepLink,
+            }}
+          /> : null }
         {Platform.OS === 'ios' && <KeyboardSpacer />}
       </SafeAreaView>
     )

client/react-native/common/components/App.web.js

@@ -0,0 +1,82 @@
+import { Linking, Platform } from 'react-native'
+import { SafeAreaView } from 'react-navigation'
+import KeyboardSpacer from 'react-native-keyboard-spacer'
+import React, { PureComponent } from 'react'
+import { parse as parseUrl } from '../helpers/url'
+
+import { Loader } from './Library'
+import Accounts from './Screens/Accounts'
+
+export default class App extends PureComponent {
+  state = {
+    loading: true,
+    deepLink: {
+      routeName: 'main',
+      params: {},
+    },
+  }
+
+  componentDidMount () {
+    Linking.getInitialURL()
+      .then(url => {
+        if (url !== null) {
+          this.handleOpenURL({ url })
+        }
+      })
+      .catch(() => {})
+
+    if (this._handleOpenURL === undefined) {
+      this._handleOpenURL = this.handleOpenURL.bind(this)
+    }
+
+    Linking.addEventListener('url', this._handleOpenURL)
+    this.setState({ loading: false })
+  }
+
+  componentWillUnmount () {
+    if (this._handleOpenURL !== undefined) {
+      Linking.removeEventListener('url', this._handleOpenURL)
+    }
+  }
+
+  handleOpenURL (event) {
+    let url = parseUrl(event.url.replace('berty://', 'https://berty.tech/'))
+
+    switch (url.pathname) {
+      case '/add-contact':
+        this.setState({
+          deepLink: {
+            routeName: 'modal/contacts/add/by-public-key',
+            params: {
+              initialKey: url.hashParts['public-key'] || '',
+              initialName: url.hashParts['display-name'] || '',
+            },
+          },
+        })
+        break
+      default:
+        console.warn(`Unhandled deep link, URL: ${event.url}`)
+        break
+    }
+  }
+
+  render () {
+    const { loading, deepLink } = this.state
+    if (loading) {
+      return <Loader />
+    }
+    return (
+      <SafeAreaView style={{ flex: 1 }} forceInset={{ bottom: 'never' }}>
+        <Accounts
+          ref={nav => {
+            this.navigation = nav
+          }}
+          screenProps={{
+            deepLink,
+          }}
+        />
+        {Platform.OS === 'ios' && <KeyboardSpacer />}
+      </SafeAreaView>
+    )
+  }
+}