Platform specific SearchBar

[xavier-villelegier]

Information

This adds a new platform props, to choose between:
• Default react-native-elements SearchBar
• iOS SearchBar
• Android SearchBar

BREAKING CHANGES

loadingProps

loadingIcon was an object to customize the style of the ActivityIndicator shown when showLoading was true. It was replaced by loadingProps.

Before

<SearchBar
  loadingIcon={{
    style: { padding: 10 },
  }}
/>

After

<SearchBar
  loadingProps={{
    color: 'red', // This was not possible before
    style: { padding: 10 },
  }}
/>

showLoading

showLoadingIcon was renamed to showLoading

Before

<SearchBar showLoadingIcon />

After

<SearchBar showLoading />

SearchBar API Updates

Props	type	default	description
platform	string	"default"	One of "default", "ios", "android"
cancelButtonTitle	string	"Cancel"	iOS only Title of the cancel button on the right side
showLoading	boolean	false	Shows an ActivityIndicator when true
loadingProps	object	{}	Props passed to ActivityIndicator
onCancel	function	null	Callback fired when pressing the cancel button (iOS) or the back icon (Android)

Update applied to v1 Input

Props	type	default	description
leftIcon	React Native element	null	Component displayed on the left side of the TextInput
leftIconContainerStyle	style	null	Style applied to the container of the leftIcon
rightIcon	React Native element	null	Component displayed on the right side of the TextInput
rightIconContainerStyle	style	null	Style applied to the container of the rightIcon

Preview

Almost pixel perfect iOS 11 design (red lines are here for pixel comparison)

Example 1

<SearchBar
  showLoading
  placeholder='Search'
/>

iOS	Android

TODO

• Move the tests to the new searchbar/ directory
• Remove the old search/ directory
• Add more tests
• Add more and more and more tests ✅
• Add a fallback if platform is not one of "default", "ios", "android"

[codecov]

Codecov Report

Merging #837 into next will increase coverage by 1.34%.
The diff coverage is 56.45%.

@@            Coverage Diff             @@
##             next     #837      +/-   ##
==========================================
+ Coverage   53.02%   54.37%   +1.34%     
==========================================
  Files          29       32       +3     
  Lines         513      572      +59     
  Branches      109      120      +11     
==========================================
+ Hits          272      311      +39     
- Misses        186      199      +13     
- Partials       55       62       +7

Impacted Files	Coverage Δ
src/input/Input.js	18.75% <ø> (+18.75%)	⬆️
src/searchbar/SearchBar-default.js	77.27% <100%> (ø)
src/searchbar/SearchBar.js	100% <100%> (ø)
src/searchbar/SearchBar-ios.js	51.72% <51.72%> (ø)
src/searchbar/SearchBar-android.js	51.85% <51.85%> (ø)
src/buttons/ButtonGroup.js	64.28% <0%> (-24.61%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 961dbf3...528ae49. Read the comment docs.

[xavier-villelegier]

Tests are passing

[iRoachie]

Snapshots!

[xavier-villelegier]

@iRoachie Let me just update the docs