How to change the color of the activity indicator in the Searchbar component?

[WillOrtiz7]

I'm using the Searchbar component and I want to change the color of the activity indicator which is visible only when the loading prop of the Searchbar component evaluates to true. There is an iconColor prop but this only controls the color of the search icon on the left and the clear icon on the right, it does not apply to the activity indicator. Any idea what prop I can use to change the color of the activity indicator?

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

[csisrobi]

Did you find any solution for this? I'm stuck with this.

[ljh-wd]

Hey, having the same issue, did you find anything either?

[gedu]

Hey, at least for now there isn't a direct way to change it. PR is open to add it

As a workaround you can wrap the Searchbar with a new Provider, and set the color you want to color.primary

const themeJustForSearchbar = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'red', // Customize the primary color here
  },
};

<PaperProvider theme={themeJustForSearchbar}>
       <Searchbar
              placeholder="Search"
              onChangeText={setSearchQuery}
              value={searchQuery}
              loading
            />
        </PaperProvider>
        ```

[ljh-wd]

Perfect, thank you so much!

…

On Mon, 15 Apr 2024, 08:56 edug, ***@***.***> wrote: Hey, at least for now there isn't a direct way to change it. PR is open to add it As a workaround you can wrap the Searchbar with a new Provider, and set the color you want to color.primary const themeJustForSearchbar = { ...DefaultTheme, colors: { ...DefaultTheme.colors, primary: 'red', // Customize the primary color here }, }; <PaperProvider theme={themeJustForSearchbar}> <Searchbar placeholder="Search" onChangeText={setSearchQuery} value={searchQuery} loading /> </PaperProvider> ``` — Reply to this email directly, view it on GitHub <#3640 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWIDS7VWJTRDNMIJE4LHSADY5OB35AVCNFSM6AAAAAAUNATDBSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCMJUHE2TQ> . You are receiving this because you commented.Message ID: <callstack/react-native-paper/repo-discussions/3640/comments/9114958@ github.com>