Browse Source

Improved headers search bar design

keplyx 2 years ago
parent
commit
edfb32667c

+ 9
- 4
components/CustomHeader.js View File

@@ -47,8 +47,13 @@ export default class CustomHeader extends React.Component<Props> {
47 47
                     width: '100%',
48 48
                     marginBottom: 7
49 49
                 }}>
50
-                <Input placeholder={i18n.t('proximoScreen.search')}
51
-                onChangeText={(text) => this.props.searchCallback(text)}/>
50
+                <CustomMaterialIcon
51
+                    icon={'magnify'}
52
+                    color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
53
+                <Input
54
+                    placeholder={i18n.t('proximoScreen.search')}
55
+                    placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
56
+                    onChangeText={(text) => this.props.searchCallback(text)}/>
52 57
             </Item>
53 58
         );
54 59
     }
@@ -71,7 +76,7 @@ export default class CustomHeader extends React.Component<Props> {
71 76
         return (
72 77
             <Header style={styles.header}
73 78
                     hasTabs={this.props.hasTabs}>
74
-                <Left>
79
+                <Left style={{flex: 0}}>
75 80
                     {button}
76 81
                 </Left>
77 82
                 <Body>
@@ -79,7 +84,7 @@ export default class CustomHeader extends React.Component<Props> {
79 84
                         this.getSearchBar() :
80 85
                         <Title>{this.props.title}</Title>}
81 86
                 </Body>
82
-                <Right>
87
+                <Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
83 88
                     {this.props.rightButton}
84 89
                     {this.props.hasBackButton ? <View/> :
85 90
                         <Touchable

+ 1
- 0
native-base-theme/variables/platform.js View File

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

+ 1
- 0
native-base-theme/variables/platformDark.js View File

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

Loading…
Cancel
Save