Scroll bouncing effect appear when swipe up the panel

[DevanshaniR]

I have a flat list from the flat list item tap I'm going to open the bottom panel. When open and when I'm going to swipe up it creates a gap in the bottom of the screen and bounce to scroll up from the view.Please give a solution for this? Before swipe up -

After swipe up -

[exneval]

I also had the same experience, +1

[DevanshaniR]

@exneval Did you found a alternative solution for that.Big help.Thankyou

[enesozturk]

Hi, can you share any code snippet that you used inside the panel?

Make sure you installed the last version of the rn-swipeable-panel. And inside the panel, you don't have to use ScrollView (if you use). Because the Panel puts the content inside a ScrollView that will be enabled after panel opened large state.

[enesozturk]

I was actually asking for what this.renderContent() returns.

[DevanshaniR]

@enesozturk this is the code

"rn-swipeable-panel": "^1.0.27"

renderContent = () => {
    const { selected_notification_item = {} } = this.props;
    const { title = '', dateTime = '', description = '', image_url = '' } = selected_notification_item;
    return (
      <View style={styles.bottomSheetContainer} >
        <View>
          <Text style={styles.bottomSheetTitleTextStyle}>
            {title}
          </Text>
        </View>
        <View >
          <Text style={styles.bottomSheetDateStyle}>
            {dateTime}
          </Text>
        </View>
        {description !== '' ?
          <View style={styles.contentContainer} onLayout={this.onLayout}>
            <Text
              style={styles.contentTextStyle}>{description}</Text>
          </View> : <View />}
        {image_url !== '' ?
          <View style={styles.imageContainer}>
            <Image source={{ uri: image_url }} style={styles.imageIconStyle} resizeMode={'cover'} />
          </View> : <View />}
      </View>
    );
  }

Styles:

bottomSheetContainer: {
alignItems: 'flex-start',
paddingTop: 18,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
width: Dimensions.get('window').width,
paddingBottom: 40
},
bottomSheetTitleTextStyle: {
marginLeft: 20,
marginRight: 20,
fontSize: 18,
fontWeight: 'bold'
},
bottomSheetDateStyle: {
fontSize: 16,
fontWeight: '300',
color: Colors.greyColorForFuturejob,
marginLeft: 20,
marginRight: 20,
paddingTop: 5
},
contentContainer: {
alignItems: 'flex-start',
justifyContent: 'center',
// backgroundColor: Colors.yellow,
width: Dimensions.get('window').width,
paddingTop: 16,
},
contentTextStyle: {
fontSize: 16,
color: Colors.reportIssueTitle,
marginLeft: 20,
marginRight: 20,
flexShrink: 1,
textAlign:'justify'
},
imageContainer: {
height: 240,
justifyContent: 'center',
alignItems: 'flex-start',
width: Dimensions.get('window').width - 40,
paddingTop: 25
},
imageIconStyle: {
width: Dimensions.get('window').width - 40,
height: 240,
marginLeft: 20,
marginRight: 20,
},
panelStyle: {
maxHeight: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
barStyle: {
width: 40,
marginTop: 20
}

[enesozturk]

When commenting, be careful not to pollute the information.. I updated your comments.

I will check that out.

[DevanshaniR]

@enesozturk thanks. I'm waiting for a solution for the above issue. Thank you

[damithz]

@enesozturk I also have the same issue.

[enesozturk]

Hi @DevanshaniR. I tried the panel with components you share with me. Everything looks ok for me. You are trying to override panel styles. Maybe problem is because of that. Here is a screen record. Could you please use the panel with just a simple component like Hello world!, check out the result if panel is same

[enesozturk]

@enesozturk I also have the same issue.

What are you rendering inside the panel? Are you trying to override the panel styles? What is your React Native version? What is your simulator? This answers would be good guys. @DevanshaniR @damithz

[DevanshaniR]

@enesozturk I'm using "react-native": "0.60.5" version Simulator - Huawei GR5

This is my code after I commented the panel styles. Still I have the same issue. And also I have attached a screen recording. I'm waiting for a solution. Thankyou. https://drive.google.com/open?id=1q3NdxaYBzVLNEVarmvG5tdyvdx-AgJyJ

 render() {
    return (
      <View style={styles.container}>
        <Header
          style={styles.header}
          backButtonPressed={() => this.handleBackButtonClick()}
          headerText={this.state.locals.title}
          testID={`notification_main`} />
        {/*loading indicator*/}
        <ActivityIndicator animating={this.props.apiLoading} text={this.props.api_call_indicator_msg} />
        <View style={styles.container}>
          {/* START SWIPEABLE PANEL */}
          <SwipeablePanel
            fullWidth={true}
            isActive={this.state.swipeablePanelActive}
            onClose={this.closePanel}
            closeOnTouchOutside={true}
            // style={styles.panelStyle}
            barStyle={styles.barStyle}
          >
            {this.renderContent()}
          </SwipeablePanel>
          {/* END SWIPEABLE PANEL */}
          <View style={styles.flatListViewContainer}>
            <FlatList
              data={this.props.notificationData}
              renderItem={this.renderListItem}
              keyExtractor={(item, index) => index.toString()}
              scrollEnabled={true}
              extraData={this.state}
            />
          </View>
        </View>
      </View>

 renderContent = () => {
    const { selected_notification_item = {} } = this.props;
    const { title = '', dateTime = '', description = '', image_url = '' } = selected_notification_item;
    try {
      return (
        <View style={styles.bottomSheetContainer} >
          <View>
            <Text style={styles.bottomSheetTitleTextStyle}>
              {title}
            </Text>
          </View>
          {dateTime != '' ?
            <View >
              <Text style={styles.bottomSheetDateStyle}>
                {dateTime}
              </Text>
            </View> : <View />}
          {description !== '' ?
            <View style={styles.contentContainer}>
              <Text
                style={styles.contentTextStyle}
              // numberOfLines={3}
              // ellipsizeMode='tail'
              >{description}</Text>
            </View> : <View />}
          {image_url !== '' ?
            <View style={styles.imageContainer}>
              <Image
                source={{ uri: image_url }}
                style={styles.imageIconStyle}
                resizeMode={'cover'}
              />
            </View> : <View />}
        </View>
      );
    } catch (e) {
      console.log('exception', e);
    }
  }

[enesozturk]

Thanks for the information. It is weird. Could you please try to use SwipeablePanel in App.js (with root components) like I do, for example:

<>
      {loading ? (
        <AuthLoading />
      ) : (
        <>
          <StatusBar {...AppSettings.statusBar} animated translucent={false} />
          {user ? (
            <>
              <SafeAreaView />
              <YourAppNavigations />
            </>
          ) : (
            <AuthPages />
          )}
        </>
      )}
      <Modal />
      {/* Here is a component I render Swipeable Panel inside */}
      <BottomPanel /> 
    </>

I am trying to understand what cause the problem.

[DevanshaniR]

@enesozturk I have tried in this way by removing the flat list & swipeable panel wrapped view. But issue is still there.

 render() {
    return (
      <View style={styles.container}>
        <Header
          style={styles.header}
          backButtonPressed={() => this.handleBackButtonClick()}
          headerText={this.state.locals.title}
          testID={`notification_main`} />
        {/*loading indicator*/}
        <ActivityIndicator animating={this.props.apiLoading} text={this.props.api_call_indicator_msg} />
        {/* START SWIPEABLE PANEL */}
        <SwipeablePanel
          fullWidth={true}
          isActive={this.state.swipeablePanelActive}
          onClose={this.closePanel}
          closeOnTouchOutside={true}
          style={styles.panelStyle}
          barStyle={styles.barStyle}
        >
          {this.renderContent()}
        </SwipeablePanel>
        {/* END SWIPEABLE PANEL */}
        <View style={styles.flatListViewContainer}>
          <FlatList
            data={this.props.notificationData}
            renderItem={this.renderListItem}
            keyExtractor={(item, index) => index.toString()}
            scrollEnabled={true}
            extraData={this.state}
          />
        </View>
      </View>
    );
  }
}

[enesozturk]

Have you installed previous versions of the rn-swipeable-panel? Because this issue was happening in old verions and I fixed that. Could you please follow this steps just in case:

1. yarn remove rn-swipeable-panel
2. watchman watch-del-all
3. rm -r node_modules/
4. yarn cache clean
5. yarn
6. yarn add rn-swipeable-panel
7. rm -fr $TMPDIR/metro*
8. yarn start -- --reset-cache

[DevanshaniR]

@enesozturk I have not installed previous versions of the plugin. But I have tried your instructions & did the re installation. But the issue is still there.

[enesozturk]

Okay.. I will check the swiping methods of the package and try in on different android devices. I did not understand why it happens. Thanks for following up.

[DevanshaniR]

@enesozturk thank you. Waiting for a solution.

[DevanshaniR]

@enesozturk I have tried using different android devices in my team members. They also have the same issue. Device models - Samsung JMax One plus 3T

[enesozturk]

Thanks for the info. I am also using the package in production, no problem at all :) I think it is because of your app design.

[DevanshaniR]

@enesozturk appreciate your support. I'm waiting for a solution as for me panel is not fixed to the bottom. Thankyou

[benov84]

Same problem here, tried everything, still going away on swipe up

[sheggietyn]

Hello Enesozturk

please I'm also having this same issue, I'm using the latest version of swipeable but using a button to trigger the swipe

when it shows instead of showing from the bottom of the screen, it starts at the middle of the screen

how do we solve this issue, please

[sheggietyn]

Hi @DevanshaniR. I tried the panel with components you share with me. Everything looks ok for me. You are trying to override panel styles. Maybe problem is because of that. Here is a screen record. Could you please use the panel with just a simple component like Hello world!, check out the result if panel is same

please send the code you used for this

[sheggietyn]

issue Solved

thanks