Initial commit/

3 files changed, 286 insertions, 0 deletions

diff --git a/frontend/app/screens/other/index.js b/frontend/app/screens/other/index.js
new file mode 100644
index 0000000..9784f88
--- /dev/null
+++ b/frontend/app/screens/other/index.js
@@ -0,0 +1,2 @@
+export * from './splash';
+export * from './settings';
diff --git a/frontend/app/screens/other/settings.js b/frontend/app/screens/other/settings.js
new file mode 100644
index 0000000..910deb0
--- /dev/null
+++ b/frontend/app/screens/other/settings.js
@@ -0,0 +1,176 @@
+import React from 'react';
+import {
+  ScrollView,
+  View,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import {
+  RkText,
+  RkStyleSheet,
+  RkTheme,
+} from 'react-native-ui-kitten';
+import {
+  RkSwitch,
+  FindFriends,
+} from '../../components';
+import { FontAwesome } from '../../assets/icons';
+
+export class Settings extends React.Component {
+  static navigationOptions = {
+    title: 'Settings'.toUpperCase(),
+  };
+
+  state = {
+    sendPush: true,
+    shouldRefresh: false,
+    twitterEnabled: true,
+    googleEnabled: false,
+    facebookEnabled: true,
+  };
+
+  onPushNotificationsSettingChanged = (value) => {
+    this.setState({ sendPush: value });
+  };
+
+  onRefreshAutomaticallySettingChanged = (value) => {
+    this.setState({ shouldRefresh: value });
+  };
+
+  onFindFriendsTwitterButtonPressed = () => {
+    this.setState({ twitterEnabled: !this.state.twitterEnabled });
+  };
+
+  onFindFriendsGoogleButtonPressed = () => {
+    this.setState({ googleEnabled: !this.state.googleEnabled });
+  };
+
+  onFindFriendsFacebookButtonPressed = () => {
+    this.setState({ facebookEnabled: !this.state.facebookEnabled });
+  };
+
+  render = () => (
+    <ScrollView style={styles.container}>
+      <View style={styles.section}>
+        <View style={[styles.row, styles.heading]}>
+          <RkText rkType='primary header6'>PROFILE SETTINGS</RkText>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Edit Profile</RkText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Change Password</RkText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <RkText rkType='header6'>Send Push Notifications</RkText>
+          <RkSwitch
+            style={styles.switch}
+            value={this.state.sendPush}
+            name="Push"
+            onValueChange={this.onPushNotificationsSettingChanged}
+          />
+        </View>
+        <View style={styles.row}>
+          <RkText rkType='header6'>Refresh Automatically</RkText>
+          <RkSwitch
+            style={styles.switch}
+            value={this.state.shouldRefresh}
+            name="Refresh"
+            onValueChange={this.onRefreshAutomaticallySettingChanged}
+          />
+        </View>
+      </View>
+      <View style={styles.section}>
+        <View style={[styles.row, styles.heading]}>
+          <RkText rkType='primary header6'>FIND FRIENDS</RkText>
+        </View>
+        <View style={styles.row}>
+          <FindFriends
+            color={RkTheme.current.colors.twitter}
+            text='Twitter'
+            icon={FontAwesome.twitter}
+            selected={this.state.twitterEnabled}
+            onPress={this.onFindFriendsTwitterButtonPressed}
+          />
+        </View>
+        <View style={styles.row}>
+          <FindFriends
+            color={RkTheme.current.colors.google}
+            text='Google'
+            icon={FontAwesome.google}
+            selected={this.state.googleEnabled}
+            onPress={this.onFindFriendsGoogleButtonPressed}
+          />
+        </View>
+        <View style={styles.row}>
+          <FindFriends
+            color={RkTheme.current.colors.facebook}
+            text='Facebook'
+            icon={FontAwesome.facebook}
+            selected={this.state.facebookEnabled}
+            onPress={this.onFindFriendsFacebookButtonPressed}
+          />
+        </View>
+      </View>
+      <View style={styles.section}>
+        <View style={[styles.row, styles.heading]}>
+          <RkText rkType='primary header6'>SUPPORT</RkText>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Help</RkText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Privacy Policy</RkText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Terms & Conditions</RkText>
+          </TouchableOpacity>
+        </View>
+        <View style={styles.row}>
+          <TouchableOpacity style={styles.rowButton}>
+            <RkText rkType='header6'>Logout</RkText>
+          </TouchableOpacity>
+        </View>
+      </View>
+    </ScrollView>
+  )
+}
+
+const styles = RkStyleSheet.create(theme => ({
+  container: {
+    backgroundColor: theme.colors.screen.base,
+  },
+  header: {
+    paddingVertical: 25,
+  },
+  section: {
+    marginVertical: 25,
+  },
+  heading: {
+    paddingBottom: 12.5,
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 17.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderColor: theme.colors.border.base,
+    alignItems: 'center',
+  },
+  rowButton: {
+    flex: 1,
+    paddingVertical: 24,
+  },
+  switch: {
+    marginVertical: 14,
+  },
+}));
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',
+  },
+});