Skip to content
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

SearchBar component doesn't respect boolean of true or false for lightmode attribute #3466

Open
1 task done
brianandreasen1983 opened this issue Apr 24, 2022 · 1 comment · May be fixed by #3470
Open
1 task done
Labels
component: SearchBar Issue related to SearchBar Component

Comments

@brianandreasen1983
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Explain what you did

When implementing dark mode into my application the search bar when set to lightmode={false} doesn't respect it to be in dark mode.

I've tried this in a hook, using a theme and with a boolean hard coded as a string and without a string.

<SearchBar lightTheme={false}
placeholder={"Search Matches"}
platform='ios'
showLoading={isRefreshing}
onChangeText={searchTerm => handleSearch(searchTerm)} value={searchTerm} />

<SearchBar  lightTheme='false'
            placeholder={"Search Matches"} 
            platform='ios' 
            showLoading={isRefreshing}
            onChangeText={searchTerm => handleSearch(searchTerm)} value={searchTerm} />

Expected behavior

The SearchBar component still stays in lightmode I would expect this to be able to be toggled between the two so I can bind this to a hook to complete dark/lightmode support in my app.

Describe the bug

When the lightmode attribute is set to false it doesn't go into dark mode theme.

Steps To Reproduce

<SearchBar  lightTheme={false}
                      placeholder={"Search Matches"} 
                      platform='ios' 
                      showLoading={isRefreshing}
                      onChangeText={searchTerm => handleSearch(searchTerm)} value={searchTerm} />

    <SearchBar  lightTheme='false'
                placeholder={"Search Matches"} 
                platform='ios' 
                showLoading={isRefreshing}
                onChangeText={searchTerm => handleSearch(searchTerm)} value={searchTerm} />

Screenshots

image
Screen Shot 2022-04-24 at 4 45 02 PM

Your Environment

react-native-elements: 3.4.0
react-native: 0.64.3
@brianandreasen1983
Copy link
Author

brianandreasen1983 commented Apr 24, 2022

I am currently working around this by checking the color scheme to see if it is in darkMode and then rendering a seperate SearchBar component without the light theme attribute as a quick and dirty solution for now but seems a little awkward that this logic could not be bound to colorScheme or another way to toggle lightmode and the docs seem to be a little thin on this.

image

@arpitBhalla arpitBhalla added component: SearchBar Issue related to SearchBar Component and removed Needs Triage labels Apr 26, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: SearchBar Issue related to SearchBar Component
Projects
None yet
2 participants