octopitus / rn-sliding-up-panel Goto Github PK

With 3072b4d a fix for the deprecated React.PropTypes has landed. However, the version in package.json didn't get bumped with that, which results in an old version (which still uses React.PropTypes) being installed when running yarn ad rn-sliding-up-panel.

Hi guys, any way to start the panel initially collapsed? or the only way is using transitionTo when componentDidMount?

Is a must to have feature (IMHO), thanks !!!

Hi got error when running yarn run:android, please help

ERROR EPERM: operation not permitted, lstat 'D:\Frank\workspace\rnmap\example
android\app\build\intermediates\res\merged\debug\anim'
npm ERR! code ELIFECYCLE
npm ERR! errno 11
npm ERR! [email protected] start: node node_modules/react-native/local-c li/cli.js start
npm ERR! Exit status 11
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache_logs\2018-01-31T10_17_38_
735Z-debug.log

2018-01-31T10_17_38_735Z-debug.log

react-native-cli: 2.0.1
react-native: 0.51.0
npm version
{ 'react-native-maps': '0.19.0',
npm: '5.5.1',
ares: '1.13.0',
cldr: '32.0',
http_parser: '2.7.0',
icu: '60.1',
modules: '59',
nghttp2: '1.25.0',
node: '9.2.0',
openssl: '1.0.2m',
tz: '2017c',
unicode: '10.0',
uv: '1.16.1',
v8: '6.2.414.44-node.11',
zlib: '1.2.11' }

Undefined component inside the panel!

<SlidingUpPanel
          //draggableRange={{top:500, bottom:0}}
          ref={(ref) => this.slidingpanel = ref}
          showBackDrop={false}
          visible={this.state.visible}
          onRequestClose={() => this.setState({visible: false})}>
          
          <View style={styles.container}>
             
          <Text ref={(ref) => this.contenttext = ref} >Here is the content inside panel</Text>
         .......

onItemPress = () => {

alert(this.contenttext);

}

Hey, please add a prop allowing user swipe up to expand and swipe down to close, i mean do not allow slide to a position between and 0.

Is it possible to have it slide down from the top instead of sliding up from the bottom, maybe with a prop or something?

Hello, this issue can be fixed, deleting the statusBarHeight, you have a Math calc, that remove statusBarHeight from windowHeight and its causing this issue

May be, you need to let the user set the height of panel

Currently as in the bottom sheet demo you can't interact with anything beside the bottom sheet, as the styles.container is covering the whole page.

Is there a way to be able to interact with components lying behind it?

<SlidingUpPanel visible startCollapsed showBackdrop={false} ref={c => { this._panel = c; }} draggableRange={this.props.draggableRange} onDrag={v => this._draggedValue.setValue(v)} > <View style={styles.panel}> {this._renderFavoriteIcon()} <View style={styles.panelHeader}> <Text style={{ color: "#858585" }}>Header Content</Text> </View> <View style={styles.container}> <Text>Bottom Sheet Content</Text> </View> </View> </SlidingUpPanel>

@octopitus Can you help ?

Is there any way to add an animation for the header 'Bottom Sheet' while dragging the panel up to let the header disappear , and when dragging the panel down to see again the Header 'Bottom Sheet'
@octopitus

Thank you in advance

Any way to close panel with tapping on the backdrop - either as a prop or catching event programatically

The biggest issue here is that the user can swipe the panel down (but not completely closed) they might not realize it's there. Their first gesture afterwards is to tap on the screen like normal (the backdrop) and expect it to respond

Having a transitionTo(0) inside a onDragEnd function for example, if the allowMomentum is on true it will not work. Is this expected behavior? Im actually busy with work but if I dont forget about it I would like to take a look on it :D

Is there a chance to expose props like panResponder to allow more granular control over the momentum (bouncing) effect? Moreover, the bottom sheet does not seems to be able to snap back into its original place quickly if I want to close it.

I can't figure out how to have the panel render closed on load. Is this supported?

Hello, thanks for this excellent lib!

I wonder if its easy to modify your lib to work with a sliding form right to left, since the app Im working requires a behavior like that.
I can even do it and add a pull request to be an option to this lib.

Thanks

Hello,

I have inputs in my slider but when I press and the keyboard opens, the slider is not pushed up (So the field is hidden by the keyboard). Note that my menu and map of behind is well pushed.
How to change this behavior? thank you very much

Hi, Nice job.

I'm trying to use with react-native-router-flux but my tabbar disappear under this panel.

Do you have a solution?

Thk's

Hey, i'm using this panel just with a press to open and press to close (change visible to true and false).
My issue is with the animation.. on doing so.. it feels sluggish.. makes it look line it has really performance issues.. was expecting it to be smoother
Any tip to solve this? or even disable the animation..

<SlidingUpPanel visible={this.state.isPanelVisible} showBackdrop={false} height={height + 160} allowDragging={false}>

Does the content inside the panel affect this?

Hello, I've been trying to use this library, but the panel seems to come all the way to the top.
Is there a way to drag it only half way from the bottom?

Thanks!

put a scrollview in SlidingUpPanel may lead to gesture problem,how to solve this problem?
I need to put a FlatList in SlidingUpPanel!

I think we should be able to set points and allow it to snap to the closest when the user lets go.

Following the exact code snippet from the example, Cannot see anything inside my views

Is there any support for restricting dragging to a specific component? If not, could you point me in the right direction to implement one?

Thanks!

If you have a slider vertically above a tab bar, the content of the slider will be under the tab bar because the height of the slider is of the full device. The height of the slider should be the height of the container that it's in.

hello @octopitus
this module is very useful for many developers
but, it is hard to catch up what the changes are when you update version
I think if you write release notes, it can bring much benefits to many developers and also improvement of module

Hello, I wanted to know if there's a way to show the panel first as a preview and then when the user clicks on a button or drags it upwards to show the rest of it, like in this examples:

Or this one from your inspiration:

The application closes when I hit back button. I also defined the onRequestClose prop but the issue is still there.
onRequestClose={() => this._panel.transitionTo(this.props.draggableProps.bottom)}

I got this problem after install this lib (v1.1.9) on android
Ambiguous resolution: module '...\App.js' tries to require 'react-native', but there are several files providing this module. You can delete or fix them
I found a temp resolution, remove the react-native folder inside /node_modules/rn-sliding-up-panel/node_modules/
Please fix this problem

I want to have just the panel header (peek) be the only part of the panel that allows the user to slide the panel with. So the content portion of the panel would not move the panel when the user drags on it. This will allow the content portion to contain scroll lists without moving the panel.

Does this make sense? Thank you for any assistance.

This package is really great by the way, I almost have it behaving exactly as it should, just have this one last request.

Before opening the panel, all the elements in the same page works the way it's supposed to.
However, after opening and closing the panel, TextInputs and Buttons in the background are disabled and are not touchable.

I am trying to implement the demo example on the latest version of React-Native, but it seems like the component has some issues, mostly with drag handlers not working properly. Perf monitor shows also a lot of dropped frames while interacting with the panel. I know RN 0.51 made some changes in regards to layout dimensions computations, so this may be related?

The way we can drag the panel to bottom after it appears on the screen......can we do the same dragging by pulling the panel from bottom instead on tapping on "Show Panel". I want to implement vertical swiping kind of thing on android. Any help ?

A change where we will always have a small amount of the slider showing would be nice. If there was a way to animate between this collapsed view and the fully expanded view that would be cool too. Similar to how the Spotify or Apple Music music player works.

I am trying to implement sliding-up panel at the bottom of the screen and I found out that the backdrop opacity is darken.

My screenshort heres.

I would like to know is there any option to set opacity (or disable backdrop opacity).
This is my expectation.

thank you in advance.

In order to calculate transition to, it would be very useful to read the velocity of the drag event.

Trying to enable a ScrollView inside the sliding panel but can't get the PaneHandlers to disable dragging again after you reached the end...

constructor(props) {
        super(props);
        this.state = {
            drag: false,
        };
        this._panResponder = PanResponder.create({
            onMoveShouldSetPanResponder: (e, gestureState) => {
                this.setState({ drag: true });
                return true;
            },
            onPanResponderRelease: (e, gestureState) => this.setState({drag: false}),
            onPanResponderTerminate: (e, gestureState) => this.setState({drag: false}),
        });
    }

and inside the component i'm just setting the panHandlers to the scrollView

<SlidingUpPanel
    showBackdrop={false}
    ref={c => this._panel = c}
    height={300}
    allowDragging={this.state.drag}
    draggableRange={{top: height, bottom: height - 180}} 
    visible={true}>
        <View style={styles.container}>
            <ScrollView   {...this._panResponder.panHandlers}>
            ....
            </ScrollView>
</SlidingUpPanel>

So it works fine the first time you enter the View and scroll up and down but Release and Terminate responder isn't kicking in when you start scrolling again.

I have a ScollView inside sliding-up-panel, but It not show anything

Currently, when the prop showBackdrop is set to true, the panel can be dismissed by tapping on the backdrop. However, is there any way to know when that happens?

I know it can be opened through this._panelRef.transitionTo(n). where n is the position of the panel. Is there a way to do it the other way around so that it returns n at any given time? (And thus know if it is closed?)

Or maybe, is there a way to add an event listener (onPress) to the backdrop itself???

View is rendered but not draggable

Hello everyone, today I was implementing this SlidingUp Panel and everything seems to look pretty cool, but there's a little problem, when I touch a Input Text which is inside the panel, the keyboard overlaps the Input instead to push the layout above. Anyone faced this problem?

** I already tried to use KeyboardAvoidingView but no success.

Thank you.

Hi @octopitus!

Sorry, this is not an issue...

I'm Xavier and I’ve been working as a freelance React Native developer for more than 2 years.
I try to help community when I can: sharing my works on open-source, like you do!
But it's hard to be visible sometimes! Right?

I want to help developers to have more visibility.
So, I've created a website where developers can share with entire
world their React Native projects, components, apps...

This website allow developers to show their works and get feedback.
Just like a Dribbble but for React Native developers.

https://reactnative.gallery

When I set showBackdrop to true, the backdrop doesn't extend up over the navigation when using react-navigation. My guess is because the header is rendered at a higher level than the rest of the screen.

Is there a way around this? I'd like the backdrop to extend all the way like this.

Hey, so I am using the Bottom up slider as shown in the demo file. In my case the bottom up slider has two textboxes inside it, and I am doing my development for Android OS. Whenever, I press the textbox on the panel, it never goes up. I have made appropriate changes to my AndroidManifest.xml. Also, I have tried enclosing the sliding panel with a KeyboardAvodingView, however, it doesnt seem to be working.

From testing, when setting visible to true on initial creation <SlidingUpPanel visible={true}> ... </SlidingUpPanel> nothing gets rendered. Is this supported? Or does it always have to start of with visible={false}

When I set the draggableRange and hit the bottom limit the whole slider view just disappears. The code I'm using is the code provided in the example but with the added prop:

const range = {top: 500, bottom: 400}

draggableRange={range}

I have a map and a scrollview. If I make the sliding view draggable then I can not move the scrollview. It would be useful to make only a certain area draggable, in order not to prevent scrollview operation.

Working fine on iOS, but not showing up on Android.

Package.json:

"dependencies": {
    "axios": "^0.18.0",
    "dezalgo": "^1.0.3",
    "expo": "^27.0.1",
    "firebase": "^4.12.1",
    "geolib": "^2.0.24",
    "lodash": "^4.17.5",
    "native-base": "^2.3.10",
    "npm": "^4.6.1",
    "qs": "^6.5.1",
    "react": "16.3.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
    "react-native-LoopAnimation": "^0.1.0",
    "react-native-animatable": "^1.3.0",
    "react-native-background-fetch": "^2.4.2",
    "react-native-background-geolocation": "^2.12.0-beta.4",
    "react-native-fcm": "^15.0.2",
    "react-native-image-progress": "^1.1.0",
    "react-native-page-control": "^1.1.1",
    "react-navigation": "^2.0.1",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-persist": "^5.7.2",
    "redux-thunk": "^2.2.0",
    "rn-sliding-up-panel": "^1.2.0"

The content is fired, and If showBackdrop is true, entire screen will me blacked out, once visible = true, but panel itself does not appear.

<View style={{flex: 1}}> <MapView style={{flex: 1}} onRegionChangeComplete={this.onRegionChangeComplete} showsUserLocation={true} userLocationAnnotationTitle="" loadingEnabled={true} onPress={this._onMapPress} cacheEnabled={Platform.OS === 'android' ? true : false}> </MapView> <SlidingUpPanel visible={this.state.visible} allowDragging={false} draggableRange={{ top: sliderTop, bottom:0 }} showBackdrop={false} onRequestClose={() => this.setState({visible: false})}> <View style={{flex:1, backgroundColor: 'white'}}></View> </SlidingUpPanel> </View>