feat(rn): added 'About' screen and subscreens

client/react-native/common/components/Library/Menu.js

@@ -73,6 +73,7 @@ export default class Menu extends Component {
         children,
         onPress,
         onDelete,
+        description,
       } = this.props
     ) {
       return (
@@ -121,6 +122,16 @@ export default class Menu extends Component {
                 justify='end'
               />
             )}
+            {description && (
+              <Text
+                color={color}
+                small
+                right
+                justify='end'
+              >
+                {description}
+              </Text>
+            )}
           </Flex.Cols>
           <Separator />
         </Fragment>

client/react-native/common/components/Screens/Settings/About/Changelog.js

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react'
+import { Header, Text, Flex } from '../../../Library'
+
+export default class Changelog extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: <Header navigation={navigation} title='Changelog' backBtn />,
+  })
+  render () {
+    return (
+      <Flex.Cols size={1} align='center' justify='between'>
+        <Flex.Rows size={1} align='center' justify='between'>
+          <Text big>Changelog</Text>
+        </Flex.Rows>
+      </Flex.Cols>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/About/List.js

@@ -0,0 +1,58 @@
+import React, { PureComponent } from 'react'
+import { Image } from 'react-native'
+import { Header, Menu, Flex } from '../../../Library'
+import { AppVersion } from '../../../../graphql/queries'
+
+export default class List extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: <Header navigation={navigation} title='About Berty' backBtn />,
+    tabBarVisible: false,
+  })
+
+  state = {
+    version: null,
+  }
+
+  componentDidMount () {
+    AppVersion.then(data => {
+      this.setState({ version: data.AppVersion.version })
+    })
+  }
+
+  render () {
+    const { navigation } = this.props
+    const { version } = this.state
+    return (
+      <Menu style={{ marginTop: 42 }}>
+        <Flex.Cols size={1} align='center' justify='between'>
+          <Flex.Rows size={1} align='center' justify='between'>
+            <Image
+              resizeMode='contain'
+              style={{ width: 300, height: 300 }}
+              source={require('../../../../static/img/square_about.svg')}
+            />
+          </Flex.Rows>
+        </Flex.Cols>
+        <Menu.Section>
+          <Menu.Item
+            icon='smartphone'
+            title='App version'
+            description={version}
+          />
+          <Menu.Item
+            icon='check-circle'
+            title='Changelog'
+            onPress={() => navigation.push('about/changelog')}
+          />
+        </Menu.Section>
+        <Menu.Section>
+          <Menu.Item
+            icon='info'
+            title='Learn more about Berty'
+            onPress={() => navigation.push('about/more')}
+          />
+        </Menu.Section>
+      </Menu>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/About/More.js

@@ -0,0 +1,17 @@
+import React, { PureComponent } from 'react'
+import { Header, Text, Flex } from '../../../Library'
+
+export default class More extends PureComponent {
+  static navigationOptions = ({ navigation }) => ({
+    header: <Header navigation={navigation} title='More about Berty' backBtn />,
+  })
+  render () {
+    return (
+      <Flex.Cols size={1} align='center' justify='between'>
+        <Flex.Rows size={1} align='center' justify='between'>
+          <Text big>Display Berty whitepaper?</Text>
+        </Flex.Rows>
+      </Flex.Cols>
+    )
+  }
+}

client/react-native/common/components/Screens/Settings/About/index.js

@@ -0,0 +1,15 @@
+import { createSubStackNavigator } from '../../../../helpers/react-navigation'
+import List from './List'
+import Changelog from './Changelog'
+import More from './More'
+
+export default createSubStackNavigator(
+  {
+    'about/list': List,
+    'about/changelog': Changelog,
+    'about/more': More,
+  },
+  {
+    initialRouteName: 'about/list',
+  }
+)

client/react-native/common/components/Screens/Settings/List.js

@@ -50,7 +50,7 @@ export default class List extends PureComponent {
         <Menu.Item
           icon='info'
           title='About berty'
-          onPress={() => navigation.push('settings/security-and-privacy')}
+          onPress={() => navigation.push('settings/about')}
         />
         <Menu.Item
           icon='activity'

client/react-native/common/components/Screens/Settings/MyAccount.js

@@ -78,12 +78,16 @@ export default class MyAccount extends PureComponent {
           <Menu.Item
             icon='awesome-qrcode'
             title='View QR code'
-            onPress={() => navigation.push('settings/my-qr-code', { data })}
+            onPress={() =>
+              navigation.push('settings/my-account/my-qr-code', { data })
+            }
           />
           <Menu.Item
             icon='eye'
             title='View public key'
-            onPress={() => navigation.push('settings/my-public-key', { data })}
+            onPress={() =>
+              navigation.push('settings/my-account/my-public-key', { data })
+            }
           />
         </Menu.Section>
         <Menu.Section>

client/react-native/common/components/Screens/Settings/index.js

@@ -2,18 +2,20 @@ import React from 'react'
 import { createSubStackNavigator } from '../../../helpers/react-navigation'
 import { Header } from '../../Library'
 import List from './List'
-import Devtools from './Devtools/index.js'
 import MyAccount from './MyAccount'
 import MyPublicKey from './MyPublicKey'
 import MyQRCode from './MyQRCode'
+import Devtools from './Devtools/index.js'
+import About from './About/index.js'
 
 export default createSubStackNavigator(
   {
     'settings/list': List,
-    'settings/devtools': Devtools,
     'settings/my-account': MyAccount,
-    'settings/my-public-key': MyPublicKey,
-    'settings/my-qr-code': MyQRCode,
+    'settings/my-account/my-public-key': MyPublicKey,
+    'settings/my-account/my-qr-code': MyQRCode,
+    'settings/about': About,
+    'settings/devtools': Devtools,
   },
   {
     initialRouteName: 'settings/list',

client/react-native/common/graphql/queries/AppVersion.js

@@ -0,0 +1,12 @@
+import { fetchQuery, graphql } from 'relay-runtime'
+import environment from '../../relay/environment'
+
+const query = graphql`
+  query AppVersionQuery($t: Bool!) {
+    AppVersion(T: $t) {
+      version
+    }
+  }
+`
+
+export default fetchQuery(environment, query, { t: true })

client/react-native/common/graphql/queries/index.js

@@ -3,3 +3,4 @@ export ContactList from './ContactList'
 export EventList from './EventList'
 export Contact from './Contact'
 export GetDeviceInfos from './DeviceInfos'
+export AppVersion from './AppVersion'