react-native-vietnam / react-native-swipe-up-down Goto Github PK
View Code? Open in Web Editor NEWSwipe component
License: MIT License
Swipe component
License: MIT License
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?
The component works fine, but when I swipe down to close the component, nothing happens
Hi Hi can I use it to dran/hide from top not only from bottom?
@agiletechvn, @minhchienwikipedia :
Hi, congratulations on the project. It would be possible to have an example with graphics similar to this:
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);
};
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",
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
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.
Can we add a ScrollView into your SwipeUpDown view ?
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
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.
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'.
Can we change the swipe icon color? ๐ I want to have the background white so the icon has to be some other color...
How to change color backdrop?
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?
hi
ScrollView is not work, i tried it with TouchableWithoutFeedback but its not work
In my component I can't access the showMini function from the 'swipeUpDown' ref.
./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,
This is my code
<SwipeUpDown
swipeHeight={20}
hasRef={ref => (this.swipeUpDownRef = ref)}
itemFull={<Destination />}
disablePressToShow={false}
style={{ zIndex: 10, backgroundColor: '#a3a3a3'' }}
animation="easeInEaseOut"
/>
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.
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.