Merge pull request #6951 from parasharrajat/room-page

fix: room page layout
Expensify · Dec 30, 2021 · e787423 · e787423
2 parents 7486b36 + 8bfa640
commit e787423
Showing 1 changed file with 41 additions and 38 deletions.
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -19,6 +19,7 @@ import FixedFooter from '../../components/FixedFooter';
 import * as Report from '../../libs/actions/Report';
 import Permissions from '../../libs/Permissions';
 import Log from '../../libs/Log';
+import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 
 const propTypes = {
     /** All reports shared with the user */
@@ -137,47 +138,49 @@ class WorkspaceNewRoomPage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('newRoomPage.newRoom')}
-                    onCloseButtonPress={() => Navigation.dismissModal()}
-                />
-                <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
-                    <TextInputWithLabel
-                        label={this.props.translate('newRoomPage.roomName')}
-                        prefixCharacter="#"
-                        placeholder={this.props.translate('newRoomPage.social')}
-                        containerStyles={[styles.mb5]}
-                        onChangeText={roomName => this.setState({roomName: this.checkAndModifyRoomName(roomName)})}
-                        value={this.state.roomName.substr(1)}
-                        errorText={this.state.error}
-                        autoCapitalize="none"
+                <KeyboardAvoidingView>
+                    <HeaderWithCloseButton
+                        title={this.props.translate('newRoomPage.newRoom')}
+                        onCloseButtonPress={() => Navigation.dismissModal()}
                     />
-                    <View style={styles.mb5}>
+                    <ScrollView style={styles.flex1} contentContainerStyle={styles.p5}>
+                        <TextInputWithLabel
+                            label={this.props.translate('newRoomPage.roomName')}
+                            prefixCharacter="#"
+                            placeholder={this.props.translate('newRoomPage.social')}
+                            containerStyles={[styles.mb5]}
+                            onChangeText={roomName => this.setState({roomName: this.checkAndModifyRoomName(roomName)})}
+                            value={this.state.roomName.substr(1)}
+                            errorText={this.state.error}
+                            autoCapitalize="none"
+                        />
+                        <View style={styles.mb5}>
+                            <ExpensiPicker
+                                value={this.state.policyID}
+                                label={this.props.translate('workspace.common.workspace')}
+                                placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
+                                items={this.state.workspaceOptions}
+                                onChange={this.onWorkspaceSelect}
+                            />
+                        </View>
                         <ExpensiPicker
-                            value={this.state.policyID}
-                            label={this.props.translate('workspace.common.workspace')}
-                            placeholder={{value: '', label: this.props.translate('newRoomPage.selectAWorkspace')}}
-                            items={this.state.workspaceOptions}
-                            onChange={this.onWorkspaceSelect}
+                            value={this.state.visibility}
+                            label={this.props.translate('newRoomPage.visibility')}
+                            items={visibilityOptions}
+                            onChange={visibility => this.setState({visibility})}
                         />
-                    </View>
-                    <ExpensiPicker
-                        value={this.state.visibility}
-                        label={this.props.translate('newRoomPage.visibility')}
-                        items={visibilityOptions}
-                        onChange={visibility => this.setState({visibility})}
-                    />
-                </ScrollView>
-                <FixedFooter>
-                    <Button
-                        isLoading={this.props.isLoadingCreatePolicyRoom}
-                        isDisabled={shouldDisableSubmit}
-                        success
-                        onPress={this.onSubmit}
-                        style={[styles.w100]}
-                        text={this.props.translate('newRoomPage.createRoom')}
-                    />
-                </FixedFooter>
+                    </ScrollView>
+                    <FixedFooter>
+                        <Button
+                            isLoading={this.props.isLoadingCreatePolicyRoom}
+                            isDisabled={shouldDisableSubmit}
+                            success
+                            onPress={this.onSubmit}
+                            style={[styles.w100]}
+                            text={this.props.translate('newRoomPage.createRoom')}
+                        />
+                    </FixedFooter>
+                </KeyboardAvoidingView>
             </ScreenWrapper>
         );
     }