How to match size to children using react-native-gesture-handler

Question

I am trying to create a draggable, scalable and rotatable component using react-native-gesture-handler. This is my first time trying out react-native-gesture-handler so I'm not sure if this is expected behaviour due to the hitboxes needed for the gesture triggers.

So I nested some GestureHandlers to get achieve all three behaviours, but my final <Animated.View> takes up the full screen width. I want the red area to only cover the size of children. This is a problem because the rotation and scale is based from the center of the red area, so the anchor point is at the wrong place.

Draggable:

render() {
        return (
            <PanGestureHandler
                ref={this.posRef}
                onGestureEvent={this._onGestureEvent}
                onHandlerStateChange={this._onPosHandlerStateChange}
                minPointers={1}
                maxPointers={1}
            >
                <Animated.View>
                    <RotationGestureHandler
                        ref={this.rotationRef}
                        simultaneousHandlers={[this.pinchRef, this.posRef]}
                        onGestureEvent={this._onRotateGestureEvent}
                        onHandlerStateChange={this._onRotateHandlerStateChange}
                        minPointers={2}
                        maxPointers={2}
                    >
                        <Animated.View>
                            <PinchGestureHandler
                                ref={this.pinchRef}
                                simultaneousHandlers={[this.rotationRef, this.posRef]}
                                onGestureEvent={this._onPinchGestureEvent}
                                onHandlerStateChange={this._onPinchHandlerStateChange}
                                minPointers={2}
                                maxPointers={2}
                            >
                                <Animated.View collapsable={false} style={{
                                    transform: [
                                        { translateX: this._translateX },
                                        { translateY: this._translateY },
                                        { scale: this._scale },
                                        { rotate: this._rotateStr },
                                    ],
                                    backgroundColor: 'red', // <-- HERE
                                }}>
                                    {this.props.children}
                                </Animated.View>
                            </PinchGestureHandler>
                        </Animated.View>
                    </RotationGestureHandler>
                </Animated.View>
            </PanGestureHandler>
        );
    }

Usage:

<Draggable>
   <View style={{ width: 100, height: 100, backgroundColor: 'blue' }}/>
</Draggable>

Results in:

Kipnoedels · Accepted Answer · 2021-01-18 11:24:04Z

1

I found out that using alignSelf: 'center' makes the red are the same size as the child. But why does alignment determine the parent size?

answered Jan 18, 2021 at 11:24

Kipnoedels

1,4561 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sufian Over a year ago

Please mark this as the answer. :)

Kipnoedels Over a year ago

Marking as answer for now until someone with a valid answer comes along :)

Collectives™ on Stack Overflow

How to match size to children using react-native-gesture-handler

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related