john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix layout issues on Android

Browse Source
This commit is contained in:
John Lyon-Smith
2018-04-08 10:17:15 -07:00
parent dd2adf807f
commit 5634acb967
9 changed files with 119 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
mobile/src/ui/BoundInput.js
View File

@@ -1,6 +1,6 @@
import React from "react"
import PropTypes from "prop-types"
import { TextInput, Text, View } from "react-native"
import { TextInput, Text, View, Platform } from "react-native"
import autobind from "autobind-decorator"
export class BoundInput extends React.Component {
@@ -42,7 +42,7 @@ export class BoundInput extends React.Component {
render() {
const { label, password, name, placeholder, message, lines } = this.props
const { visible, disabled, value, valid } = this.state
const { visible, disabled, readOnly, value, valid } = this.state
if (!visible) {
return null
@@ -62,11 +62,12 @@ export class BoundInput extends React.Component {
borderWidth: 1,
fontSize: 16,
paddingTop: 7,
paddingBottom: 7,
paddingBottom: Platform.OS === "ios" ? 7 : 0,
textAlignVertical: "top",
}}
multiline={lines > 1}
numberOfLines={lines}
editable={!disabled}
editable={!disabled && !readOnly}
autoCapitalize="none"
underlineColorAndroid="white"
value={value}

65
mobile/src/ui/Header.js
View File

@@ -1,10 +1,13 @@
import React, { Component } from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { Icon } from './Icon'
import PropTypes from 'prop-types'
import { ifIphoneX } from 'react-native-iphone-x-helper'
import React, { Component } from "react"
import { View, Platform, TouchableOpacity, Text } from "react-native"
import { Icon } from "./Icon"
import PropTypes from "prop-types"
import { ifIphoneX } from "react-native-iphone-x-helper"
const headerButtonShape = { icon: PropTypes.string.isRequired, onPress: PropTypes.func }
const headerButtonShape = {
icon: PropTypes.string.isRequired,
onPress: PropTypes.func,
}
export class Header extends Component {
static propTypes = {
@@ -15,8 +18,8 @@ export class Header extends Component {
}
static defaultProps = {
rightButton: { icon: 'none' },
leftButton: { icon: 'none' },
rightButton: { icon: "none" },
leftButton: { icon: "none" },
visible: true,
}
@@ -25,35 +28,49 @@ export class Header extends Component {
let right = null
if (!rightButton) {
right = (
<Icon name='' size={24} style={{ marginRight: 15 }} />
)
right = <Icon name="" size={24} style={{ marginRight: 15 }} />
} else if (disabled) {
right = (
<Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'lightgrey' }} />
<Icon
name={rightButton.icon}
size={24}
style={{ marginRight: 15, tintColor: "lightgrey" }}
/>
)
} else {
right = (
<TouchableOpacity onPress={rightButton.onPress}>
<Icon name={rightButton.icon} size={24} style={{ marginRight: 15, tintColor: 'grey' }} />
<Icon
name={rightButton.icon}
size={24}
style={{ marginRight: 15, tintColor: "grey" }}
/>
</TouchableOpacity>
)
}
return (
<View style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
height: 45,
backgroundColor: '#F4F4F4',
...ifIphoneX({ marginTop: 50 }, { marginTop: 20 })
}}>
<View
style={[
{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
height: 45,
backgroundColor: "#F4F4F4",
},
Platform.OS === "ios" &&
ifIphoneX({ marginTop: 50 }, { marginTop: 20 }),
]}>
<TouchableOpacity onPress={leftButton.onPress}>
<Icon name={leftButton.icon} size={24} style={{ marginLeft: 15, tintColor: 'gray' }} />
<Icon
name={leftButton.icon}
size={24}
style={{ marginLeft: 15, tintColor: "gray" }}
/>
</TouchableOpacity>
<Text style={{ color: 'gray', fontSize: 18, }}>{title}</Text>
<Text style={{ color: "gray", fontSize: 18 }}>{title}</Text>
{right}
</View>
)