CODEWITHSUNDEEP
reactjsreact-nativedrag-and-dropscrollviewz-index
Kevin Li
Kevin Li

Reputation: 2114

React native how to drag card view out of ScrollView

I am currently using ScrollView to hold all my cards like

<ScrollView>
    <Card id={1}/>
    <Card id={2}/>
</ScrollView>

Card is a customised component which is basically just a View with certain width and height. I used PanResponder to define the drag animation and attach the handlers to each of the Card. 

this._panResponder = PanResponder.create({
      onPanResponderGrant: (e, gestureState) => {
          this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
      },
      onPanResponderMove: Animated.event([
        null, {dx: this.state.pan.x, dy: this.state.pan.y},
      ]),

      onPanResponderRelease: (e, {vx, vy}) => {
        this.state.pan.flattenOffset()
      }
});

So Card component just render the animated view like

    <Animated.View {...this._panResponder.panHandlers}>
       ...
    </Animated.View>

I can drag the card anywhere inside the scroll view, the part overflow the scroll view will be hided. how I can make the Card on top of the scrollView, then I can drag and show it anywhere across the screen.

The interesting thing that I found when I change ScrollView to View, then the Card can be dragged on top of the View. It only work on iOS, Android still be the same as ScrollView.

Upvotes: 1

Views: 2527

Answers (1)

Moti Azu
Moti Azu

Reputation: 5442

What you are trying to do won't work on Android. This is because RN don't support overflow:visible in Android as documented.

The overflow style property defaults to hidden and cannot be changed on Android

This means you would have to play with the hierarchy of the container views, and think of a workaround that will have the cards contained in a much larger container or duplicated into another layer.

Upvotes: 2

Related Questions