Fixed text being cut off in the sidebar

__tests__/ui/components/navigator/__snapshots__/Sidebar.spec.js.snap

@@ -192,7 +192,9 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
+                "color": "#313131",
+                "fontFamily": "System",
+                "fontSize": 14,
                 "fontWeight": "600",
               },
               Object {
@@ -281,7 +283,9 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
+                "color": "#313131",
+                "fontFamily": "System",
+                "fontSize": 14,
                 "fontWeight": "600",
               },
               Object {
@@ -370,7 +374,9 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
+                "color": "#313131",
+                "fontFamily": "System",
+                "fontSize": 14,
                 "fontWeight": "600",
               },
               Object {
@@ -459,7 +465,9 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
+                "color": "#313131",
+                "fontFamily": "System",
+                "fontSize": 14,
                 "fontWeight": "600",
               },
               Object {
@@ -551,7 +559,9 @@ exports[`Sidebar component renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "transparent",
+                "color": "#313131",
+                "fontFamily": "System",
+                "fontSize": 14,
                 "fontWeight": "600",
               },
               Object {

app/ui/components/sidebar/Sidebar.js

@@ -96,10 +96,16 @@ const Sidebar = (props) => {
               ? Colors.magenta : Colors.textColour}
             size={24}
             iconStyle={styles.buttonIcon}
-            style={[styles.buttonText, button.style]}
+            style={[styles.button, button.style]}
             key={button.routeName}
           >
-            {button.text}
+            <Text style={[styles.buttonText, {
+              color: props.activeItemKey === button.routeName
+                ? Colors.magenta : Colors.textColour,
+            }]}
+            >
+              {button.text}
+            </Text>
           </Icon.Button>
         ))}
       </View>

app/ui/components/sidebar/style/Sidebar.js

@@ -51,9 +51,21 @@ const styles = StyleSheet.create({
     width: 28,
     textAlign: 'center',
   },
-  buttonText: {
+  button: {
     padding: 16,
   },
+  buttonText: {
+    fontSize: 14,
+    color: Colors.textColour,
+    android: {
+      fontFamily: 'sans-serif-medium',
+      fontWeight: '400',
+    },
+    ios: {
+      fontFamily: 'System',
+      fontWeight: '600',
+    },
+  },
 });
 
 export default styles;