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

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

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