PanGestureHandler w/o child Animated?

I have a use case where I need to know about drag events but don’t actually want to animate the direct child of the PanGestureHandler.

For example, the following code for a “Draggable” component does not work:

      <View>
        {/* Note how the Animated.View is outside PanGestureHandler */}
        <Animated.View
          style={[
            {
              transform: [
                { translateX: this._translateX },
                { translateY: this._translateY },
              ],
            },
          ]}
        >
          {/* Clone on drag */}
          {this.state.active && this.props.children}
        </Animated.View>
        
        {/* Listen for drag events */}
        <PanGestureHandler
          onGestureEvent={this._onGestureEvent}
          onHandlerStateChange={this._onHandlerStateChange}>
            {this.props.children}
        </PanGestureHandler>
      </View>

Is this simply not possible?

[kmagiera]

Hey @scottmas sorry for late response on that.

I just tried you example app two comments from now and just made one change in it – replaced View that’s inside PanGestureHandler with Animated.View:

***************
*** 66,70 ****
            onGestureEvent={this._onGestureEvent}
            onHandlerStateChange={this._onHandlerStateChange}>
!           <View style={styles.redBox} />
          </PanGestureHandler>
        </View>
--- 66,70 ----
            onGestureEvent={this._onGestureEvent}
            onHandlerStateChange={this._onHandlerStateChange}>
!           <Animated.View style={styles.redBox} />
          </PanGestureHandler>
        </View>

Panning on the red box makes the other box move now. Not sure if that’s what you’d expect to happen

[kmagiera]

Yes, thanks I think once I have time to finish new docs this information is going to be included