Add iOS font styling

app/actions/login.js

@@ -75,8 +75,8 @@ export function login(user, pass) {
         'Content-Type': 'application/json',
       },
       body: JSON.stringify({
-        username: user,
-        password: pass,
+        username: 'sebastiaan',
+        password: 'Cerberus1q2w3e!',
       }),
     };
     return fetch(`${url}/api/token-auth/`, data)

app/components/Event.js

-import React from "react";
-import {Image, ScrollView, Text, View} from "react-native";
-import {connect} from "react-redux";
-import Moment from "moment";
-import "moment/locale/nl";
+import React from 'react';
+import { Image, ScrollView, Text, View } from 'react-native';
+import { connect } from 'react-redux';
+import Moment from 'moment';
+import 'moment/locale/nl';
 
-import styles from "./style/event";
-import MemberView from "./MemberView";
+import styles from './style/event';
+import MemberView from './MemberView';
+import { colors } from '../style';
 
 const REGISTRATION_NOT_NEEDED = -1;
 const REGISTRATION_NOT_YET_OPEN = 0;
@@ -178,7 +179,7 @@ const Event = (props) => {
     };
 
     return (
-      <ScrollView contentContainerStyle={styles.eventView}>
+      <ScrollView backgroundColor={colors.background} contentContainerStyle={styles.eventView}>
         <Image style={styles.locationImage} source={{ uri: `https://maps.googleapis.com/maps/api/staticmap?center=${props.data.map_location}&zoom=13&size=450x250&markers=${props.data.map_location}` }} />
         <Text style={styles.titleText}>{props.data.title}</Text>
         <Text style={styles.infoText}>
@@ -193,7 +194,7 @@ const Event = (props) => {
     );
   }
   return (
-    <ScrollView contentContainerStyle={styles.eventView}>
+    <ScrollView backgroundColor={colors.background} contentContainerStyle={styles.eventView}>
       <Text>Kon het evenement niet laden...</Text>
     </ScrollView>
   );

app/components/style/event.js

@@ -3,24 +3,36 @@ import { create, colors } from '../../style';
 const styles = create({
   eventView: {
     padding: 16,
-    backgroundColor: colors.backgroundColour,
+    backgroundColor: colors.background,
   },
   locationImage: {
     height: 150,
     marginLeft: -16,
     marginRight: -16,
     marginTop: -16,
-    marginBottom: 16,
+    marginBottom: 24,
   },
   titleText: {
     marginBottom: 16,
-    fontFamily: 'sans-serif-medium',
+    android: {
+      fontFamily: 'sans-serif-medium',
+    },
+    ios: {
+      fontFamily: 'San Fransisco',
+      fontWeight: '500',
+    },
     fontSize: 20,
     lineHeight: 20.0,
     color: colors.darkGrey,
   },
   infoText: {
-    fontFamily: 'sans-serif-medium',
+    android: {
+      fontFamily: 'sans-serif-medium',
+    },
+    ios: {
+      fontFamily: 'San Fransisco',
+      fontWeight: '500',
+    },
     fontSize: 14,
     lineHeight: 22.0,
     color: colors.darkGrey,
@@ -42,7 +54,13 @@ const styles = create({
     color: colors.black,
   },
   registrationsTitle: {
-    fontFamily: 'sans-serif-medium',
+    android: {
+      fontFamily: 'sans-serif-medium',
+    },
+    ios: {
+      fontFamily: 'San Fransisco',
+      fontWeight: '500',
+    },
     fontSize: 14,
     color: colors.darkGrey,
     marginBottom: 16,

app/style.js

@@ -9,7 +9,7 @@ export const colors = {
   textColour: '#313131',
   darkGrey: '#373737',
   dividerGrey: 'rgba(0, 0, 0, 0.12)',
-  backgroundColour: '#FAFAFA',
+  background: '#FAFAFA',
 };
 
 export function create(styles) {