Drag up a ScrollView then continue scroll in React Native
What I want (GIF)
Here is a (quality-reduced) GIF about what I'm want to achieve.
What I want (Text)
I have a scrollview, that is positioned at the half of my screen.
What I want is to drag that scrollview up, and then, when it reaches a certain position, send the drag touch event to scrollview itself, so it can continue scrolling.
My tries
- Put the scrollview in fullscreen in foreground, and add a half-screen padding-top to its
contentContainerStyle. It worked well, but I couldn't click the view behind it. Is there a way to click through the empty area of a scrollview?
I also tried to detect the scroll position, in order to move the view up accordingly
<ScrollView onScroll={event => moveScrollViewUpIfNeeded(event)}>
...
</ScrollView>
but didn't work when I tested it out on iOS simulator. Event is not even fired. React Native Docs states that
onScrollneedsscrollEventThrottleto work. However,scrollEventThrottleis only available on iOS. And in my case, I want it on Android too.
And If I successfully achieve this, I should face another UI problem: When dragging the ScrollView up, how can I prevent it to scroll when the view is not yet at the wanted position?
So, can you give me some tips to achieve this please :) ?
Thank you,
react-native react-native-scrollview
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
add a comment |
What I want (GIF)
Here is a (quality-reduced) GIF about what I'm want to achieve.
What I want (Text)
I have a scrollview, that is positioned at the half of my screen.
What I want is to drag that scrollview up, and then, when it reaches a certain position, send the drag touch event to scrollview itself, so it can continue scrolling.
My tries
- Put the scrollview in fullscreen in foreground, and add a half-screen padding-top to its
contentContainerStyle. It worked well, but I couldn't click the view behind it. Is there a way to click through the empty area of a scrollview?
I also tried to detect the scroll position, in order to move the view up accordingly
<ScrollView onScroll={event => moveScrollViewUpIfNeeded(event)}>
...
</ScrollView>
but didn't work when I tested it out on iOS simulator. Event is not even fired. React Native Docs states that
onScrollneedsscrollEventThrottleto work. However,scrollEventThrottleis only available on iOS. And in my case, I want it on Android too.
And If I successfully achieve this, I should face another UI problem: When dragging the ScrollView up, how can I prevent it to scroll when the view is not yet at the wanted position?
So, can you give me some tips to achieve this please :) ?
Thank you,
react-native react-native-scrollview
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
How about conditional rendering? you wrap your content in a<View />first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a<ScrollView />instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.
– romin21
Nov 28 '18 at 16:43
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23
add a comment |
What I want (GIF)
Here is a (quality-reduced) GIF about what I'm want to achieve.
What I want (Text)
I have a scrollview, that is positioned at the half of my screen.
What I want is to drag that scrollview up, and then, when it reaches a certain position, send the drag touch event to scrollview itself, so it can continue scrolling.
My tries
- Put the scrollview in fullscreen in foreground, and add a half-screen padding-top to its
contentContainerStyle. It worked well, but I couldn't click the view behind it. Is there a way to click through the empty area of a scrollview?
I also tried to detect the scroll position, in order to move the view up accordingly
<ScrollView onScroll={event => moveScrollViewUpIfNeeded(event)}>
...
</ScrollView>
but didn't work when I tested it out on iOS simulator. Event is not even fired. React Native Docs states that
onScrollneedsscrollEventThrottleto work. However,scrollEventThrottleis only available on iOS. And in my case, I want it on Android too.
And If I successfully achieve this, I should face another UI problem: When dragging the ScrollView up, how can I prevent it to scroll when the view is not yet at the wanted position?
So, can you give me some tips to achieve this please :) ?
Thank you,
react-native react-native-scrollview
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
What I want (GIF)
Here is a (quality-reduced) GIF about what I'm want to achieve.
What I want (Text)
I have a scrollview, that is positioned at the half of my screen.
What I want is to drag that scrollview up, and then, when it reaches a certain position, send the drag touch event to scrollview itself, so it can continue scrolling.
My tries
- Put the scrollview in fullscreen in foreground, and add a half-screen padding-top to its
contentContainerStyle. It worked well, but I couldn't click the view behind it. Is there a way to click through the empty area of a scrollview?
I also tried to detect the scroll position, in order to move the view up accordingly
<ScrollView onScroll={event => moveScrollViewUpIfNeeded(event)}>
...
</ScrollView>
but didn't work when I tested it out on iOS simulator. Event is not even fired. React Native Docs states that
onScrollneedsscrollEventThrottleto work. However,scrollEventThrottleis only available on iOS. And in my case, I want it on Android too.
And If I successfully achieve this, I should face another UI problem: When dragging the ScrollView up, how can I prevent it to scroll when the view is not yet at the wanted position?
So, can you give me some tips to achieve this please :) ?
Thank you,
react-native react-native-scrollview
react-native react-native-scrollview
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
asked Nov 28 '18 at 16:05
DavidDavid
2,30432142
2,30432142
How about conditional rendering? you wrap your content in a<View />first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a<ScrollView />instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.
– romin21
Nov 28 '18 at 16:43
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23
add a comment |
How about conditional rendering? you wrap your content in a<View />first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a<ScrollView />instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.
– romin21
Nov 28 '18 at 16:43
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23
How about conditional rendering? you wrap your content in a
<View /> first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a <ScrollView /> instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.– romin21
Nov 28 '18 at 16:43
How about conditional rendering? you wrap your content in a
<View /> first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a <ScrollView /> instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.– romin21
Nov 28 '18 at 16:43
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523595%2fdrag-up-a-scrollview-then-continue-scroll-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53523595%2fdrag-up-a-scrollview-then-continue-scroll-in-react-native%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How about conditional rendering? you wrap your content in a
<View />first and you make it's position absolute. When dragging, you detect if it has gotten the full screen space. Then, you render your content but inside a<ScrollView />instead, to have scrolling capability. Since padding is not involved in this solution, you can click the content behind as long as the view you're dragging hasn't taken up the whole screen height.– romin21
Nov 28 '18 at 16:43
Hey David. Did you end up resolving your issue? I am facing the same challenge right now. Link to my question: stackoverflow.com/questions/55082289/…
– Gilbert Nwaiwu
Mar 10 at 10:23