Add link styles for sidebar footer

src/components/Anchor.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {Linking} from 'react-native';
+import Text from './Text';
+
+/**
+ * Text based component that is passed a URL to open onPress
+ */
+
+const propTypes = {
+    // The URL to open
+    href: PropTypes.string.isRequired,
+
+    // Any children to display
+    children: PropTypes.node,
+
+    // Any additional styles to apply
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.any,
+};
+
+const defaultProps = {
+    children: null,
+    style: {},
+};
+
+const Anchor = ({
+    href,
+    children,
+    style,
+    ...props
+}) => {
+    // If the style prop is an array of styles, we need to mix them all together
+    const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
+        ...finalStyles,
+        ...s
+    }), {});
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <Text style={[mergedStyles]} onPress={() => Linking.openURL(href)} {...props}>{children}</Text>
+    );
+};
+
+Anchor.propTypes = propTypes;
+Anchor.defaultProps = defaultProps;
+Anchor.displayName = 'Anchor';
+
+export default Anchor;

src/page/HomePage/Report/ReportHistoryItemFragment.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import WebView from '../../../components/webView';
+import WebView from '../../../components/WebView';
 import Str from '../../../lib/Str';
 import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
 import styles from '../../../style/StyleSheet';

src/page/HomePage/SidebarView.js

@@ -15,6 +15,7 @@ import {fetchAll} from '../../lib/actions/ActionsReport';
 import SidebarLink from './SidebarLink';
 import logo from '../../../assets/images/expensify-logo_reversed.png';
 import PageTitleUpdater from '../../lib/PageTitleUpdater';
+import Anchor from '../../components/Anchor';
 
 const propTypes = {
     // Toggles the hamburger menu open and closed
@@ -76,7 +77,21 @@ class SidebarView extends React.Component {
                                 {this.state.userDisplayName}
                             </Text>
                         )}
-                        <Text style={[styles.sidebarFooterLink]} onPress={signOut}>Sign Out</Text>
+                        <View style={[styles.flexRow]}>
+                            <Anchor
+                                style={[styles.sidebarFooterLink, styles.mr2]}
+                                href="https://testflight.apple.com/join/vBYbMRQG"
+                            >
+                                iOS
+                            </Anchor>
+                            <Anchor
+                                style={[styles.sidebarFooterLink, styles.mr2]}
+                                href="https://chat.expensify.com/app-release.apk"
+                            >
+                                Android
+                            </Anchor>
+                            <Text style={[styles.sidebarFooterLink]} onPress={signOut}>Sign Out</Text>
+                        </View>
                     </View>
                 </View>
             </View>

src/style/StyleSheet.js

@@ -16,8 +16,12 @@ const colors = {
 const styles = {
     // Utility classes
     mr1: {
-        marginRight: 10,
+        marginRight: 4,
     },
+    mr2: {
+        marginRight: 8,
+    },
+
     ml1: {
         marginLeft: 10,
     },
@@ -40,6 +44,13 @@ const styles = {
     p1: {
         padding: 10,
     },
+    pr1: {
+        paddingRight: 4,
+    },
+    pr2: {
+        paddingRight: 8,
+    },
+
     h100p: {
         height: '100%',
     },