vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Improved headers search bar design

Browse source
This commit is contained in:
keplyx 2019-11-15 16:44:10 +01:00
parent dd11fcc2c7
commit edfb32667c
3 changed files with 11 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/CustomHeader.js
View file

@ -47,8 +47,13 @@ export default class CustomHeader extends React.Component<Props> {
width: '100%', width: '100%',
marginBottom: 7 marginBottom: 7
}}> }}>
<Input placeholder={i18n.t('proximoScreen.search')} <CustomMaterialIcon
onChangeText={(text) => this.props.searchCallback(text)}/> icon={'magnify'}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={(text) => this.props.searchCallback(text)}/>
</Item> </Item>
); );
} }
@ -71,7 +76,7 @@ export default class CustomHeader extends React.Component<Props> {
return ( return (
<Header style={styles.header} <Header style={styles.header}
hasTabs={this.props.hasTabs}> hasTabs={this.props.hasTabs}>
<Left> <Left style={{flex: 0}}>
{button} {button}
</Left> </Left>
<Body> <Body>
@ -79,7 +84,7 @@ export default class CustomHeader extends React.Component<Props> {
this.getSearchBar() : this.getSearchBar() :
<Title>{this.props.title}</Title>} <Title>{this.props.title}</Title>}
</Body> </Body>
<Right> <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
{this.props.rightButton} {this.props.rightButton}
{this.props.hasBackButton ? <View/> : {this.props.hasBackButton ? <View/> :
<Touchable <Touchable

1
native-base-theme/variables/platform.js
View file

@ -154,6 +154,7 @@ export default {
toolbarHeight: platform === "ios" ? 64 : 56, toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23, toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40, searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50, searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff", toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",

1
native-base-theme/variables/platformDark.js
View file

@ -155,6 +155,7 @@ export default {
toolbarHeight: platform === "ios" ? 64 : 56, toolbarHeight: platform === "ios" ? 64 : 56,
toolbarSearchIconSize: platform === "ios" ? 20 : 23, toolbarSearchIconSize: platform === "ios" ? 20 : 23,
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
toolbarPlaceholderColor: platform === "ios" ? "#CECDD2" : "#CECDD2",
searchBarHeight: platform === "ios" ? 30 : 40, searchBarHeight: platform === "ios" ? 30 : 40,
searchBarInputHeight: platform === "ios" ? 30 : 50, searchBarInputHeight: platform === "ios" ? 30 : 50,
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff", toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",