support coustom popup body

[taixw2]

No description provided.

[carsonwah]

I think for custom body, we could use renderPopupContent() instead of renderPopupContent({ appIconSource, appTitle, timeText, title, body }). What do you think?

[carsonwah]

I think your approach is good. Just ignore my previous comment.

[taixw2]

Yes, The parameters are passed through the show method, so if you don't pass the parameters back to renderPopupContent , you may need to write some additional methods to get the parameters.

[taixw2]

I wonder if the shadow style can be separated from the animation style, because I need to modify the shadow 😅

[carsonwah]

@taixw2 You may try removing the shadow and radius from <Animated.View>, and put it into:

<Animated.View
        style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale})}
        {...this._panResponder.panHandlers}>
        <TouchableWithoutFeedback onPress={onPressAndSlideOut}>
          <View>  // <-- put style HERE

I haven't try this yet, but in this way, everyone can customize the shadow using their own custom body.

[carsonwah]

Since I have merged #20. Could you also update the typescript typings for the new prop?

Thanks so much for the contribution and sorry for the late replies.

[taixw2]

@carsonwah I have added the corresponding type definition and added style prop.

[carsonwah]

I think we can let user customize the whole popup body. So, style prop may not be very useful.

I would propose something like:

<Animated.View
        style={getAnimatedContainerStyle({containerSlideOffsetY, containerDragOffsetY, containerScale})}
        {...this._panResponder.panHandlers}>
        <TouchableWithoutFeedback onPress={onPressAndSlideOut}>
          <View>  // No style here
            {this.renderPopupContent()}
          </View>
        </TouchableWithoutFeedback>
      </Animated.View>

renderPopupContent() {
    const { appIconSource, appTitle, timeText, title, body } = this.state;
    const { renderPopupContent } = this.props;
    if (renderPopupContent) {
      return renderPopupContent({ appIconSource, appTitle, timeText, title, body });
    }

    return (
      <View style={styles.popupContentContainer}>  // <-- Moved here, i.e. show shadow only for default popup

I cannot commit to your branch, so if you would like to, I can merge this PR first and add amendments.

[taixw2]

Agree, your approach is better.

[carsonwah]

Merged. Thanks for the contribution!