X Tutup
Skip to content

fix(SearchBar): apply light and dark theme when platform ios or android #3470

Open
kedar09 wants to merge 18 commits intoreact-native-elements:nextfrom
kedar09:SearchBar_updates
Open

fix(SearchBar): apply light and dark theme when platform ios or android #3470
kedar09 wants to merge 18 commits intoreact-native-elements:nextfrom
kedar09:SearchBar_updates

Conversation

@kedar09
Copy link
Contributor

@kedar09 kedar09 commented Apr 26, 2022

SearchBar design updates

Motivation

currently, we can use both light and dark themes only when the platform is default and when the platform is android or ios then we can use only light theme

Fixes # (issue)
#3466

Type of change

  • Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

  • Checked with example app

Checklist

  • My code follows the style guidelines of this project
  • My changes generate no new warnings

Additional context

  • we can use a dark theme when platform android or ios
         <SearchBar
           lightTheme={false}
           platform="ios"
           placeholder="Type Here..."
           onChangeText={updateSearch}
           value={search}
         />
  • design updates in SearchBar-android

@arpitBhalla arpitBhalla changed the title SearchBar - apply light and dark theme when platform ios or android fix(SearchBar): apply light and dark theme when platform ios or android Apr 27, 2022
@codecov
Copy link

codecov bot commented May 2, 2022 •
edited
Loading

Codecov Report

Merging #3470 (98734f9) into next (3ba74d6) will decrease coverage by 0.02%.
The diff coverage is n/a.

❗ Current head 98734f9 differs from pull request most recent head f0aadd0. Consider uploading reports for the commit f0aadd0 to get more accurate results

@@            Coverage Diff             @@
##             next    #3470      +/-   ##
==========================================
- Coverage   79.24%   79.22%   -0.03%     
==========================================
  Files          87       87              
  Lines        1812     1810       -2     
  Branches      813      811       -2     
==========================================
- Hits         1436     1434       -2     
  Misses        370      370              
  Partials        6        6
Impacted Files Coverage Δ
packages/base/src/SearchBar/SearchBar-android.tsx 62.29% <ø> (ø)
packages/base/src/SearchBar/SearchBar-default.tsx 73.33% <ø> (-1.14%) ⬇️
packages/base/src/SearchBar/SearchBar-ios.tsx 49.27% <ø> (ø)

📣 Codecov can now indicate which changes are the most critical in Pull Requests. Learn more

@arpitBhalla arpitBhalla linked an issue May 21, 2022 that may be closed by this pull request
SearchBar component doesn't respect boolean of true or false for lightmode attribute #3466
Open
1 task
arpitBhalla
arpitBhalla requested changes May 21, 2022
View reviewed changes
packages/base/src/SearchBar/SearchBar-android.tsx
const defaultSearchIcon = (theme: Theme) => ({
type: 'material',
size: 25,
color: theme?.colors?.platform?.android?.grey,
Copy link
Member

@arpitBhalla arpitBhalla May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can do same for iOS

packages/base/src/SearchBar/SearchBar-android.tsx Outdated
height: 1,
},
shadowOpacity: 0.2,
shadowRadius: 1.41,
Copy link
Member

@arpitBhalla arpitBhalla May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't think elevation/shadow is needed

Copy link
Contributor Author

@kedar09 kedar09 May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was trying to design like this https://material.io/design/navigation/search.html#persistent-search

Copy link
Member

@arpitBhalla arpitBhalla May 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not hard-code it If user need elevation they can just pass it through style prop?

Copy link
Contributor Author

@kedar09 kedar09 May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok I will remove that

packages/base/src/SearchBar/SearchBar-android.tsx Outdated
input!: TextInput;

static defaultProps = {
lightTheme: false,
Copy link
Member

@arpitBhalla arpitBhalla May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lets remove lightTheme from each variant & keep background as theme.colors.searchBg as you did

Copy link
Contributor Author

@kedar09 kedar09 May 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have checked that if we remove the lightTheme then SearchBar will be dark

Copy link
Member

@arpitBhalla arpitBhalla May 21, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ohh, try changing searchbg for dark color

Copy link
Contributor Author

@kedar09 kedar09 May 21, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please check this e52099b commit, can we use separate colors for background Color as per platform?

arpitBhalla
arpitBhalla reviewed Jun 25, 2022
View reviewed changes
package.json
"packages/**/*.{ts,tsx}": [
"eslint --fix",
"prettier --write",
"tsc --noEmit --composite false"
Copy link
Member

@arpitBhalla arpitBhalla Jun 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you undo this change, use --no-verify flag in case you feel it takes lot of time

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

Reviewers

@arpitBhalla arpitBhalla arpitBhalla requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

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

2 participants

@kedar09 @arpitBhalla
X Tutup