React-native-paper: Having loading on Searchbar and TextInput Components

[kopax]

Describe the feature

I am using Searchbar as follow:

        <Searchbar
          placeholder={`${t('homeView.search')}...`}
          value={cityOrPostalCode}
          onChangeText={this.onChangeText}
          loading={1}
          onSubmitEditing={this.submit}
        />

Motivation

So far, there is no way to switch the left icon, the right icon, or to add a component within the text to display an asynchronous task.

A use case would be a <Searchbar /> used for autocomplete, it will fetch some data.

So far I must create my own indicator, which most likely does not respect material ui guidelines

Thanks again for your time,

Dimitri

[belgamo]

What do you think about adding a boolean prop such as inverseIcons, as a way to switch icons?

[kopax]

Why not just icon left and icon right ? :/?

[belgamo]

I thought you just wanted changing the position of the icons. Already exists a prop to do that but the name is not very semantic... Maybe we can restructuring the icon and clearIcon props so that they can be treated as leftIcon and rightIcon.

See: https://callstack.github.io/react-native-paper/searchbar.html#icon

[kopax]

This features would be so much appreciated, yes that would be awesome.

I am just thinking, would it be nice to toggle the clear icon with a loading icon while searching something asynchronously (which is almost always the case)? I have another proposal in mind:

• Keep icon for previous versions with a deprecation warning
• Create leftIcon that will serve the purpose of icon
• Keep clearIcon for clearing the search bar
• Add rightIcon (for example for adding a spinner) displayed on the left of clearIcon in the <Searchbar />

Allow user to rearrange any of those 3 icons on it's will

[brunohkbx]

@Trancever what do you think about this issue? Allowing the user to change the rightIcon shouldn't be a problem at all, right? Instead of forcing this behavior as I did on #1538

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[brunohkbx]

@Trancever :point_up:

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[brunohkbx]

It's still open

[github-actions[bot]]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[kopax]

It's still open

[zholmes1]

Yes, a left and right prop would be super useful on this component. Just like List.Item. But a loading prop that sticks an ActivityIndicator on the right of the TextInput/Searchbar would cover by far the biggest use case. As of right now, there is really no good way to use the Searchbar in an app that fetches search results every time the text changes.