panGestureAnimatedValue not works as expected.

[waheedakhtar694]

Describe the bug I am open modal as modalizeRef.current.open('top') with alwaysOpen value but the panGestureAnimatedValue not works properly.

When I open the modalize animation initialized with its initial value and didn't work on the first swipe, it works when I go to alwaysOpen point and then expand to full height.

Reproduce

 const animated = useRef(new Animated.Value(1)).current

  const renderHeader = () => {
      return (
          <VideoPlayer
            url={
            JSON.parse(
              currentPlayingVideo[0].attributes.media_metadata
            ).dataUrl
          }
          // thumbnailUrl={mediaUrls.thumbnailUrl}
            index={0}
            layout={layout}
            title={currentPlayingVideo[0].attributes.title}
            author={currentPlayingVideo[0].attributes.user_data.name}
            onClose={closeModal}
            animated={animated}
        />
      )
    } else {
      return null
    }
  }

 <Moalize
      onBackButtonPress={() => alert('wekdjsa')}
      ref={modalRef}
      panGestureAnimatedValue={animated}
      modalHeight={DeviceSizes.DEVICE_HEIGHT}
      HeaderComponent={renderHeader}
      modalStyle={{ borderTopLeftRadius: 0, borderTopRightRadius: 0 }}
      tapGestureEnabled={false}
      panGestureComponentEnabled
      contentRef={contentRefVideoPlayer}
      withHandle={false}
      withOverlay={false}
      alwaysOpen={modalRef.current === null ? DeviceSizes.DEVICE_HEIGHT : (showAudioPlayer ? 120 : 70)}
      onPositionChange={onLayout}
      threshold={50}
      velocity={100}
    >

Now here is the Video animation code.

render () {
    const { url, animated } = this.props
    const { buffering } = this.state

    return (
      <Animated.View style={[ { height: 220, width: DeviceSizes.DEVICE_WIDTH }, {
        transform: [
          {
            scale: animated.interpolate({
              inputRange: [0.5, 1],
              outputRange: [0.25, 1],
              extrapolate: 'clamp'
            })
          },
          {
            translateX: animated.interpolate({
              inputRange: [0, 0.25, 1],
              outputRange: [-500, 20, 0],
              extrapolate: 'clamp'
            })
          },
          {
            translateY: animated.interpolate({
              inputRange: [0, 1],
              outputRange: [-300, 0],
              extrapolate: 'clamp'
            })
          }
        ]}]}>
        <Video
          ref={ref => {
            this.player = ref
          }}
          source={{ uri: url }}
          controls
          resizeMode='contain'
          paused={this.state.paused}
          onBuffer={this.onBuffer}
          onLoadStart={this.onLoadStart}
          onLoad={this.handleLoad}
          key={url}
          onProgress={this.handleProgress}
          style={[styles.backgroundVideo]}


        />
        { buffering && <ActivityIndicator style={{ zIndex: 1000000, alignSelf: 'center', position: 'absolute', top: '45%' }}
          color={Colors.White} />
        }
      </Animated.View>
    )
  }

Dependencies:

• react-native-modalize 2.0.5
• react-native 0.63.0
• react-native-gesture-handler 1.7.0
• expo/react-navigation/react-native-navigation: 4.4.0

[haduy97]

How did you minium the player at the bottom ?? Please teach me how to do it, i have little bit struggle to doing with it

[hk-skit]

@jeremybarbet Would highly appreciate any workaround/fix for this. 🙏🏻