Add news screen to example

App.js

@@ -1,8 +1,22 @@
 import React from 'react';
 import { View, StatusBar } from 'react-native';
 import GalioApp from './routes';
+import * as Font from 'expo-font';
+//fonts
+import Galio from './assets/fonts/galio.ttf';
+
 
 export default class App extends React.Component {
+  async componentWillMount() {
+    try {
+      await Font.loadAsync({
+        Galio
+      });
+
+    } catch (error) {
+      console.log('error loading Galio font', error);
+    }
+  }
   render() {
     return (
       <View style={{ flex: 1 }}>

app.json

@@ -26,6 +26,9 @@
     "ios": {
       "supportsTablet": true
     },
-    "githubUrl": "https://github.com/galio-org/galio"
+    "githubUrl": "https://github.com/galio-org/galio",
+    "packagerOpts": {
+      "assetExts": ["ttf"]
+    }
   }
 }

package.json

@@ -40,6 +40,10 @@
     "expo-linear-gradient": "^5.0.1",
     "react": "16.8.3",
     "react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
+    "react-native-alphabetlistview": "^0.3.1",
+    "react-native-gradient-card-view": "0.0.2",
+    "react-native-snap-carousel": "^3.8.0",
+    "react-native-timeline-feed": "^2.0.0",
     "react-native-vector-icons": "^6.0.2"
   },
   "devDependencies": {

routes.js

@@ -9,18 +9,11 @@ import {
 } from 'react-navigation';
 
 // screens
-import Article from './src/screens/Article';
-import ArticleCover from './src/screens/ArticleCover';
-import Cards from './src/screens/Cards';
-import Components from './src/screens/Components';
-import Login from './src/screens/Login';
-import News from './src/screens/News';
-import OrderConfirmed from './src/screens/OrderConfirmed';
-import Presentation from './src/screens/Presentation';
-import Dashboard from './src/screens/Dashboard';
-import Register from './src/screens/Register';
-import Registerv2 from './src/screens/Registerv2';
-import Grid from './src/screens/Grid';
+import SignUp from "./src/screens/SignUp";
+import Dashboard from "./src/screens/dashboard/Dashboard";
+import Activity from "./src/screens/Activity";
+import Contacts from "./src/screens/Contacts";
+import Shipping from "./src/screens/Eccomerce";
 
 import theme from './src/theme';
 import { Block, Icon, Text } from 'galio-framework';
@@ -84,94 +77,42 @@ MenuIcon.propTypes = {
 };
 
 const screens = {
-  Home: {
-    screen: Components,
+  SignUp: {
+    screen: SignUp,
     navigationOptions: {
-      drawerLabel: 'Components',
+      drawerLabel: 'SignUp',
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  Cards: {
-    screen: Cards,
-    navigationOptions: {
-      drawerLabel: 'Cards',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  Article: {
-    screen: Article,
-    navigationOptions: {
-      drawerLabel: 'Article Screen',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  ArticleCover: {
-    screen: ArticleCover,
-    navigationOptions: {
-      drawerLabel: 'Article Cover',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  /*
   Dashboard: {
     screen: Dashboard,
     navigationOptions: {
-      drawerLabel: 'Dashboard screen',
+      drawerLabel: 'Dashboard',
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  */
-  News: {
-    screen: News,
+  Activity:{
+    screen: Activity,
     navigationOptions: {
-      drawerLabel: 'News Screen',
+      drawerLabel: 'Activity',
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  OrderConfirmed: {
-    screen: OrderConfirmed,
+  Contacts:{
+    screen: Contacts,
     navigationOptions: {
-      drawerLabel: 'Order Confirmed',
+      drawerLabel: 'Contacts',
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  /*
-  Presentation: {
-    screen: Presentation,
+  Shipping:{
+    screen: Shipping,
     navigationOptions: {
-      drawerLabel: 'Presentation Screen',
+      drawerLabel: 'Shipping',
       drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
     },
   },
-  Login: {
-    screen: Login,
-    navigationOptions: {
-      drawerLabel: 'Login Screen',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  Register: {
-    screen: Register,
-    navigationOptions: {
-      drawerLabel: 'Register Screen',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  Registerv2: {
-    screen: Registerv2,
-    navigationOptions: {
-      drawerLabel: 'Register Screen v2',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  Grid: {
-    screen: Grid,
-    navigationOptions: {
-      drawerLabel: 'Grid Screen',
-      drawerIcon: props => <MenuIcon name="flag" family="font-awesome" focused={props.focused} />,
-    },
-  },
-  */
+
 };
 
 const options = {

src/helpers/chartGradient.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Defs, LinearGradient, Stop } from 'react-native-svg';
+
+export default class ChartGradient extends React.Component {
+  constructor() {
+    super();
+  }
+  render() {
+    return (
+      <Defs>
+        <LinearGradient
+          id={'gradient'}
+          x1={'0%'}
+          y1={'0%'}
+          x2={'0%'}
+          y2={'100%'}
+        >
+          <Stop
+            offset={'0%'}
+            stopColor={'rgb(134, 65, 244)'}
+            stopOpacity={0.8}
+          />
+          <Stop
+            offset={'100%'}
+            stopColor={'rgb(254, 70, 207)'}
+            stopOpacity={0.2}
+          />
+        </LinearGradient>
+      </Defs>
+    );
+  }
+}

src/screens/Activity.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { StyleSheet, Platform, View, ScrollView } from 'react-native';
+import Timeline from 'react-native-timeline-feed';
+import { LinearGradient as Gradient } from 'expo';
+
+import theme from '../theme';
+
+// galio components
+import { Button, Block, NavBar } from 'galio-framework';
+
+const LINE_COLOR = '#efefef';
+const GRADIENT_PINK = ['#D442F8', '#B645F5', '#9B40F8'];
+const data = [
+  {
+    id: '0',
+    title: 'July 17, 2019',
+    description: 'Get a 2% discount on your next order! Receive it',
+  },
+  {
+    id: '1',
+    title: 'May 24, 2019',
+    description: 'We fixed latest issue with profile & activity screens',
+  },
+  {
+    id: '2',
+    title: 'February 17, 2019',
+    description: 'Lucy’s Closet is now open  until 8pm. Find you',
+  },
+  {
+    id: '3',
+    title: 'February 17, 2019',
+    description: 'All your favourite books at your reach, Bookstore',
+  },
+  {
+    id: '4',
+    title: 'January 10, 2019',
+    description: 'Be the first to know about discounts and offers',
+  },
+];
+export default class Activity extends React.Component {
+  render() {
+    return (
+      <Block safe flex>
+        <NavBar
+          title="Activity"
+          onLeftPress={() => this.props.navigation.openDrawer()}
+          leftIconColor={theme.COLORS.MUTED}
+          right={
+            <Button
+              color="transparent"
+              style={styles.settings}
+              onPress={() => this.props.navigation.openDrawer()}
+            ></Button>
+          }
+          style={
+            Platform.OS === 'android' ? { marginTop: theme.SIZES.BASE } : null
+          }
+        />
+        <ScrollView style={{ flex: 1 }}>
+          <Block style={styles.container}>
+            <Timeline
+              data={data}
+              endWithCircle
+              renderItem={this.renderItem}
+            />
+          </Block>
+        </ScrollView>
+      </Block>
+    );
+  }
+
+  renderItem = ({ item, index }) => {
+    return (
+      <Timeline.Row keyExtractor={(item, index) => item.id}>
+        <Timeline.VerticalSeparator>
+          <Timeline.Circle color={theme.COLORS.NEUTRAL}>
+            <Gradient
+              start={[0.45, 0.45]}
+              end={[0.8, 0.8]}
+              colors={GRADIENT_PINK}
+              style={[styles.circleGradient]}
+            />
+          </Timeline.Circle>
+          <Timeline.Line color={LINE_COLOR} />
+        </Timeline.VerticalSeparator>
+        <Timeline.Event
+          style={styles.event}
+
+        >
+          <View style={[styles.card, styles.titleAndTimeContainer]}>
+            <Timeline.Title textStyle={styles.title}>
+              {item.title}
+            </Timeline.Title>
+
+            <Timeline.Description textStyle={styles.description}>
+              {item.description}
+            </Timeline.Description>
+          </View>
+        </Timeline.Event>
+      </Timeline.Row>
+    );
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 14,
+    justifyContent: 'flex-start',
+    backgroundColor: theme.COLORS.WHITE,
+  },
+  time: {
+    color: theme.COLORS.BLACK,
+  },
+  event: {
+    paddingBottom: 20,
+  },
+  title: {
+    color: theme.COLORS.GREY,
+    fontWeight: '400',
+  },
+  description: {
+    color: theme.COLORS.BLACK,
+  },
+  card: {
+    marginLeft: 5,
+    padding: 14,
+    backgroundColor: '#fff',
+    borderRadius: 3,
+    shadowOffset: {
+      width: 0,
+      height: 5,
+    },
+    shadowRadius: 5,
+    shadowOpacity: 0.24,
+  },
+  circleGradient: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});