diff --git a/app/scenes/channel/channel.js b/app/scenes/channel/channel.js index f303b7890..d724dc848 100644 --- a/app/scenes/channel/channel.js +++ b/app/scenes/channel/channel.js @@ -4,8 +4,10 @@ import React from 'react'; import { KeyboardAvoidingView, + Platform, StatusBar, - Text + Text, + View } from 'react-native'; import {Constants} from 'service/constants'; @@ -100,6 +102,15 @@ export default class Channel extends React.PureComponent { this.props.actions.selectFirstAvailableTeam(); }; + renderAndroid = (children) => { + const {theme} = this.props; + return ( + + {children} + + ); + }; + render() { const { currentTeam, @@ -118,21 +129,42 @@ export default class Channel extends React.PureComponent { teamId = currentTeam.id; } + const status = ( + + ); + const postList = ( + + ); + const postTextBox = ( + + ); + + if (Platform.OS === 'android') { + return this.renderAndroid([status, postList, postTextBox]); + } + return ( - - - + {status} + {postList} + {postTextBox} ); } diff --git a/app/scenes/login/login.js b/app/scenes/login/login.js index e9986fb00..1b29a7286 100644 --- a/app/scenes/login/login.js +++ b/app/scenes/login/login.js @@ -5,7 +5,9 @@ import React, {Component, PropTypes} from 'react'; import {injectIntl, intlShape} from 'react-intl'; import { Image, + Keyboard, KeyboardAvoidingView, + Platform, Text, TextInput, TouchableWithoutFeedback, @@ -72,6 +74,7 @@ class Login extends Component { preSignIn = () => { this.setState({error: null}); + Keyboard.dismiss(); if (!this.props.loginId) { // it's slightly weird to be constructing the message ID, but it's a bit nicer than triply nested if statements let msgId = 'login.no'; @@ -156,75 +159,89 @@ class Login extends Component { return ''; } + loginRef = (ref) => { + this.loginId = ref; + }; + + passwordRef = (ref) => { + this.passwd = ref; + }; + + passwordFocus = () => { + this.passwd.focus(); + }; + render() { if (this.props.configRequest.status === RequestStatus.STARTED || this.props.licenseRequest.status === RequestStatus.STARTED) { return ; } + const scene = ( + + + + + {this.props.config.SiteName} + + + + + + + + + ); + + if (Platform.OS === 'android') { + return scene; + } + return ( - - - - - {this.props.config.SiteName} - - - - { - this.loginId = ref; - }} - value={this.props.loginId} - onChangeText={this.props.actions.handleLoginIdChanged} - style={GlobalStyles.inputBox} - placeholder={this.createLoginPlaceholder()} - autoCorrect={false} - autoCapitalize='none' - keyboardType='email-address' - returnKeyType='next' - underlineColorAndroid='transparent' - onSubmitEditing={() => { - this.passwd.focus(); - }} - /> - { - this.passwd = ref; - }} - value={this.props.password} - onChangeText={this.props.actions.handlePasswordChanged} - style={GlobalStyles.inputBox} - placeholder={this.props.intl.formatMessage({id: 'login.password', defaultMessage: 'Password'})} - secureTextEntry={true} - autoCorrect={false} - autoCapitalize='none' - underlineColorAndroid='transparent' - returnKeyType='go' - onSubmitEditing={this.preSignIn} - /> - - - + {scene} ); } diff --git a/app/scenes/mfa/mfa.js b/app/scenes/mfa/mfa.js index 63ec5d143..561e683ad 100644 --- a/app/scenes/mfa/mfa.js +++ b/app/scenes/mfa/mfa.js @@ -4,7 +4,9 @@ import React, {Component} from 'react'; import { Image, + Keyboard, KeyboardAvoidingView, + Platform, TouchableWithoutFeedback, View } from 'react-native'; @@ -54,11 +56,16 @@ export default class Mfa extends Component { }); }; + inputRef = (ref) => { + this.textInput = ref; + }; + blur = () => { this.textInput.refs.wrappedInstance.blur(); }; submit = () => { + Keyboard.dismiss(); if (!this.state.token) { this.setState({ error: { @@ -73,51 +80,57 @@ export default class Mfa extends Component { }; render() { + const scene = ( + + + + + + + + + + ); + + if (Platform.OS === 'android') { + return scene; + } + return ( - - - - - - { - this.textInput = ref; - }} - value={this.state.token} - onChangeText={this.handleInput} - onSubmitEditing={this.submit} - style={GlobalStyles.inputBox} - autoCapitalize='none' - autoCorrect={false} - keyboardType='numeric' - placeholder={{id: 'login_mfa.token', defaultMessage: 'MFA Token'}} - returnKeyType='go' - underlineColorAndroid='transparent' - /> - - - + {scene} ); } diff --git a/app/scenes/select_server/select_server.js b/app/scenes/select_server/select_server.js index 853248f68..651f81c58 100644 --- a/app/scenes/select_server/select_server.js +++ b/app/scenes/select_server/select_server.js @@ -4,7 +4,9 @@ import React, {Component} from 'react'; import { Image, + Keyboard, KeyboardAvoidingView, + Platform, TouchableWithoutFeedback, View } from 'react-native'; @@ -32,61 +34,72 @@ export default class SelectServer extends Component { this.props.actions.getPing().then(() => { if (this.props.server.status === RequestStatus.SUCCESS) { + Keyboard.dismiss(); this.props.actions.goToLogin(); } }); }; + inputRef = (ref) => { + this.textInput = ref; + }; + blur = () => { this.textInput.refs.wrappedInstance.blur(); }; render() { + const scene = ( + + + + + + + + + + ); + + if (Platform.OS === 'android') { + return scene; + } + return ( - - - - - { - this.textInput = ref; - }} - value={this.props.serverUrl} - onChangeText={this.props.actions.handleServerUrlChanged} - onSubmitEditing={this.onClick} - style={GlobalStyles.inputBox} - autoCapitalize='none' - autoCorrect={false} - keyboardType='url' - placeholder={{id: 'mobile.components.select_server_view.siteUrlPlaceholder', defaultMessage: 'https://mattermost.example.com'}} - returnKeyType='go' - underlineColorAndroid='transparent' - /> - - - - + {scene} ); } diff --git a/app/scenes/thread/thread.js b/app/scenes/thread/thread.js index 97ef6710a..59d828d42 100644 --- a/app/scenes/thread/thread.js +++ b/app/scenes/thread/thread.js @@ -4,8 +4,10 @@ import React from 'react'; import { KeyboardAvoidingView, + Platform, StatusBar, - StyleSheet + StyleSheet, + View } from 'react-native'; import PostList from 'app/components/post_list'; @@ -36,25 +38,58 @@ export default class Thread extends React.Component { handleDraftChanged = (value) => { this.props.actions.handleCommentDraftChanged(this.props.rootId, value); - } + }; + + renderAndroid = (children) => { + const style = getStyle(this.props.theme); + + return ( + + {children} + + ); + }; render() { const style = getStyle(this.props.theme); + const status = ( + + ); + const postList = ( + + ); + + const postTextBox = ( + + ); + + if (Platform.OS === 'android') { + return this.renderAndroid([status, postList, postTextBox]); + } + return ( - - - + {status} + {postList} + {postTextBox} ); }