[RN] Add app-settings feature

[RN] Fix PR feedbacks, write persistency docs

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

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+    Modal,
+    Switch,
+    Text,
+    TextInput,
+    View } from 'react-native';
+import { connect } from 'react-redux';
+
+import {
+    _mapStateToProps,
+    AbstractAppSettings
+} from './AbstractAppSettings';
+import FormRow from './FormRow';
+import styles from './styles';
+
+import { translate } from '../../base/i18n';
+
+/**
+ * The native container rendering the app settings page.
+ *
+ * @extends AbstractAppSettings
+ */
+class AppSettings extends AbstractAppSettings {
+
+    /**
+     * Implements React's {@link Component#render()}, renders the settings page.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { t } = this.props;
+
+        return (
+            <Modal
+                animationType = 'slide'
+                onRequestClose = { this._onRequestClose }
+                presentationStyle = 'fullScreen'
+                style = { styles.modal }
+                visible = { this.props._visible }>
+                <View style = { styles.headerContainer } >
+                    <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>
+                    <FormRow
+                        fieldSeparator = { true }
+                        i18nLabel = 'profileModal.displayName' >
+                        <TextInput
+                            onChangeText = { this._onChangeDisplayName }
+                            onEndEditing = { this._onSaveDisplayName }
+                            placeholder = 'John Doe'
+                            value = { this.state.displayName } />
+                    </FormRow>
+                    <FormRow
+                        fieldSeparator = { true }
+                        i18nLabel = 'profileModal.email' >
+                        <TextInput
+                            onChangeText = { this._onChangeEmail }
+                            onEndEditing = { this._onSaveEmail }
+                            placeholder = 'email@example.com'
+                            value = { this.state.email } />
+                    </FormRow>
+                    <FormRow
+                        fieldSeparator = { true }
+                        i18nLabel = 'profileModal.startWithAudioMuted' >
+                        <Switch
+                            onValueChange = {
+                                this._onStartAudioMutedChange
+                            }
+                            value = { this.state.startWithAudioMuted } />
+                    </FormRow>
+                    <FormRow
+                        i18nLabel = 'profileModal.startWithVideoMuted' >
+                        <Switch
+                            onValueChange = {
+                                this._onStartVideoMutedChange
+                            }
+                            value = { this.state.startWithVideoMuted } />
+                    </FormRow>
+                </View>
+            </Modal>
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(AppSettings));