Hi, i found that the swipe up-down component always stay on the above of the layout when first render.
Like this:

After dragging from top, only it will trigger to expected behaviour which is at bottom of a layout
Expected behaviour:

Any solution to force the component stay at bottom of the layout during first render?

How do i change the height of my itemFull and itemMini

@agiletechvn, @minhchienwikipedia :
Hi, congratulations on the project. It would be possible to have an example with graphics similar to this:

Can we add a ScrollView into your SwipeUpDown view ?

• itemMini: when adding a component inside itemmini, the content of the component is also showing up on the header area of the app.
  

• disablePressToShow: Setting disablePressToShow to true or false doesn't seem to work. I would expect to only be able to pull up when set to true but tabing the miniItem will bring the full.

according facebook/react-native#3082 at meznaric's comment
above is handled w/ below code at example/App.js

at componentWillMount 56 line
onMoveShouldSetPanResponder: this._onMoveShouldSetPanResponder,

declare function as
_onMoveShouldSetPanResponder = (event, gestureState) => {
console.log('_onMoveShouldSetPanResponder', gestureState.dx, gestureState.dy);
return !(Math.abs(gestureState.dx) < 5 && Math.abs(gestureState.dy) < 5);
};

I try add a touch response inside itemFull, but it is not response. Below is my code :
<SwipeUpDown
itemMini={Header}
itemFull={()=><TouchableOpacity onPress={()=>alert("test")}>Click Me}
animation="easeInEaseOut"
disableSwipeIcon={true}
iconColor='yellow'
iconSize={30}
style={{ backgroundColor: 'red',zIndex:0 }} // style for swipe
/>
it look like is issue on PanResponder. anyone face this issue also?

How to change color backdrop?

Hi Hi can I use it to dran/hide from top not only from bottom?

./node_modules/react-native-swipe-up-down/src/index.js
SyntaxError: C:\Users\dtyus\WebstormProjects\untitled\my_mini_app\node_modules\react-native-swipe-up-down\src\index.js: Unexpected token, expected ";" (18:
5)

16 | const MARGIN_TOP = Platform.OS === 'ios' ? 20 : 0;
17 | const DEVICE_HEIGHT = Dimensions.get('window').height - MARGIN_TOP;

18 | type Props = {
| ^
19 | hasRef?: () => void,
20 | swipeHeight?: number,
21 | itemMini?: object,

I'm using in the notch phone,if i disable notch then also I'm getting space at the bottom in itemMini.can you check what is the exact problem.I'm using this example.

if i change the value in showMini function of this.customStyle.style.top = itemMini ? DEVICE_HEIGHT - this.SWIPE_HEIGHT : DEVICE_HEIGHT; to this.customStyle.style.top = 0 it working fine in notch phone(without notch option) but not in normal screen phones.

log:

PS F:\github\frontend> npm install react-native-swipe-up-down
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: frontend@1.0.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"18.0.0" from react-native@0.69.3
npm ERR! node_modules/react-native
npm ERR!   peer react-native@">=0.41.2" from react-native-swipe-up-down@1.2.0
npm ERR!   node_modules/react-native-swipe-up-down
npm ERR!     react-native-swipe-up-down@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See B:\User\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     B:\User\npm-cache\_logs\2022-07-28T23_42_51_897Z-debug-0.log

deps:

"animate.css": "^4.1.1",
"axios": "^0.27.2",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^4.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"react-select": "^5.4.0",

The component works fine, but when I swipe down to close the component, nothing happens

hi
ScrollView is not work, i tried it with TouchableWithoutFeedback but its not work

Hey in the usage section is showed this code:

import SwipeUpDown from 'react-native-swipe-up-down';
 
// TODO: What to do with the module?
<SwipeUpDown		
    itemMini={<ItemMini />} // Pass props component when collapsed
    itemFull={<ItemFull />} // Pass props component when show full
    onShowMini={() => console.log('mini')}
    onShowFull={() => console.log('full')}
    onMoveDown={() => console.log('down')}
    onMoveUp={() => console.log('up')}
    disablePressToShow={false} // Press item mini to show full
    style={{ backgroundColor: 'green' }} // style for swipe
/>

And there are options: onMoveDown and onMoveUp, but i didn't found this coded options in your repositorium, and when i swiping up and down i dont get logs 'up' and 'down'.

Hello, im facing an issue when trying to open the swipe up using showFull().
The component does not have a ref prop (because it is exported as a function) so i can't get an instance of it to call showFull().
Can anyone help me?

after i npm install this component, i have noticed that index.js was written in typescript way, but the file remains in .js which causes the typescript erorr. I have manually change the .js to .ts file, would it be official release as a typescript component?

I am developing a music player with this awesome plugin but facing some issues. There is one view for playing audio but here I have to put two views so I put the same views into itemMini and itemFull and It works great. But while opening up the views it refreshes the two views and my music started freshly and there is maybe an overlay to capture gesture event so my pause play buttons are not working. Some more problem I am facing... While debugging mode this component is lagging and not responding after a few moments it's started working smoothly and one more question is there any property to delay the animation while opening up and closing down the view?
Thank You,
Ajoy Karmakar

Can we change the swipe icon color? 🙂 I want to have the background white so the icon has to be some other color...

ScrollView within itemFull, does not respond i.e. scroll gesture does not work as expected and itemMini is shown. Would it be possible to pass a prop to itemFull which allows gestures in children of itemFull? I've had a look at this known issue , not sure how well it can help.

In my component I can't access the showMini function from the 'swipeUpDown' ref.

This is my code

<SwipeUpDown
  swipeHeight={20}
  hasRef={ref => (this.swipeUpDownRef = ref)}
  itemFull={<Destination />}
  disablePressToShow={false}
  style={{ zIndex: 10, backgroundColor: '#a3a3a3'' }}
   animation="easeInEaseOut"
/>

Step 1: Swipe Up

When i try to swipe down, the content/component gets hidden and displays only the background color.

What I'm trying to achieve ?
Component shouldn't hide on swipe down.

i would like to know when its swiped up , how to limit the height not to the entire screen but only a limited height(from the bottm to HEIGHT)

thank you