New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Platform specific SearchBar (v1) #632

Closed
wants to merge 24 commits into
base: next
from

Conversation

Projects
None yet
4 participants
@xavier-villelegier
Collaborator

xavier-villelegier commented Oct 1, 2017

Information

I don't know if this can replace the original SearchBar. For those who want a standard design, the original SearchBar is a good component, and this one can be useful for those who want a platform specific one. Maybe they can both cohabit.

API

This component inherits all props of the v1 Input (made by @Monte9), and, by transitivity, all the props of the official React Native TextInput

This allows to create a really simple component with just 4 additional props for now:

Props type default description
cancelButtonTitle string null iOS only Title of the cancel button on the right side
noIcon boolean false Hides the leftIcon of the Input when true
clearIcon boolean true Displays clear icon button when true
showLoading boolean false Shows an ActivityIndicator when true
loadingProps object {} Props passed to ActivityIndicator
onClearText function null Callback fired when pressing the clear icon
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)
pixelperfectsearchbar

Example 1

<SearchBar
  showLoading
  placeholder='Search'
/>
iOS Android
oct -15-2017 15-22-05 oct -15-2017 18-16-03

TODO

• Add more props for customization

@xavier-villelegier xavier-villelegier changed the base branch from v1 to next Nov 17, 2017

@nathanbirrell

This comment has been minimized.

Show comment
Hide comment
@nathanbirrell

nathanbirrell Dec 8, 2017

How far off is this from making it to a release?

nathanbirrell commented Dec 8, 2017

How far off is this from making it to a release?

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Dec 8, 2017

Member

@nathanbirrell glad you asked. I'll review this PR and merge within the next couple days.

For v1 release, I'll post updates on this PR: #711 (comment)

Member

Monte9 commented Dec 8, 2017

@nathanbirrell glad you asked. I'll review this PR and merge within the next couple days.

For v1 release, I'll post updates on this PR: #711 (comment)

@Monte9 Monte9 changed the base branch from next to v1 Jan 7, 2018

@Monte9 Monte9 changed the base branch from v1 to next Jan 20, 2018

@Monte9

This comment has been minimized.

Show comment
Hide comment
@Monte9

Monte9 Jan 21, 2018

Member

This PR will need to be recreated since the /example app has been deleted from the master branch and now lives in it's own repo here: https://github.com/react-native-training/react-native-elements-app#get-started

I suggest cloning that repo and using the submodule to create a PR on the react-native-elements-app repo as well as create a new branch and submit this PR from within the submodule for react-naive-elements.

Hope this is not too confusing. Let me know if you have any questions.

Member

Monte9 commented Jan 21, 2018

This PR will need to be recreated since the /example app has been deleted from the master branch and now lives in it's own repo here: https://github.com/react-native-training/react-native-elements-app#get-started

I suggest cloning that repo and using the submodule to create a PR on the react-native-elements-app repo as well as create a new branch and submit this PR from within the submodule for react-naive-elements.

Hope this is not too confusing. Let me know if you have any questions.

@Monte9

Please recreate.

@xavier-villelegier

This comment has been minimized.

Show comment
Hide comment
@xavier-villelegier

xavier-villelegier Jan 23, 2018

Collaborator

Closed in favor of #837

Collaborator

xavier-villelegier commented Jan 23, 2018

Closed in favor of #837

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment