BigButton element created

src/Navigation.js

@@ -177,8 +177,8 @@ const PrimaryTabNavigator = createBottomTabNavigator(
 
         // You can return any component that you like here! We usually use an
         // icon component from react-native-vector-icons
-        return <Ionicons name={iconName} size={32} color={tintColor} />;
-      },
+        return <Ionicons name={iconName} size={28} color={tintColor} />;
+      }
     }),
     tabBarOptions: {
       style: {backgroundColor: '#333'},

src/components/BigButton.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import {RectButton} from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native'
+import ClipBorderRadius from './ClipBorderRadius';
+import { BORDER_RADIUS, FontSizes, Colors } from '../constants';
+import {SemiBoldText} from './StyledText';
+
+const BigButton = ({
+  buttonStyle = {},
+  textStyle = {},
+  onPress,
+  children = 'Big Button',
+  icon = null,
+  ...rest
+}) => (
+  <ClipBorderRadius>
+    <RectButton
+      style={[styles.bigButton, buttonStyle]}
+      onPress={onPress}
+      underlayColor="#fff"
+      {...rest}>
+      {icon ? icon : null}
+      <SemiBoldText style={[styles.bigButtonText, textStyle]}>
+        {children}
+      </SemiBoldText>
+    </RectButton>
+  </ClipBorderRadius>
+);
+
+const styles = StyleSheet.create({
+  bigButton: {
+    backgroundColor: Colors.blue,
+    paddingHorizontal: 15,
+    height: 50,
+    marginHorizontal: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BORDER_RADIUS,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    marginTop: 10,
+  },
+  bigButtonText: {
+    fontSize: FontSizes.normalButton,
+    color: '#fff',
+    textAlign: 'center',
+  }
+})
+
+export default BigButton

src/components/ClipBorderRadius.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { View } from 'react-native'
+import { BORDER_RADIUS } from '../constants';
+
+const ClipBorderRadius = ({children, style}) => {
+  return (
+    <View style={[{borderRadius: BORDER_RADIUS, overflow: 'hidden'}, style]}>
+      {children}
+    </View>
+  );
+};
+
+export default ClipBorderRadius;

src/components/MyContacts.js

@@ -2,10 +2,12 @@ import React from 'react';
 import {Alert, Clipboard, View, AsyncStorage, StyleSheet} from 'react-native';
 import {BorderlessButton, RectButton} from 'react-native-gesture-handler';
 import {sendEmail, openTwitter, getContactTwitter} from '../utils';
+import {Title} from 'react-native-paper';
 
 import {SemiBoldText} from './StyledText';
 import ContactCard from './ContactCard';
 import {FontSizes, Colors} from '../constants';
+import BigButton from './BigButton';
 
 export default class MyContacts extends React.Component {
   state = {
@@ -33,20 +35,9 @@ export default class MyContacts extends React.Component {
     const contacts = this.props.contacts;
     return (
       <View style={[{marginHorizontal: 10}, this.props.style]}>
-        <SemiBoldText style={{fontSize: FontSizes.title}}>
-          My Contacts
-        </SemiBoldText>
+          <Title>My Contacts</Title>
         {contacts && contacts.length > 0 ? (
-          <ClipBorderRadius>
-            <RectButton
-              style={styles.bigButton}
-              onPress={this._handlePressCopyEmails}
-              underlayColor="#fff">
-              <SemiBoldText style={styles.bigButtonText}>
-                {'Copy all emails to clipboard'}
-              </SemiBoldText>
-            </RectButton>
-          </ClipBorderRadius>
+          <BigButton onPress={this._handlePressCopyEmails}>Copy all emails to clipboard</BigButton>
         ) : null}
         {this.props.contacts.map(contact => (
           <ContactCard
@@ -81,32 +72,3 @@ export default class MyContacts extends React.Component {
     );
   };
 }
-
-const ClipBorderRadius = ({children, style}) => {
-  return (
-    <View style={[{borderRadius: BORDER_RADIUS, overflow: 'hidden'}, style]}>
-      {children}
-    </View>
-  );
-};
-
-const BORDER_RADIUS = 3;
-
-const styles = StyleSheet.create({
-  bigButton: {
-    backgroundColor: Colors.blue,
-    paddingHorizontal: 15,
-    height: 50,
-    marginHorizontal: 15,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: BORDER_RADIUS,
-    overflow: 'hidden',
-    flexDirection: 'row',
-  },
-  bigButtonText: {
-    fontSize: FontSizes.normalButton,
-    color: '#fff',
-    textAlign: 'center',
-  },
-});

src/components/NavigationBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {Animated, Platform, View, StyleSheet} from 'react-native';
 import {Constants} from 'expo';
-import {Colors, Layout} from '../constants';
+import {Colors, Layout, FontSizes} from '../constants';
 
 export default class NavigationBar extends React.Component {
   render() {
@@ -101,4 +101,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     position: 'absolute',
   },
+  navigationBarTitle: {
+    color: Colors.faint,
+    fontSize: FontSizes.title
+  }
 });

src/components/TalkCard.js

@@ -27,6 +27,16 @@ export default class TalkCard extends React.Component {
         onPress={this._handlePress}
         style={[styles.button, this.props.style]}
         activeOpacity={0.05}>
+
+        <View style={styles.talkInfoRow}>
+          <SemiBoldText style={styles.talkTitle}>
+            <SaveIconWhenSaved talk={talk} />
+            {talk.title}
+          </SemiBoldText>
+          {conferenceHasEnded() || !talk.room ? null : (
+            <RegularText style={styles.talkLocation}>{talk.room}</RegularText>
+          )}
+        </View>
         {speakers.map(speaker => (
           <View style={styles.headerRow} key={speaker.id}>
             <View style={styles.headerRowAvatarContainer}>
@@ -49,15 +59,6 @@ export default class TalkCard extends React.Component {
             </View>
           </View>
         ))}
-        <View style={styles.talkInfoRow}>
-          <RegularText style={styles.talkTitle}>
-            <SaveIconWhenSaved talk={talk} />
-            {talk.title}
-          </RegularText>
-          {conferenceHasEnded() || !talk.room ? null : (
-            <RegularText style={styles.talkLocation}>{talk.room}</RegularText>
-          )}
-        </View>
       </RectButton>
     );
   }
@@ -78,6 +79,7 @@ export default class TalkCard extends React.Component {
 const styles = StyleSheet.create({
   headerRow: {
     flexDirection: 'row',
+    marginBottom: 8
   },
   headerRowAvatarContainer: {
     paddingRight: 10,
@@ -96,7 +98,7 @@ const styles = StyleSheet.create({
     fontSize: FontSizes.bodyLarge,
   },
   talkInfoRow: {
-    paddingTop: 10,
+    paddingBottom: 8,
   },
   talkTitle: {
     fontSize: FontSizes.bodyLarge,
@@ -118,14 +120,14 @@ const styles = StyleSheet.create({
         borderRadius: 5,
         backgroundColor: '#fff',
         shadowColor: '#000',
-        shadowOpacity: 0.1,
+        shadowOpacity: 1,
         shadowRadius: 4,
-        shadowOffset: {width: 2, height: 2},
+        shadowOffset: {width: 8, height: 8},
       },
       android: {
         backgroundColor: '#fff',
         elevation: 2,
       },
-    }),
+    })
   },
 });

src/components/TalksUpNext.js

@@ -63,7 +63,7 @@ export default class TalksUpNext extends React.Component {
     const {nextTalks} = this.state;
 
     return (
-      <View style={[{marginHorizontal: 10}, this.props.style]}>
+      <View style={[{marginHorizontal: 10 }, this.props.style]}>
         <View style={{flexDirection: 'row'}}>
           <SemiBoldText style={{fontSize: FontSizes.title}}>
             {conferenceHasEnded() ? 'A great talk from 2019' : 'Coming up next'}

src/constants/index.js

@@ -39,6 +39,8 @@ export const FontSizes = {
   normalButton: isSmallDevice ? 15 : 16,
 };
 
+export const BORDER_RADIUS = 3;
+
 export const GQL = {
   uri: 'https://www.react-europe.org/gql',
   slug: 'reacteurope-2019',

src/screens/CheckedInAttendeeInfo.js

@@ -204,22 +204,6 @@ const styles = StyleSheet.create({
     fontSize: 7,
     lineHeight: 7 * 1.5,
   },
-  bigButton: {
-    backgroundColor: Colors.blue,
-    paddingHorizontal: 15,
-    height: 50,
-    marginHorizontal: 15,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: BORDER_RADIUS,
-    overflow: 'hidden',
-    flexDirection: 'row',
-  },
-  bigButtonText: {
-    fontSize: FontSizes.normalButton,
-    color: '#fff',
-    textAlign: 'center',
-  },
   seeAllTalks: {
     fontSize: FontSizes.normalButton,
     color: Colors.blue,