Buttons for android.

Author: kmagiera

GestureHandler.js

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
 import {
   findNodeHandle,
   requireNativeComponent,
+  Animated,
   NativeModules,
   ScrollView,
   Slider,
@@ -11,6 +12,7 @@ import {
   ViewPagerAndroid,
   DrawerLayoutAndroid,
   WebView,
+  StyleSheet,
 } from 'react-native';
 
 const RNGestureHandlerModule = NativeModules.RNGestureHandlerModule;
@@ -256,7 +258,7 @@ function createNativeWrapper(Component, config = {}) {
   return ComponentWrapper;
 }
 
-const WrappedScrollView = createNativeWrapper(ScrollView);
+const WrappedScrollView = createNativeWrapper(ScrollView, { disallowInterruption: true });
 const WrappedSlider = createNativeWrapper(Slider, {
   shouldCancelWhenOutside: false,
   shouldActivateOnStart: true,
@@ -284,11 +286,107 @@ State.print = (state) => {
   }
 }
 
-const Button = createNativeWrapper(requireNativeComponent('RNGestureHandlerButton', null), {
+const RawButton = createNativeWrapper(requireNativeComponent('RNGestureHandlerButton', null), {
   shouldCancelWhenOutside: false,
-  shouldActivateOnStart: true,
+  shouldActivateOnStart: false,
 });
 
+/* Buttons */
+
+class BaseButton extends React.Component {
+  static propTypes = RawButton.propTypes;
+  constructor(props) {
+    super(props);
+    this._lastActive = false;
+  }
+  _onHandlerEvent = (e) => {
+    console.log("EV", e.nativeEvent);
+    const { state, oldState, pointerInside } = e.nativeEvent;
+    const active = pointerInside && state === State.ACTIVE;
+    if (active != this._lastActive) {
+      this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+    }
+    if (oldState === State.ACTIVE && this._lastActive) {
+      this.props.onPress && this.props.onPress(active);
+    }
+    this._lastActive = active;
+  }
+  render() {
+    return (
+      <RawButton
+        {...this.props}
+        onHandlerStateChange={this._onHandlerEvent}
+        onGestureEvent={this._onHandlerEvent}
+      />
+    )
+  }
+}
+
+const btnStyles = StyleSheet.create({
+  underlay: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  },
+  borderlessContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    top: 0,
+  }
+});
+
+class RectButton extends React.Component {
+  static propTypes = BaseButton.propTypes;
+  static defaultProps = {
+    activeOpacity: 0.105,
+    underlayColor: 'black',
+  }
+  constructor(props) {
+    super(props);
+    this._opacity = new Animated.Value(0);
+  }
+  _handleActiveStateChange = (active) => {
+    // this._opacity.setValue(active ? this.props.activeOpacity : 0);
+  }
+  render() {
+    const { children, ...rest } = this.props;
+    return (
+      <BaseButton {...rest} onActiveStateChange={this._handleActiveStateChange}>
+        <Animated.View style={[btnStyles.underlay, { backgroundColor: this.props.underlayColor }, { opacity: this._opacity }]} />
+        {children}
+      </BaseButton>
+    );
+  }
+}
+
+class BorderlessButton extends React.Component {
+  static propTypes = BaseButton.propTypes;
+  static defaultProps = {
+    activeOpacity: 0.3,
+  }
+  constructor(props) {
+    super(props);
+    this._opacity = new Animated.Value(1);
+  }
+  _handleActiveStateChange = (active) => {
+    this._opacity.setValue(active ? this.props.activeOpacity : 1);
+  }
+  render() {
+    const { children, ...rest } = this.props;
+    return (
+      <BaseButton borderless={true} {...rest} onActiveStateChange={this._handleActiveStateChange}>
+        <Animated.View style={[btnStyles.borderlessContainer, { opacity: this._opacity }]}>
+          {children}
+        </Animated.View>
+      </BaseButton>
+    )
+  }
+}
+
 export {
   WrappedScrollView as ScrollView,
   WrappedSlider as Slider,
@@ -305,5 +403,10 @@ export {
   PinchGestureHandler,
   RotationGestureHandler,
   State,
-  Button,
+
+  /* Buttons */
+  RawButton,
+  BaseButton,
+  RectButton,
+  BorderlessButton,
 }

android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandler.java

@@ -21,6 +21,7 @@ public class GestureHandler<T extends GestureHandler> {
   private View mView;
   private int mState = STATE_UNDETERMINED;
   private float mX, mY;
+  private boolean mWithinBounds;
   private float mHitSlop[];
 
   private boolean mShouldCancelWhenOutside;
@@ -88,6 +89,10 @@ public float getY() {
     return mY;
   }
 
+  public boolean isWithinBounds() {
+    return mWithinBounds;
+  }
+
   public final void prepare(View view, GestureHandlerOrchestrator orchestrator) {
     if (mView != null || mOrchestrator != null) {
       throw new IllegalStateException("Already prepared or hasn't been reset");
@@ -104,8 +109,9 @@ public final void handle(MotionEvent event) {
     }
     mX = event.getX();
     mY = event.getY();
+    mWithinBounds = isWithinBounds(mView, mX, mY);
     if (mState == STATE_ACTIVE) {
-      if (mShouldCancelWhenOutside && !isWithinBounds(mView, event.getX(), event.getY())) {
+      if (mShouldCancelWhenOutside && !mWithinBounds) {
         cancel();
         return;
       }
@@ -157,6 +163,16 @@ public boolean shouldRecognizeSimultaneously(GestureHandler handler) {
     return false;
   }
 
+  public boolean shouldBeCancelledBy(GestureHandler handler) {
+    if (handler == this) {
+      return false;
+    }
+    if (mInteractionController != null) {
+      return mInteractionController.shouldHandlerBeCancelledBy(this, handler);
+    }
+    return false;
+  }
+
   public boolean isWithinBounds(View view, float posX, float posY) {
     float left = 0;
     float top = 0;
@@ -240,6 +256,7 @@ public GestureHandler setOnTouchEventListener(OnTouchEventListener<T> listener)
 
   @Override
   public String toString() {
-    return this.getClass().getSimpleName() + "@[" + mTag + "]:"  + mView;
+    String viewString = mView == null ? null : mView.getClass().getSimpleName();
+    return this.getClass().getSimpleName() + "@[" + mTag + "]:"  + viewString;
   }
 }

android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerInteractionController.java

@@ -4,4 +4,5 @@ public interface GestureHandlerInteractionController {
   boolean shouldWaitForHandlerFailure(GestureHandler handler, GestureHandler otherHandler);
   boolean shouldRequireHandlerToWaitForFailure(GestureHandler handler, GestureHandler otherHandler);
   boolean shouldRecognizeSimultaneously(GestureHandler handler, GestureHandler otherHandler);
+  boolean shouldHandlerBeCancelledBy(GestureHandler handler, GestureHandler otherHandler);
 }

android/lib/src/main/java/com/swmansion/gesturehandler/GestureHandlerOrchestrator.java

@@ -75,13 +75,12 @@ private void scheduleFinishedHandlersCleanup() {
   }
 
   private void cleanupFinishedHandlers() {
-    for (int i = 0; i < mGestureHandlersCount; i++) {
+    for (int i = mGestureHandlersCount - 1; i >= 0; i--) {
       GestureHandler handler = mGestureHandlers[i];
       if (isFinished(handler.getState()) && !isAwaiting(handler)) {
         mGestureHandlers[i] = mGestureHandlers[mGestureHandlersCount - 1];
         mGestureHandlers[mGestureHandlersCount - 1] = null;
         mGestureHandlersCount--;
-        i--;
         handler.reset();
         handler.mIsActive = false;
         handler.mIsAwaiting = false;
@@ -114,12 +113,12 @@ private void tryActivate(GestureHandler handler) {
 
   /*package*/ void onHandlerStateChange(GestureHandler handler, int newState, int prevState) {
     mHandlingChangeSemaphore += 1;
-    if (isFinished(newState) && !handler.mIsAwaiting) {
+    if (isFinished(newState)) {
       removeFromAwaitingHandlers(handler);
     }
     if (newState == GestureHandler.STATE_CANCELLED || newState == GestureHandler.STATE_FAILED) {
       // if there were handlers awaiting completion of this handler, we can trigger active state
-      for (int i = 0; i < mAwaitingHandlersCount; i++) {
+      for (int i = mAwaitingHandlersCount - 1; i >= 0; i--) {
         GestureHandler otherHandler = mAwaitingHandlers[i];
         if (shouldHandlerWaitForOther(otherHandler, handler)) {
           tryActivate(otherHandler);
@@ -149,23 +148,22 @@ private void makeActive(GestureHandler handler) {
     // Cancel all handlers that are required to be cancel upon current handler's activation
     for (int i = 0; i < mGestureHandlersCount; i++) {
       GestureHandler otherHandler = mGestureHandlers[i];
-      if (!canRunSimultaneously(handler, otherHandler)) {
+      if (shouldHandlerBeCancelledBy(otherHandler, handler)) {
         mHandlersToCancel[toCancelCount++] = otherHandler;
       }
     }
 
-    for (int i = 0; i < toCancelCount; i++) {
+    for (int i = toCancelCount - 1; i >= 0; i--) {
       mHandlersToCancel[i].cancel();
     }
 
     // Clear all awaiting handlers waiting for the current handler to fail
-    for (int i = 0; i < mAwaitingHandlersCount; i++) {
+    for (int i = mAwaitingHandlersCount - 1; i >= 0; i--) {
       GestureHandler otherHandler = mAwaitingHandlers[i];
-      if (!canRunSimultaneously(handler, otherHandler)) {
+      if (shouldHandlerBeCancelledBy(otherHandler, handler)) {
         mAwaitingHandlers[i] = mAwaitingHandlers[mAwaitingHandlersCount - 1];
         mAwaitingHandlers[mAwaitingHandlersCount - 1] = null;
         mAwaitingHandlersCount--;
-        i--;
         otherHandler.cancel();
       }
     }
@@ -188,13 +186,13 @@ public void deliverEventToGestureHandlers(MotionEvent event) {
     for (int i = 0; i < handlersCount; i++) {
       mPreparedHandlers[i] = mGestureHandlers[i];
     }
-    for (int i = 0; i < handlersCount; i++) {
+    for (int i = handlersCount - 1; i >= 0; i--) {
       deliverEventToGestureHandler(mPreparedHandlers[i], event);
     }
   }
 
   public void cancelAll() {
-    for (int i = 0; i < mAwaitingHandlersCount; i++) {
+    for (int i = mAwaitingHandlersCount - 1; i >= 0; i--) {
       mAwaitingHandlers[i].cancel();
     }
     // Copy handlers to "prepared handlers" array, because the list of active handlers can change
@@ -203,13 +201,16 @@ public void cancelAll() {
     for (int i = 0; i < handlersCount; i++) {
       mPreparedHandlers[i] = mGestureHandlers[i];
     }
-    for (int i = 0; i < handlersCount; i++) {
+    for (int i = handlersCount - 1; i >= 0; i--) {
       mPreparedHandlers[i].cancel();
     }
   }
 
   private void deliverEventToGestureHandler(GestureHandler handler, MotionEvent event) {
-    if (!handler.wantEvents() || handler.mIsAwaiting) {
+    if (!handler.wantEvents()) {
+      return;
+    }
+    if (handler.mIsAwaiting && event.getActionMasked() == MotionEvent.ACTION_MOVE) {
       return;
     }
     float[] coords = sTempCoords;
@@ -398,6 +399,11 @@ private static boolean canRunSimultaneously(GestureHandler a, GestureHandler b)
     return a == b || a.shouldRecognizeSimultaneously(b) || b.shouldRecognizeSimultaneously(a);
   }
 
+  private static boolean shouldHandlerBeCancelledBy(GestureHandler handler, GestureHandler other) {
+    return !canRunSimultaneously(handler, other) ||
+            (handler != other && handler.shouldBeCancelledBy(other));
+  }
+
   private static boolean isFinished(int state) {
     return state == GestureHandler.STATE_CANCELLED || state == GestureHandler.STATE_FAILED
             || state == GestureHandler.STATE_END;

android/lib/src/main/java/com/swmansion/gesturehandler/NativeViewGestureHandler.java

@@ -31,12 +31,22 @@ public NativeViewGestureHandler setDisallowInterruption(boolean disallowInterrup
 
   @Override
   public boolean shouldRequireToWaitForFailure(GestureHandler handler) {
-    if (mDisallowInterruption) {
-      return handler != this;
-    }
     return super.shouldRequireToWaitForFailure(handler);
   }
 
+  @Override
+  public boolean shouldRecognizeSimultaneously(GestureHandler handler) {
+    if (!mDisallowInterruption) {
+      return true;
+    }
+    return super.shouldRecognizeSimultaneously(handler);
+  }
+
+  @Override
+  public boolean shouldBeCancelledBy(GestureHandler handler) {
+    return !mDisallowInterruption;
+  }
+
   @Override
   protected void onHandle(MotionEvent event) {
     View view = getView();
@@ -63,17 +73,28 @@ private void onHandleForView(View view, MotionEvent event) {
 
   private void onHandleForViewGroup(ViewGroup view, MotionEvent event) {
     int state = getState();
+    boolean delivered = false;
     if (state == STATE_UNDETERMINED || state == STATE_BEGAN) {
-      if (view.onInterceptTouchEvent(event) || mShouldActivateOnStart) {
+      if (view.isPressed()) {
         activate();
-      } else if (state != STATE_BEGAN) {
-        begin();
+      } else {
+        // view could become pressed due to
+        view.onTouchEvent(event);
+        delivered = true;
+        if (view.onInterceptTouchEvent(event) || mShouldActivateOnStart || view.isPressed()) {
+          activate();
+        } else if (state != STATE_BEGAN) {
+          begin();
+        }
       }
-    }
-    if (getState() == STATE_ACTIVE) {
+    } else if (state == STATE_ACTIVE) {
       view.onTouchEvent(event);
+      delivered = true;
     }
     if (event.getActionMasked() == MotionEvent.ACTION_UP) {
+      if (!delivered) {
+        view.onTouchEvent(event);
+      }
       end();
     }
   }