* Initiated basic migration to react-native-elements - Search bar receives all right props without custom animations being necessary - Need to test on different layouts and cases - May be possible to unify android and iOS components. Attempt later * Removing separated android/ios files - Adding implementation of android searchbar - updating test snapshots * WIP: Integrating leftComponent and adding focus animations * Adding animations to left component on focus and blur events * Removing repeated styles and useless props * Updating snapshots * Ensuring clearIcon renders when tapping search suggestions - Also makes sure it prioritizes custom color attributes over default values for the search input * Refactoring styles, removing clear icon animations - Also removed useless ternary operations since the library itself already checks whether the search input is empty * Replacing icon components with props whenever possible - Removing useless styles * memoizing styles, adding default props/values * Memoize searchBarStyle with params * Fixing backgroundColor * Removing minWidth for cancel button * Fixing styling issues on both iOS and android * Updating snapshots post merge * Making sure showCancel can be controlled by props * Updating snapshots * Fix clipped edges on iOS & cancel icon on Android * Fixed radius, memoized styles * Fixing styling issues found on Android Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
51 lines
1.6 KiB
Diff
51 lines
1.6 KiB
Diff
diff --git a/node_modules/react-native-elements/src/searchbar/SearchBar-android.js b/node_modules/react-native-elements/src/searchbar/SearchBar-android.js
|
|
index eeaeb81..93f58de 100644
|
|
--- a/node_modules/react-native-elements/src/searchbar/SearchBar-android.js
|
|
+++ b/node_modules/react-native-elements/src/searchbar/SearchBar-android.js
|
|
@@ -78,6 +78,12 @@ class SearchBar extends Component {
|
|
};
|
|
}
|
|
|
|
+ componentDidUpdate(prevProps) {
|
|
+ if (this.props.value !== prevProps.value) {
|
|
+ this.setState({isEmpty: this.props.value === ''});
|
|
+ }
|
|
+ }
|
|
+
|
|
render() {
|
|
const {
|
|
clearIcon,
|
|
diff --git a/node_modules/react-native-elements/src/searchbar/SearchBar-ios.js b/node_modules/react-native-elements/src/searchbar/SearchBar-ios.js
|
|
index 41ef6be..dbf727b 100644
|
|
--- a/node_modules/react-native-elements/src/searchbar/SearchBar-ios.js
|
|
+++ b/node_modules/react-native-elements/src/searchbar/SearchBar-ios.js
|
|
@@ -41,6 +41,12 @@ class SearchBar extends Component {
|
|
};
|
|
}
|
|
|
|
+ componentDidUpdate(prevProps) {
|
|
+ if (this.props.value !== prevProps.value) {
|
|
+ this.setState({isEmpty: this.props.value === ''});
|
|
+ }
|
|
+ }
|
|
+
|
|
focus = () => {
|
|
this.input.focus();
|
|
};
|
|
@@ -259,7 +265,6 @@ const styles = StyleSheet.create({
|
|
paddingBottom: 13,
|
|
paddingTop: 13,
|
|
flexDirection: 'row',
|
|
- overflow: 'hidden',
|
|
alignItems: 'center',
|
|
},
|
|
input: {
|
|
@@ -270,7 +275,7 @@ const styles = StyleSheet.create({
|
|
borderBottomWidth: 0,
|
|
backgroundColor: '#dcdce1',
|
|
borderRadius: 9,
|
|
- minHeight: 36,
|
|
+ minHeight: 30,
|
|
marginLeft: 8,
|
|
marginRight: 8,
|
|
},
|