adjust layout for Android

tomoima525 · Dec 17, 2017 · e6aa158 · e6aa158
1 parent 15a3e70
commit e6aa158
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/js/App.js b/js/App.js
@@ -1,16 +1,10 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-//import Input from './containers/Input';
-//import ResultList from './containers/ResultList';
 import Scenes from './scenes';
 
 class App extends Component {
  render() {
  return (
- // <View>
- // <Input/>
- // <ResultList/>
- // </View>
  <View style={{ flex: 1 }}>
  <Scenes />
  </View>

diff --git a/js/components/InputComponent.js b/js/components/InputComponent.js
@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import {View, StyleSheet, TextInput, Button} from 'react-native';
+import {View, StyleSheet, TextInput, Button, Platform } from 'react-native';
 
 class InputComponent extends Component {
 
@@ -17,25 +17,31 @@ class InputComponent extends Component {
  flexDirection: 'row',
  justifyContent: 'space-between',
  backgroundColor: 'white',
+ height: 48,
  paddingLeft: 10,
- paddingRight:10,
+ paddingRight: (Platform.OS === 'android' ? 10 : 0),
  }}>
  <TextInput style={{
- height: 40,
- //paddingLeft: 10,
+ height: 42,
  marginLeft: 10,
+ marginRight: 10,
  flex: 3,
  }}
  underlineColorAndroid="blue"
  autoCapitalize={'none'}
  onChangeText={(text) => this.setState({text: text})}
  placeholder={this.state.text}/>
-
- <Button style={{ flex: 1}}
+ <View style={{
+ flex: 1,
+ paddingTop:4,
+ paddingBottom:4,
+ }}>
+ <Button
  onPress={() => this.props.onButtonPress(this.state.text)}
  title="Search"
  accessibilityLabel="alert"
  />
+ </View>
  </View>
  );
  }