From ad600f492aec69b8f34490e602d76a9f7265a595 Mon Sep 17 00:00:00 2001
From: Jax <jaxchen.oz@gmail.com>
Date: Sun, 17 Jun 2018 00:34:35 +1000
Subject: [PATCH] Support custom position instead of 'center' for
 searchIcon/placeholder when expanded: 'left' for 'ltr' direction or 'right'
 for 'rtl' direction

---
 README.md |  2 ++
 index.js  | 18 ++++++++++++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index caf16b7..6c663a3 100644
--- a/README.md
+++ b/README.md
@@ -212,6 +212,7 @@ class MyScene extends PureComponent {
     /**
      * Positioning
      */
+    shouldCenterAllExpanded: PropTypes.bool,
     positionRightDelete: PropTypes.number,
     searchIconCollapsedMargin: PropTypes.number,
     searchIconExpandedMargin: PropTypes.number,
@@ -221,6 +222,7 @@ class MyScene extends PureComponent {
 
 ## Prop Defaults
 ```
+    shouldCenterAllExpanded: true,
     searchIconCollapsedMargin: 25,
     searchIconExpandedMargin: 10,
     placeholderCollapsedMargin: 15,
diff --git a/index.js b/index.js
index ee9d60d..61f3997 100644
--- a/index.js
+++ b/index.js
@@ -33,12 +33,16 @@ class Search extends PureComponent {
      * Animated values
      */
     this.iconSearchAnimated = new Animated.Value(
-      this.middleWidth - this.props.searchIconCollapsedMargin
+      this.props.shouldCenterAllExpanded
+        ? this.middleWidth - this.props.searchIconCollapsedMargin
+        : this.props.searchIconCollapsedMargin
     );
     this.iconDeleteAnimated = new Animated.Value(0);
     this.inputFocusWidthAnimated = new Animated.Value(this.contentWidth - 10);
     this.inputFocusPlaceholderAnimated = new Animated.Value(
-      this.middleWidth - this.props.placeholderCollapsedMargin
+      this.props.shouldCenterAllExpanded
+        ? this.middleWidth - this.props.placeholderCollapsedMargin
+        : this.props.placeholderCollapsedMargin
     );
     this.btnCancelAnimated = new Animated.Value(this.contentWidth);
 
@@ -225,13 +229,17 @@ class Search extends PureComponent {
         }).start(),
         this.props.keyboardShouldPersist === false
           ? Animated.timing(this.inputFocusPlaceholderAnimated, {
-              toValue: this.middleWidth - this.props.placeholderCollapsedMargin,
+              toValue: this.props.shouldCenterAllExpanded
+                ? this.middleWidth - this.props.placeholderCollapsedMargin
+                : this.props.placeholderCollapsedMargin,
               duration: 200
             }).start()
           : null,
         this.props.keyboardShouldPersist === false || isForceAnim === true
           ? Animated.timing(this.iconSearchAnimated, {
-              toValue: this.middleWidth - this.props.searchIconCollapsedMargin,
+              toValue: this.props.shouldCenterAllExpanded
+                ? this.middleWidth - this.props.searchIconCollapsedMargin
+                : this.props.searchIconCollapsedMargin,
               duration: 200
             }).start()
           : null,
@@ -536,6 +544,7 @@ Search.propTypes = {
   /**
    * Positioning
    */
+  shouldCenterAllExpanded: PropTypes.bool,
   positionRightDelete: PropTypes.number,
   searchIconCollapsedMargin: PropTypes.number,
   searchIconExpandedMargin: PropTypes.number,
@@ -559,6 +568,7 @@ Search.defaultProps = {
   editable: true,
   blurOnSubmit: true,
   keyboardShouldPersist: false,
+  shouldCenterAllExpanded: true,
   searchIconCollapsedMargin: 25,
   searchIconExpandedMargin: 10,
   placeholderCollapsedMargin: 15,