1 files changed, 108 insertions, 0 deletions
diff --git a/frontend/app/screens/other/splash.js b/frontend/app/screens/other/splash.js
new file mode 100644
index 0000000..33e7abe
--- /dev/null
+++ b/frontend/app/screens/other/splash.js
@@ -0,0 +1,108 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Image,
+  View,
+  Dimensions,
+  StatusBar,
+} from 'react-native';
+import {
+  RkText,
+  RkTheme,
+} from 'react-native-ui-kitten';
+import {
+  StackActions,
+  NavigationActions,
+} from 'react-navigation';
+import { ProgressBar } from '../../components';
+import { KittenTheme } from '../../config/theme';
+import { scale, scaleVertical } from '../../utils/scale';
+import NavigationType from '../../config/navigation/propTypes';
+
+const delay = 800;
+
+export class SplashScreen extends React.Component {
+  static propTypes = {
+    navigation: NavigationType.isRequired,
+  };
+  state = {
+    progress: 0,
+  };
+
+  componentDidMount() {
+    StatusBar.setHidden(true, 'none');
+    RkTheme.setTheme(KittenTheme);
+    this.timer = setInterval(this.updateProgress, delay);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  updateProgress = () => {
+    if (this.state.progress === 1) {
+      clearInterval(this.timer);
+      setTimeout(this.onLoaded, delay);
+    } else {
+      const randProgress = this.state.progress + (Math.random() * 0.5);
+      this.setState({ progress: randProgress > 1 ? 1 : randProgress });
+    }
+  };
+
+  onLoaded = () => {
+    StatusBar.setHidden(false, 'slide');
+    const toHome = StackActions.reset({
+      index: 0,
+      actions: [NavigationActions.navigate({ routeName: 'Home' })],
+    });
+    this.props.navigation.dispatch(toHome);
+  };
+
+  render = () => (
+    <View style={styles.container}>
+      <View>
+        <Image
+          style={[styles.image, { width: Dimensions.get('window').width }]}
+          source={require('../../assets/images/splashBack.png')}
+        />
+        <View style={styles.text}>
+          <RkText rkType='light' style={styles.hero}>EcoAlerts</RkText>
+          <RkText rkType='logo' style={styles.appName}>The best ecological problems coordinator</RkText>
+        </View>
+      </View>
+      <ProgressBar
+        color={RkTheme.current.colors.accent}
+        style={styles.progress}
+        progress={this.state.progress}
+        width={scale(320)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: KittenTheme.colors.screen.base,
+    justifyContent: 'space-between',
+    flex: 1,
+  },
+  image: {
+    resizeMode: 'cover',
+    height: scaleVertical(430),
+  },
+  text: {
+    alignItems: 'center',
+  },
+  hero: {
+    fontSize: 37,
+  },
+  appName: {
+    textAlign: 'center',
+    fontSize: 33,
+  },
+  progress: {
+    alignSelf: 'center',
+    marginBottom: 35,
+    backgroundColor: '#e5e5e5',
+  },
+});