Skip to content

Commit

Permalink
feat: add option to change input style in searchbar (#884)
Browse files Browse the repository at this point in the history
https://www.slashgear.com/gmail-app-android-ios-material-design-update-released-21566652/
```
<Searchbar
  placeholder={'Zoeken'}
  onChangeText={this.props.onSearch}
  style={{
    shadowOpacity: 0.07,
    elevation: 2,
  }}
  inputStyle={{
    fontSize: 16,
  }}
  value={value}
  icon={icon}
  onIconPress={this._onMenu}
/>
```


Before:
![9219e44b-52f7-4f5a-b017-62d0b578d9c5](https://user-images.githubusercontent.com/6492229/53686058-f62f7b00-3d22-11e9-9ee3-6c21005e75e1.jpeg)

After:
![e77f1c71-b3af-451a-af15-b9a43992c1be](https://user-images.githubusercontent.com/6492229/53686050-dbf59d00-3d22-11e9-9b82-3718cde31b51.jpeg)


Related pull request:
#861
  • Loading branch information
RichardLindhout authored and satya164 committed Mar 4, 2019
1 parent 1923882 commit d387aab
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/components/Searchbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,12 @@ type Props = React.ElementConfig<typeof TextInput> & {|
* Callback to execute if we want the left icon to act as button.
*/
onIconPress?: () => mixed,
/**
* Set style of the TextInput component inside the searchbar
*/
inputStyle?: any,
style?: any,

/**
* @optional
*/
Expand Down Expand Up @@ -118,6 +123,7 @@ class Searchbar extends React.Component<Props> {
value,
theme,
style,
inputStyle,
...rest
} = this.props;
const { colors, roundness, dark, fonts } = theme;
Expand Down Expand Up @@ -150,7 +156,7 @@ class Searchbar extends React.Component<Props> {
icon={icon || 'search'}
/>
<TextInput
style={[styles.input, { color: textColor, fontFamily }]}
style={[styles.input, { color: textColor, fontFamily }, inputStyle]}
placeholder={placeholder || ''}
placeholderTextColor={colors.placeholder}
selectionColor={colors.primary}
Expand Down
2 changes: 2 additions & 0 deletions src/components/__tests__/__snapshots__/Searchbar.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ exports[`renders with placeholder 1`] = `
"color": "#000000",
"fontFamily": "Helvetica Neue",
},
undefined,
]
}
underlineColorAndroid="transparent"
Expand Down Expand Up @@ -332,6 +333,7 @@ exports[`renders with text 1`] = `
"color": "#000000",
"fontFamily": "Helvetica Neue",
},
undefined,
]
}
underlineColorAndroid="transparent"
Expand Down

0 comments on commit d387aab

Please sign in to comment.