I tried to style it, but I'm sorry, it doesn't

<SwipeablePanel
fullWidth
isActive={this.state.swipeablePanelActive}
onClose={this.closePanel}
onPressCloseButton={this.closePanel}
openLarge={true}
noBackgroundOpacity={true}
style={{width: '100%', backgroundColor: 'red',position: 'absolute'}}
>
asdfsd

It would be great to have the background fade out when the panel is slid down. That seems to be the behavior of all similar interactions using this slide-down paradigm.

Currently, the dark backdrop disappears suddenly when the panel is dismissed. I've had to work around this by trying to use it as a react-navigation screen that animates its own background on dismissal, though that has come with its own issues, and support in this library would be simpler all around.

Are you able to manually set the width if the panel?

The panel is working properly for me in a basic sandbox, and all other app animations are smooth, but in the main implementation (with blank/minimal content) where it's above the rest of the app, it is exceedingly, unusably choppy.
Is there a known issue that can cause the movement animation to render at only about 1 fps?

Please making styling reusable. And generally the whole component

Merhaba Enes,

Gerekli bir kaç özellik var benım zamanım olmadıgı için bu modulu kaldırıp farklı bir modül kullanma ihtiyacı duydum nedeni ise header ı sabitlenmiyor veya footer'ı scroll içinde bu sabit durması gerekenler oynuyor sürekli altta yukarı contant kısmındada scroll kapatma gibi bir şey yapılması gerekiyor.

Teşekkürler.

when foucs on text input the view take all screen and textinput dissappear

I tried the example and run it on a new project. (using expo)

Encountered error saying

Failed to compile.
C:/Users/mycomputer/Documents/React Native Projects/Test11/node_modules/rn-swipeable-panel/components/Panel.js 13:18
Module parse failed: Unexpected token (13:18)
You may need an appropriate loader to handle this file type.
| 
| export default class SwipeablePanel extends React.Component {
>       static propTypes = {
|               isActive: PropTypes.bool.isRequired,
|               onClose: PropTypes.func,

Also below is my package.json for reference

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^34.0.1",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
    "react-native-web": "^0.11.4",
    "rn-swipeable-panel": "^1.0.14"
  },
  "devDependencies": {
    "babel-preset-expo": "^6.0.0"
  },
  "private": true
}

Hi,

Is that possible to start the panel after a component (or add marginBottom) ? And can I hide some specific components and only show if panel is fully opened ?
Example :

Thank for your awesome module 👍

Matthieu.

When I run the app this error is occured, of course I ran yarn add "rn-swipeable-panel"

Before it was working...
But from some days ago, it isn't working...

This is installed npm package folder.

Any solutions?

It would be great if we able to customize the height panel, not only large and small one,
such as percentage of screen height, or fixed height

thanks for your hard work

Is there a way to set height auto?

Hi, I am using the component to show content and at the end, place a button to do an action, the problem is that the button ignore the flex styles and show below the text (content) for example

<SwipeablePanel
      isActive={visible}
      onPressCloseButton={onClose}
      showCloseButton={showCloseButton}
      closeOnTouchOutside={closeOnTouchOutside}
      openLarge={openLarge}
      showCloseButton={showCloseButton}
      onClose={onClose}
      fullWidth
      closeIconStyle={styles.closeIcon}
      closeRootStyle={styles.closeRoot}
    >
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <View style={{flex: 5}}>
          <Text>Write Content here</Text>
        </View>
        <View style={{flex: 1, alignItems: 'center', width: '100%'}}>
          <Button title="Close" onPress={() => props.onClose()} />
        </View>
      </View>
</SwipeablePanel>

For example

Hi Enes,

I wonder if there would be a way to close the panel just by pressing the background?

Thanks!

All other bottom-sheet I’ve tried – the tab bar is shown on top of the sheet
Looking for implementation which will cover it

Thank you for this library!

It would be great if we able to customize the style of background. For example, if I have elements with elevation set I need to set greater elevation to parent panel component. Can you add another property for it?

Thank you for nice library.

I want to change tab style of the rn-swipeable-panel.
Can I do it?

Hello ,

i think the title says it all , is it complicated to achieve this ??

Hello guys,

I'm trying to use the panel but it doesn't show at all. There's no error, it just doesn't show.
I'm using an iPhone X with iOS 11. I've played around with the style, put it inside a SafeAreaView, and also tried it on an empty screen with no success.

Any ideas?

But the package.json has an entry "types": "./index.d.ts" and the repo contains index.d.ts.

Hello,

I was trying to embed a React Navigator inside Swipeable Panel so I can handle a full navigation inside the Panel, but unfortunately I was not able to achieve this. I can just see the Navigation Header, without any content no matter what content I use, even an empty component with a text inside it is not working.

I'm using the following modules

"@react-navigation/native": "^5.7.3",
"@react-navigation/stack": "^5.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
"rn-swipeable-panel": "^1.2.1"

Thanks

Hi @enesozturk,

Thanks for the cool library, we're using it all the time!

Weird issue today, I have a list inside my panel and I want the panel to close itself once I select an item on the list.

But when I do a simple:

                onPress={() =>
                  this.setState({
                    currentShop: index,
                    isShopPanelActive: false
                  })
                }

It doesn't close the panel?

Any idea?

Thanks again,

Théo

hello there,
is there any way I can scroll through children content inside the panel?
I think the ability to drag it upward after the panel is already opened is the problem(correct me if I'm wrong)
update: ScrollView is not working on ios specifically

Can I use it on ios

Version 1.1.0 removed the component folder from the node modules and doesn't build, and the last version that works is Version 1.0.28. Just wanted to let you know!

Package Version: 1.0.27
OS: Android

Currently, the package isn't considered the status bar height, and causing the background opacity doesn't apply full height of the screen, it's really nice if the background opacity also applied to the whole screen

Code Suggetion:

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBar.currentHeight;
const FULL_HEIGHT = Dimensions.get("window").height + STATUSBAR_HEIGHT;

On Android, the panel appears below a standard React Native button. Is there a way to ensure that it remains on top of all content?

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {View, Button} from 'react-native';
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore: this is just a demo
import SwipeablePanel from 'rn-swipeable-panel';
import {Configurations} from './Configuration';

type AppState = {
  content: Function;
  isActive: boolean;
  openLarge: boolean;
  onlyLarge: boolean;
  fullWidth: boolean;
  noBar: boolean;
  showCloseButton: boolean;
  noBackgroundOpacity: boolean;
  bounceAnimation: boolean;
  closeOnTouchOutside: boolean;
};

export default class SwipeablePanelDemo extends Component<{}, AppState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      content: (): any => null,
      isActive: false,
      openLarge: false,
      onlyLarge: false,
      fullWidth: false,
      noBackgroundOpacity: false,
      bounceAnimation: false,
      closeOnTouchOutside: false,
      noBar: false,
      showCloseButton: false,
    };
  }

  openConfigurationsPanel = () => {
    this.setState({
      isActive: true,
      openLarge: false,
      fullWidth: false,
      showCloseButton: false,
      noBar: false,
      content: (): any => <Configurations state={this.state} changeState={this.changeState} />,
    });
  };

  changeState = (state: any) => {
    this.setState(state);
  };

  openDefaultPanel = () => {
    // eslint-disable-next-line @typescript-eslint/no-empty-function
    this.setState({isActive: true, openLarge: false, content: () => {}});
  };

  closePanel = () => {
    this.setState({
      isActive: false,
      fullWidth: false,
      openLarge: false,
      showCloseButton: false,
      noBackgroundOpacity: false,
      closeOnTouchOutside: false,
      noBar: false,
    });
  };

  render() {
    const {isActive, showCloseButton, closeOnTouchOutside, fullWidth, noBackgroundOpacity, openLarge, noBar} = this.state;

    return (
      <>
        <View>
          <Button onPress={this.openConfigurationsPanel} title="Open Config Panel" />
        </View>
        <SwipeablePanel
          fullWidth={fullWidth}
          noBar={noBar}
          openLarge={openLarge}
          showCloseButton={showCloseButton}
          noBackgroundOpacity={noBackgroundOpacity}
          isActive={isActive}
          closeOnTouchOutside={closeOnTouchOutside}
          onClose={() => {
            this.setState({isActive: false});
          }}>
          {this.state.content()}
        </SwipeablePanel>
      </>
    );
  }
}

Hi Enes, I'm trying to modifying the Panel.js to implement the feature of closing the panel by touching the area outside the panel but I'm having problem with it. Is there any way to do it?

Thank you very much for making this!!!

Desired behavior:

Ability for contents inside the SwipeablePanel to have a fixed height, and the panel itself cannot be scrolled.

E.g.

 <SwipeablePanel
            onlyLarge
            canScroll={false}
            isActive={isPanelActive}
            noBackgroundOpacity={true}
            showCloseButton={false}>{ ... }</SwipeablePanel>

This behavior might be possible already, but I haven't been able to figure it out.

Hello, I'm trying to use it in typescript.
can you tell me how to use it?

I used the openLarge option, but nothing happened.

I really hoped that the panel could open everything completely. But still, it opens only a part.

i want to check if the button panel is large so i can load some contents between two contenets. when large is false i will hide the content again.

Thank you for a nice lib.
I develop with iPhone 11 that has a notch.
This image is when openLarge mode.

I suggest you change the following code to avoid the notch
https://github.com/enesozturk/rn-swipeable-panel/blob/master/src/Panel.tsx#L16

Hi, i was trying to put a horizontal scroll inside Swipeable panel, but its not working, will you please check this.

My code here:

export const Sav = () => {
return (



<Image
style={{ width: 20, height: 20 }}
source={require('_assets/icons/calendar-icon.png')}
/>


When you like to visit
Pick a time for a FREE assisted house visit
You can reschedule later if you are busy

{/* horizontal code here */}

{hellocategory.map(
({ title, subTitle }, index) => (

{title}
{subTitle}

)
)}





)
}

PFA screenshot:

• When SwipeablePanel is placed inside a scrollview, pan-responder doesn't work properly, scrollevents from parent scrollview are also getting captured.
• With react-navigation, when headers are present on navigator, panel backdrop doesn't cover that part.

A workaround for this that I'm using rn is to wrap SwipeablePanel inside a native modal with fade animationType which is handling both issues

hei,

i'm getting this error:

2020-08-05 13:05:21.417 1303-1398/com.mobileclient E/ReactNativeJS: Invariant Violation: Module RCTDeviceEventEmitter is not a registered callable module (calling emit), js engine: hermes

using version 1.1.7 with RN 0.63.2

Hi,
scroll not working in flatlist in android but working fine in iOS
here is my code
var list={
1,2,3,............,,50,51,52,53,54,55
}
<SwipeablePanel
fullWidth
showCloseButton={true}
//style={{ zIndex: 1 }}
panel_height={700}
closeRootStyle={{ backgroundColor: Theme.DividerColor }}
isActive={this.state.swipeablePanelActive}
onClose={this.closePanel}
onPressCloseButton={this.closePanel}>
<FlatList
//keyboardShouldPersistTaps='handled'
contentContainerStyle={{ paddingBottom: 100 }}
ListHeaderComponent={null}
ListFooterComponent={null}
scrollEnabled={true}
style={[styles.list, { height: Dimensions.get('window').height }]}
data={this.state.list? this.state.list : null}
renderItem={({ item, index, separators }) => (
<View style={{ marginTop: 40, top: 10 }}>
{index}

)}
/>

in it showing only 29 items, the rest of items not showing

can you please tell me the solution for this.
thank you

How to not close the panel at all?
I tried to pass null on onClose but doesn't work

Hi Enes,

Would it be possible to have a props option to add a header under the bar or to replace the bar, which will not be moved when the children component scrolls?

Thank you!

Hi

I have installed this package in one one of my react native project.
I used the below command to run the project
npx react-native run-android

The project has built successfully, but while bundling the assets, I am getting the error.
I have attached the screenshot for your reference.

Below are the platform details
Platform: Mac OS Catalina

Node version: 11.10.0
React-Native: 0.61.1

I have tried installing this by deleting the node_modules and clean the cache (npm cache and metro) but none of the tricks worked.

I appreciate any help on this

Thanks

Feature request to optionally show the panel without affecting background opacity. Similar to the Google Maps bottom panel behavior.

Hey @enesozturk can you look on this one?
Thanks in advance

<SwipeablePanel
        fullWidth
        isActive={showMore}
        onClose={() => setShowMore(false)}
        allowTouchOutside
        barStyle={{ width: 62 }}>

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 -

I'm using the swipeable panel on a tablet app and there is an issue when the tablet orientation change.
Opening the panel in landscape mode give this:

and when switching to portrait mode the panel is moved to the right:

Same issue when opening the panel in portrait mode and changing to landscape.
In this case, the panel is moved a little bit to the left.

Could you help to to solve this?

Known issue from React Native github.
Please set the useNativeDriver for this project

Thanks for your hard work

I tried to leave the panel active, customized the style. When I drag up it will show the large panel. However, it will disappear if i drag it out. Is there a way to prevent this? I would like my panel to be active all the time.

'@types/rn-swipeable-panel@latest' is not in the npm registry either in yarn

Setting the noBar prop to true doesn't remove the grey bar. Can a fix for that be made? Seems like it would be a quick one. I could even work on it if that's something you'd be open to

It wold be great to have and onlySmall option that prevent the container to go large when user swipes up. I use only the small version in my app and makes no sense when the user enlarge it because its only blank space.