Fix settings screen layout on iOS and add soft back button

css/_font.scss

     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
-
+.icon-arrow_back:before {
+  content: "\e5c4";
+}
+.icon-navigate_before:before {
+  content: "\e408";
+}
 .icon-event_note:before {
     content: "\e616";
 }

fonts/jitsi.svg

 <glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
 <glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-64 62-142 62-222 0-84-24-160-66-226l-50 50c26 52 42 110 42 172s-16 120-42 172zM608 512l98 98c12-30 20-64 20-98s-8-70-20-100z" />
 <glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" />
+<glyph unicode="&#xe408;" glyph-name="navigate_before" d="M658 708l-196-196 196-196-60-60-256 256 256 256z" />
 <glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-66 84-148 84-238 0-212-172-384-384-384s-384 172-384 384 172 384 384 384c90 0 174-34 240-86l60 62c22-18 42-38 60-60zM470 426v256h84v-256h-84zM640 982v-86h-256v86h256z" />
+<glyph unicode="&#xe5c4;" glyph-name="arrow_back" d="M854 554v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
 <glyph unicode="&#xe5d4;" glyph-name="thumb-menu" d="M512 342c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 598c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 682c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
 <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
 <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />

fonts/selection.json

 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "arrow_back"
+        ],
+        "defaultCode": 58820,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "arrow_back",
+        "id": 45,
+        "order": 924,
+        "prevSize": 24,
+        "code": 58820,
+        "name": "arrow_back"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 45
+    },
+    {
+      "icon": {
+        "paths": [
+          "M658 316l-196 196 196 196-60 60-256-256 256-256z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_before"
+        ],
+        "defaultCode": 58376,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_left, navigate_before",
+        "id": 152,
+        "order": 923,
+        "prevSize": 24,
+        "code": 58376,
+        "name": "navigate_before"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 152
+    },
     {
       "icon": {
         "paths": [
         "code": 59403,
         "name": "public"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 605
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
       "attrs": [],
       "properties": {
         "id": 10,
-        "order": 900,
+        "order": 922,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     }
   ],
   "height": 1024,

lang/main.json

         "tooltip": "Get access info about the meeting"
     },
     "profileModal": {
+        "conferenceSection": "Conference",
         "displayName": "Display name",
         "email": "Email",
         "header": "Settings",
+        "profileSection": "Profile",
         "serverURL": "Server URL",
         "startWithAudioMuted": "Start with audio muted",
         "startWithVideoMuted": "Start with video muted"

react/features/app-settings/actions.js

 /* @flow */
 
-import {
-    HIDE_APP_SETTINGS,
-    SHOW_APP_SETTINGS
-} from './actionTypes';
+import { HIDE_APP_SETTINGS, SHOW_APP_SETTINGS } from './actionTypes';
 
 /**
 * Redux-signals the request to open the app settings modal.

react/features/app-settings/components/AbstractAppSettings.js

 */
 type Props = {
 
+    /**
+    * The current aspect ratio of the screen.
+    */
+    _aspectRatio: Symbol,
+
+    /**
+    * The default URL for when there is no custom URL set in the profile.
+    */
+    _serverURL: string,
+
     /**
     * The current profile object.
     */
     dispatch: Dispatch<*>
 };
 
-/**
- * The type of the React {@code Component} state of {@link AbstractAppSettings}.
- */
-type State = {
-
-    /**
-    * The display name field value on the settings screen.
-    */
-    displayName: string,
-
-    /**
-    * The email field value on the settings screen.
-    */
-    email: string,
-
-    /**
-    * The server url field value on the settings screen.
-    */
-    serverURL: string,
-
-    /**
-    * The start audio muted switch value on the settings screen.
-    */
-    startWithAudioMuted: boolean,
-
-    /**
-    * The start video muted switch value on the settings screen.
-    */
-    startWithVideoMuted: boolean
-}
-
 /**
  * Base (abstract) class for container component rendering
  * the app settings page.
  *
  * @abstract
  */
-export class AbstractAppSettings extends Component<Props, State> {
-
+export class AbstractAppSettings extends Component<Props> {
     /**
      * Initializes a new {@code AbstractAppSettings} instance.
      *
 
         this._onChangeDisplayName = this._onChangeDisplayName.bind(this);
         this._onChangeEmail = this._onChangeEmail.bind(this);
-        this._onChangeServerName = this._onChangeServerName.bind(this);
+        this._onChangeServerURL = this._onChangeServerURL.bind(this);
         this._onRequestClose = this._onRequestClose.bind(this);
-        this._onSaveDisplayName = this._onSaveDisplayName.bind(this);
-        this._onSaveEmail = this._onSaveEmail.bind(this);
-        this._onSaveServerName = this._onSaveServerName.bind(this);
         this._onStartAudioMutedChange
             = this._onStartAudioMutedChange.bind(this);
         this._onStartVideoMutedChange
             = this._onStartVideoMutedChange.bind(this);
     }
 
-    /**
-     * Invokes React's {@link Component#componentWillReceiveProps()} to make
-     * sure we have the state Initialized on component mount.
-     *
-     * @inheritdoc
-     */
-    componentWillMount() {
-        this._updateStateFromProps(this.props);
-    }
-
-    /**
-     * Implements React's {@link Component#componentWillReceiveProps()}. Invoked
-     * before this mounted component receives new props.
-     *
-     * @inheritdoc
-     * @param {Props} nextProps - New props component will receive.
-     */
-    componentWillReceiveProps(nextProps: Props) {
-        this._updateStateFromProps(nextProps);
-    }
-
     _onChangeDisplayName: (string) => void;
 
     /**
     * @returns {void}
     */
     _onChangeDisplayName(text) {
-        this.setState({
+        this._updateProfile({
             displayName: text
         });
     }
     * @returns {void}
     */
     _onChangeEmail(text) {
-        this.setState({
+        this._updateProfile({
             email: text
         });
     }
 
-    _onChangeServerName: (string) => void;
+    _onChangeServerURL: (string) => void;
 
     /**
     * Handles the server name field value change.
     * @param {string} text - The server URL typed in the server field.
     * @returns {void}
     */
-    _onChangeServerName(text) {
-        this.setState({
+    _onChangeServerURL(text) {
+        this._updateProfile({
             serverURL: text
         });
     }
     _onRequestClose: () => void;
 
     /**
-    * Handles the hardware back button.
+    * Handles the back button.
     *
     * @returns {void}
     */
         this.props.dispatch(hideAppSettings());
     }
 
-    _onSaveDisplayName: () => void;
-
-    /**
-    * Handles the display name field onEndEditing.
-    *
-    * @protected
-    * @returns {void}
-    */
-    _onSaveDisplayName() {
-        this._updateProfile({
-            displayName: this.state.displayName
-        });
-    }
-
-    _onSaveEmail: () => void;
-
-    /**
-    * Handles the email field onEndEditing.
-    *
-    * @protected
-    * @returns {void}
-    */
-    _onSaveEmail() {
-        this._updateProfile({
-            email: this.state.email
-        });
-    }
-
-    _onSaveServerName: () => void;
-
-    /**
-    * Handles the server name field onEndEditing.
-    *
-    * @protected
-    * @returns {void}
-    */
-    _onSaveServerName() {
-        let serverURL;
-
-        if (this.state.serverURL.endsWith('/')) {
-            serverURL = this.state.serverURL.substr(
-                0, this.state.serverURL.length - 1
-            );
-        } else {
-            serverURL = this.state.serverURL;
-        }
-
-        this._updateProfile({
-            defaultURL: serverURL
-        });
-        this.setState({
-            serverURL
-        });
-    }
-
     _onStartAudioMutedChange: (boolean) => void;
 
     /**
     * @returns {void}
     */
     _onStartAudioMutedChange(newValue) {
-        this.setState({
-            startWithAudioMuted: newValue
-        });
-
         this._updateProfile({
             startWithAudioMuted: newValue
         });
     * @returns {void}
     */
     _onStartVideoMutedChange(newValue) {
-        this.setState({
-            startWithVideoMuted: newValue
-        });
-
         this._updateProfile({
             startWithVideoMuted: newValue
         });
             ...updateObject
         }));
     }
-
-    _updateStateFromProps: (Object) => void;
-
-    /**
-    * Updates the component state when (new) props are received.
-    *
-    * @private
-    * @param {Object} props - The component's props.
-    * @returns {void}
-    */
-    _updateStateFromProps(props) {
-        this.setState({
-            displayName: props._profile.displayName,
-            email: props._profile.email,
-            serverURL: props._profile.defaultURL,
-            startWithAudioMuted: props._profile.startWithAudioMuted,
-            startWithVideoMuted: props._profile.startWithVideoMuted
-        });
-    }
 }
 
 /**
  * @returns {Object}
  */
 export function _mapStateToProps(state: Object) {
+    const _serverURL = state['features/app'].app._getDefaultURL();
+    const _profile = getProfile(state);
+
     return {
-        _profile: getProfile(state),
+        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio,
+        _serverURL,
+        _profile,
         _visible: state['features/app-settings'].visible
     };
 }

react/features/app-settings/components/AppSettings.native.js

 import React from 'react';
 import {
     Modal,
+    ScrollView,
     Switch,
     Text,
     TextInput,
     _mapStateToProps,
     AbstractAppSettings
 } from './AbstractAppSettings';
+import BackButton from './BackButton';
 import FormRow from './FormRow';
-import styles from './styles';
+import FormSectionHeader from './FormSectionHeader';
+import styles, { HEADER_PADDING } from './styles';
 
+import { getSafetyOffset } from '../functions.native';
+
+import { ASPECT_RATIO_NARROW } from '../../base/aspect-ratio';
 import { translate } from '../../base/i18n';
+import { isIPad } from '../../base/react';
 
 /**
  * The native container rendering the app settings page.
  * @extends AbstractAppSettings
  */
 class AppSettings extends AbstractAppSettings {
+    /**
+    * Instantiates a new {@code AppSettings} instance.
+    *
+    * @inheritdoc
+    */
+    constructor(props) {
+        super(props);
+
+        this._getSafetyPadding = this._getSafetyPadding.bind(this);
+    }
 
     /**
      * Implements React's {@link Component#render()}, renders the settings page.
      * @returns {ReactElement}
      */
     render() {
-        const { t } = this.props;
+        const { _profile, t } = this.props;
+
+        // FIXME: presentationStyle is added to workaround
+        // orientation issue on iOS
 
         return (
             <Modal
                 animationType = 'slide'
                 onRequestClose = { this._onRequestClose }
-                presentationStyle = 'fullScreen'
-                style = { styles.modal }
+                presentationStyle = 'overFullScreen'
+                supportedOrientations = { [
+                    'landscape',
+                    'portrait'
+                ] }
                 visible = { this.props._visible }>
-                <View style = { styles.headerContainer } >
+                <View
+                    style = { [
+                        styles.headerContainer,
+                        this._getSafetyPadding()
+                    ] } >
+                    <BackButton
+                        onPress = { this._onRequestClose }
+                        style = { styles.settingsBackButton } />
                     <Text style = { [ styles.text, styles.headerTitle ] } >
                         { t('profileModal.header') }
                     </Text>
                 </View>
-                <View style = { styles.settingsContainer } >
-                    <FormRow
-                        fieldSeparator = { true }
-                        i18nLabel = 'profileModal.serverURL' >
-                        <TextInput
-                            autoCapitalize = 'none'
-                            onChangeText = { this._onChangeServerName }
-                            onEndEditing = { this._onSaveServerName }
-                            placeholder = 'https://jitsi.example.com'
-                            value = { this.state.serverURL } />
-                    </FormRow>
+                <ScrollView style = { styles.settingsContainer } >
+                    <FormSectionHeader
+                        i18nLabel = 'profileModal.profileSection' />
                     <FormRow
                         fieldSeparator = { true }
                         i18nLabel = 'profileModal.displayName' >
                         <TextInput
                             onChangeText = { this._onChangeDisplayName }
-                            onEndEditing = { this._onSaveDisplayName }
                             placeholder = 'John Doe'
-                            value = { this.state.displayName } />
+                            value = { _profile.displayName } />
                     </FormRow>
                     <FormRow
-                        fieldSeparator = { true }
                         i18nLabel = 'profileModal.email' >
                         <TextInput
                             keyboardType = { 'email-address' }
                             onChangeText = { this._onChangeEmail }
-                            onEndEditing = { this._onSaveEmail }
                             placeholder = 'email@example.com'
-                            value = { this.state.email } />
+                            value = { _profile.email } />
+                    </FormRow>
+                    <FormSectionHeader
+                        i18nLabel = 'profileModal.conferenceSection' />
+                    <FormRow
+                        fieldSeparator = { true }
+                        i18nLabel = 'profileModal.serverURL' >
+                        <TextInput
+                            autoCapitalize = 'none'
+                            onChangeText = { this._onChangeServerURL }
+                            placeholder = { this.props._serverURL }
+                            value = { _profile.serverURL } />
                     </FormRow>
                     <FormRow
                         fieldSeparator = { true }
                             onValueChange = {
                                 this._onStartAudioMutedChange
                             }
-                            value = { this.state.startWithAudioMuted } />
+                            value = {
+                                _profile.startWithAudioMuted
+                            } />
                     </FormRow>
                     <FormRow
                         i18nLabel = 'profileModal.startWithVideoMuted' >
                             onValueChange = {
                                 this._onStartVideoMutedChange
                             }
-                            value = { this.state.startWithVideoMuted } />
+                            value = {
+                                _profile.startWithVideoMuted
+                            } />
                     </FormRow>
-                </View>
+                </ScrollView>
             </Modal>
         );
     }
+
+    /**
+    * Calculates header safety padding for mobile devices.
+    * See comment in functions.js.
+    *
+    * @private
+    * @returns {Object}
+    */
+    _getSafetyPadding() {
+        if (isIPad() || this.props._aspectRatio === ASPECT_RATIO_NARROW) {
+            const safeOffset = Math.max(getSafetyOffset(), HEADER_PADDING);
+
+            return {
+                paddingTop: safeOffset
+            };
+        }
+
+        return undefined;
+    }
 }
 
 export default translate(connect(_mapStateToProps)(AppSettings));

react/features/app-settings/components/BackButton.native.js

+// @flow
+
+import React, { Component } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import styles from './styles';
+
+import { Icon } from '../../base/font-icons';
+import { Platform } from '../../base/react';
+
+/**
+* The icon glyph to be used on a specific platform.
+*/
+const BACK_ICON = Platform.OS === 'android' ? 'arrow_back' : 'navigate_before';
+
+/**
+* The type of the React {@code Component} props of {@link BackButton}
+*/
+type Props = {
+
+    /**
+    * The action to be performed when the button is pressed.
+    */
+    onPress: Function,
+
+    /**
+    * An external style object passed to the component.
+    */
+    style: Object
+};
+
+/**
+ * A component rendering a back button that looks native on both platforms.
+ */
+export default class BackButton extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}, renders the button.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <TouchableOpacity
+                accessibilityLabel = { 'Back' }
+                onPress = { this.props.onPress }>
+                <Icon
+                    name = { BACK_ICON }
+                    style = { [
+                        styles.backIcon,
+                        this.props.style
+                    ] } />
+            </TouchableOpacity>
+        );
+    }
+}

react/features/app-settings/components/FormRow.native.js

     View } from 'react-native';
 import { connect } from 'react-redux';
 
-import styles, { ANDROID_UNDERLINE_COLOR } from './styles';
+import styles, { ANDROID_UNDERLINE_COLOR, CONTAINER_PADDING } from './styles';
 
+import { getSafetyOffset } from '../functions';
+
+import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
 import { translate } from '../../base/i18n';
 
 /**
 */
 type Props = {
 
+    /**
+    * The current aspect ratio of the screen.
+    */
+    _aspectRatio: Symbol,
+
     /**
     */
     children: Object,
  * on a form. The component should have exactly one child component.
  */
 class FormRow extends Component<Props> {
-
     /**
      * Initializes a new {@code FormRow} instance.
      *
 
     /**
     * Assembles the row style array based on the row's props.
+    * For padding, see comment in functions.js.
     *
     * @private
     * @returns {Array<Object>}
             rowStyle.push(styles.fieldSeparator);
         }
 
+        if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
+            const safeOffset = Math.max(
+                getSafetyOffset() - CONTAINER_PADDING, 0
+            );
+
+            rowStyle.push({
+                marginLeft: safeOffset,
+                marginRight: safeOffset
+            });
+        }
+
         return rowStyle;
     }
 }
 
-export default translate(connect()(FormRow));
+/**
+ * Maps (parts of) the redux state to the React {@code Component} props of
+ * {@code FormRow}.
+ *
+ * @param {Object} state - The redux state.
+ * @protected
+ * @returns {Object}
+ */
+export function _mapStateToProps(state: Object) {
+    return {
+        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio
+    };
+}
+
+export default translate(connect(_mapStateToProps)(FormRow));

react/features/app-settings/components/FormSectionHeader.native.js

+/* @flow */
+
+import React, { Component } from 'react';
+import { Text, View } from 'react-native';
+import { connect } from 'react-redux';
+
+import styles, { CONTAINER_PADDING } from './styles';
+
+import { getSafetyOffset } from '../functions';
+
+import { ASPECT_RATIO_WIDE } from '../../base/aspect-ratio';
+import { translate } from '../../base/i18n';
+
+/**
+* The type of the React {@code Component} props of {@link FormSectionHeader}
+*/
+type Props = {
+
+    /**
+    * The current aspect ratio of the screen.
+    */
+    _aspectRatio: Symbol,
+
+    /**
+    * The i18n key of the text label of the section.
+    */
+    i18nLabel: string,
+
+    /**
+    * An external style object passed to the component.
+    */
+    style: Object,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+}
+
+/**
+ * Implements a React {@code Component} which renders
+ * a section header on a form. This calculates the available safe view as well.
+ */
+class FormSectionHeader extends Component<Props> {
+    /**
+     * Initializes a new {@code FormSectionHeader} instance.
+     *
+     * @param {Object} props - Component properties.
+     */
+    constructor(props) {
+        super(props);
+
+        this._getSafetyMargin = this._getSafetyMargin.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @override
+     * @returns {ReactElement}
+     */
+    render() {
+        const { t } = this.props;
+
+        return (
+            <View
+                style = { [
+                    styles.formSectionTitle,
+                    this.props.style,
+                    this._getSafetyMargin()
+                ] } >
+                <Text>
+                    { t(this.props.i18nLabel) }
+                </Text>
+            </View>
+        );
+    }
+
+    _getSafetyMargin: () => Object;
+
+    /**
+    * Calculates the safety margin for this header.
+    * See comment in functions.js.
+    *
+    * @private
+    * @returns {Object}
+    */
+    _getSafetyMargin() {
+        if (this.props._aspectRatio === ASPECT_RATIO_WIDE) {
+            const safeOffset = Math.max(
+                getSafetyOffset() - CONTAINER_PADDING, 0
+            );
+
+            return {
+                marginLeft: safeOffset,
+                marginRight: safeOffset
+            };
+        }
+
+        return undefined;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React {@code Component} props of
+ * {@code FormSectionHeader}.
+ *
+ * @param {Object} state - The redux state.
+ * @protected
+ * @returns {Object}
+ */
+export function _mapStateToProps(state: Object) {
+    return {
+        _aspectRatio: state['features/base/aspect-ratio'].aspectRatio
+    };
+}
+
+export default translate(connect(_mapStateToProps)(FormSectionHeader));

react/features/app-settings/components/styles.js

+import { Platform } from 'react-native';
 import {
     BoxModel,
     ColorPalette,
     createStyleSheet
 } from '../../base/styles';
 
-const LABEL_TAB = 300;
-
 export const ANDROID_UNDERLINE_COLOR = 'transparent';
+export const CONTAINER_PADDING = 2 * BoxModel.padding;
+export const HEADER_COLOR = ColorPalette.blue;
+export const HEADER_PADDING = BoxModel.padding;
+const TEXT_SIZE = 17;
 
 /**
- * The styles of the React {@code Components} of the feature welcome including
- * {@code WelcomePage} and {@code BlankPage}.
+ * The styles of the React {@code Components} of the feature
+ * {@code AppSettings}.
  */
 export default createStyleSheet({
 
+    /**
+    *The platform specific back button style.
+    */
+    backIcon: {
+        alignSelf: 'center',
+        ...Platform.select({
+            ios: {
+                alignSelf: 'center',
+                fontSize: 30
+            },
+            android: {
+                fontSize: 24,
+                padding: 8
+            }
+        })
+    },
+
     /**
     * Standardized style for a field container {@code View}.
     */
     fieldContainer: {
-        flexDirection: 'row',
         alignItems: 'center',
+        flexDirection: 'row',
         minHeight: 65
     },
 
     * Standard container for a {@code View} containing a field label.
     */
     fieldLabelContainer: {
-        flexDirection: 'row',
         alignItems: 'center',
-        width: LABEL_TAB
+        flexDirection: 'row'
     },
 
     /**
     * Field container style for all but last row {@code View}.
     */
     fieldSeparator: {
-        borderBottomWidth: 1
+        borderBottomWidth: 1,
+        borderColor: 'rgba(0, 0, 0, 0.1)'
     },
 
     /**
     * field values (the actual field).
     */
     fieldValueContainer: {
+        alignItems: 'center',
         flex: 1,
-        justifyContent: 'flex-end',
         flexDirection: 'row',
-        alignItems: 'center'
+        justifyContent: 'flex-end'
+    },
+
+    formSectionTitle: {
+        backgroundColor: 'rgba(0, 0, 0, 0.1)',
+        marginTop: 5,
+        padding: 5
     },
 
     /**
     * Page header {@code View}.
     */
     headerContainer: {
-        backgroundColor: ColorPalette.blue,
-        flexDirection: 'row',
         alignItems: 'center',
-        padding: 2 * BoxModel.margin
+        backgroundColor: HEADER_COLOR,
+        flexDirection: 'row',
+        justifyContent: 'flex-start',
+        padding: HEADER_PADDING
     },
 
     /**
     * The title {@code Text} of the header.
     */
     headerTitle: {
+        color: ColorPalette.white,
+        fontSize: 24
+    },
+
+    /**
+    * Style of the scrollview to be able to scroll the content.
+    */
+    scrollView: {
+        flex: 1
+    },
+
+    /**
+    * The back button style on the settings screen.
+    */
+    settingsBackButton: {
         color: ColorPalette.white,
         fontSize: 25
     },
         flex: 1,
         flexDirection: 'column',
         margin: 0,
-        padding: 2 * BoxModel.padding
+        padding: CONTAINER_PADDING,
+        paddingTop: 0
     },
 
     /**
     */
     text: {
         color: ColorPalette.black,
-        fontSize: 20
+        fontSize: TEXT_SIZE
     },
 
     /**
     * Standard text input field style.
     */
     textInputField: {
-        fontSize: 20,
         flex: 1,
+        fontSize: TEXT_SIZE,
         textAlign: 'right'
     }
 });

react/features/app-settings/functions.native.js

+// @flow
+
+import { isIPhoneX, Platform } from '../base/react';
+
+const IPHONE_OFFSET = 20;
+const IPHONEX_OFFSET = 44;
+
+/**
+* Determines the offset to be used for the device.
+* This uses a custom implementation to minimize empty area around screen,
+* especially on iPhone X.
+*
+* @returns {number}
+*/
+export function getSafetyOffset() {
+    if (Platform.OS === 'android') {
+        /* Android doesn't need offset, except the Essential phone. Should be
+        * addressed later with a generic solution.
+        */
+        return 0;
+    }
+
+    if (isIPhoneX()) {
+        return IPHONEX_OFFSET;
+    }
+
+    return IPHONE_OFFSET;
+}

react/features/app-settings/index.js

 export * from './actions';
 export * from './components';
-export * from './functions';
 
 import './reducer';

react/features/app-settings/middleware.js

+/* @flow */
+
+import { hideAppSettings } from './actions';
+
+import { SET_ROOM } from '../base/conference';
+import { MiddlewareRegistry } from '../base/redux';
+
+/**
+ * The Redux middleware to trigger settings screen show or hide
+ * when necessary.
+ *
+ * @param {Store} store - The Redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case SET_ROOM:
+        return _closeAppSettings(store, next, action);
+    }
+
+    return next(action);
+});
+
+/**
+ * Hides the settings screen.
+ *
+ * @param {Store} store - The redux store.
+ * @param {Dispatch} next - The redux dispatch function.
+ * @param {Action} action - The redux action.
+ * @private
+ * @returns {Object} The new state.
+ */
+function _closeAppSettings(store, next, action) {
+    store.dispatch(hideAppSettings());
+
+    return next(action);
+}

react/features/app/components/AbstractApp.js

      * @returns {void}
      */
     componentWillReceiveProps(nextProps) {
+        const currentProps = this.props;
+
         this.init.then(() => {
             // The consumer of this AbstractApp did not provide a redux store.
             if (typeof nextProps.store === 'undefined'
                     // its own internal redux store. If the consumer did not
                     // provide a redux store before, then this instance is
                     // using its own internal redux store already.
-                    && typeof this.props.store !== 'undefined') {
+                    && typeof currentProps.store !== 'undefined') {
                 this.setState({
                     store: this._maybeCreateStore(nextProps)
                 });
             let { url } = nextProps;
 
             url = toURLString(url);
-            if (toURLString(this.props.url) !== url
+            if (toURLString(currentProps.url) !== url
 
                     // XXX Refer to the implementation of loadURLObject: in
                     // ios/sdk/src/JitsiMeetView.m for further information.
-                    || this.props.timestamp !== nextProps.timestamp) {
+                    || currentProps.timestamp !== nextProps.timestamp) {
                 this._openURL(url || this._getDefaultURL());
             }
         });
             }
         }
 
-        const profileDefaultURL = getProfile(
+        const profileServerURL = getProfile(
             this._getStore().getState()
-        ).defaultURL;
+        ).serverURL;
 
-        return this.props.defaultURL || profileDefaultURL || DEFAULT_URL;
+        return this.props.defaultURL || profileServerURL || DEFAULT_URL;
     }
 
     /**

react/features/base/font-icons/jitsi.json

 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M854 470v84h-520l238 240-60 60-342-342 342-342 60 60-238 240h520z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "arrow_back"
+        ],
+        "defaultCode": 58820,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "arrow_back",
+        "id": 45,
+        "order": 924,
+        "prevSize": 24,
+        "code": 58820,
+        "name": "arrow_back"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 45
+    },
+    {
+      "icon": {
+        "paths": [
+          "M658 316l-196 196 196 196-60 60-256-256 256-256z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_before"
+        ],
+        "defaultCode": 58376,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_left, navigate_before",
+        "id": 152,
+        "order": 923,
+        "prevSize": 24,
+        "code": 58376,
+        "name": "navigate_before"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 152
+    },
     {
       "icon": {
         "paths": [
         "code": 59403,
         "name": "public"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 605
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 1
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 2
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 3
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 4
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 5
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 6
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 7
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 8
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 9
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 10
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 11
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 12
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 13
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 14
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 15
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 16
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 17
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 18
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 19
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 20
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 21
     },
     {
       "icon": {
       "attrs": [],
       "properties": {
         "id": 10,
-        "order": 900,
+        "order": 922,
         "ligatures": "expand_less",
         "prevSize": 32,
         "code": 59679,
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 22
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 23
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 24
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 25
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 26
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 27
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 28
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 29
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 30
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 31
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 32
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 33
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 34
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 35
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 36
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 37
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 38
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 39
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 40
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 41
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 42
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 43
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 44
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 45
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 46
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 47
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 48
     },
     {
       "icon": {
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 49
     }
   ],
   "height": 1024,

react/features/base/profile/middleware.js

 import { PROFILE_UPDATED } from './actionTypes';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 
-import { participantUpdated } from '../participants';
+import {
+    getLocalParticipant,
+    participantUpdated
+} from '../participants';
 import { getProfile } from '../profile';
 import { toState } from '../redux';
 
  * @returns {void}
  */
 function _updateLocalParticipant(store) {
+    const localParticipant = getLocalParticipant(toState(store));
     const profile = getProfile(toState(store));
 
-    const newLocalParticipant = {
-        email: profile.email,
-        local: true,
-        name: profile.displayName
-    };
+    localParticipant.email = profile.email;
+    localParticipant.name = profile.displayName;
 
-    store.dispatch(participantUpdated(newLocalParticipant));
+    store.dispatch(participantUpdated(localParticipant));
 }

react/features/base/react/functions.native.js

+// @flow
+
+import { Dimensions } from 'react-native';
+import Platform from './Platform';
+
+const IPHONEX_HEIGHT = 812;
+const IPHONEX_WIDTH = 375;
+
+/**
+* Determines if the device is an iPad or not.
+*
+* @returns {boolean}
+*/
+export function isIPad() {
+    const { height, width } = Dimensions.get('window');
+
+    return Platform.OS === 'ios' && (
+        Math.max(height, width)
+            / Math.min(height, width)) < 1.6;
+}
+
+/**
+* Determines if it's an iPhone X or not.
+*
+* @returns {boolean}
+*/
+export function isIPhoneX() {
+    const { height, width } = Dimensions.get('window');
+
+    return (
+        Platform.OS === 'ios'
+            && ((height === IPHONEX_HEIGHT
+                && width === IPHONEX_WIDTH)
+            || (height === IPHONEX_WIDTH
+                && width === IPHONEX_HEIGHT))
+    );
+}