React Native. Best way for scroll to element inside ScrollView
0
I have scroll view with some component.
<ScrollView ref={ref => this.contentRef = ref}>
<SomeComponent ref={ref => this.targetRef = ref}
</ScrollView>
What is the best way for scroll to SomeComponent but limit to ScrollView height?
My try:
if (this.contentRef && this.targetRef) {
const UIManager = NativeModules.UIManager;
UIManager.measure(findNodeHandle(this.contentRef), (contentX, contentY, contentW, contentH) => {
UIManager.measure(findNodeHandle(this.targetRef), (activeStepX, activeStepY) => {
const h = Dimensions.get('window').height;
if (activeStepY > contentH / 2) {
this.contentRef.scrollTo({ x: 0, y: h, animated });
} else {
this.contentRef.scrollTo({ x: 0, y: contentH, animated });
};
});
});
};
But if target very close to screen bottom, I have empty space on bottom (sorry, I need to hide any information).
But should to look like
react-native
asked Nov 16 '18 at 16:18
indapublic
1,11652341
add a comment |
0
I have scroll view with some component.
<ScrollView ref={ref => this.contentRef = ref}>
<SomeComponent ref={ref => this.targetRef = ref}
</ScrollView>
What is the best way for scroll to SomeComponent but limit to ScrollView height?
My try:
if (this.contentRef && this.targetRef) {
const UIManager = NativeModules.UIManager;
UIManager.measure(findNodeHandle(this.contentRef), (contentX, contentY, contentW, contentH) => {
UIManager.measure(findNodeHandle(this.targetRef), (activeStepX, activeStepY) => {
const h = Dimensions.get('window').height;
if (activeStepY > contentH / 2) {
this.contentRef.scrollTo({ x: 0, y: h, animated });
} else {
this.contentRef.scrollTo({ x: 0, y: contentH, animated });
};
});
});
};
But if target very close to screen bottom, I have empty space on bottom (sorry, I need to hide any information).
But should to look like
react-native
asked Nov 16 '18 at 16:18
indapublic
1,11652341
add a comment |
0
0
0
I have scroll view with some component.
<ScrollView ref={ref => this.contentRef = ref}>
<SomeComponent ref={ref => this.targetRef = ref}
</ScrollView>
What is the best way for scroll to SomeComponent but limit to ScrollView height?
My try:
if (this.contentRef && this.targetRef) {
const UIManager = NativeModules.UIManager;
UIManager.measure(findNodeHandle(this.contentRef), (contentX, contentY, contentW, contentH) => {
UIManager.measure(findNodeHandle(this.targetRef), (activeStepX, activeStepY) => {
const h = Dimensions.get('window').height;
if (activeStepY > contentH / 2) {
this.contentRef.scrollTo({ x: 0, y: h, animated });
} else {
this.contentRef.scrollTo({ x: 0, y: contentH, animated });
};
});
});
};
But if target very close to screen bottom, I have empty space on bottom (sorry, I need to hide any information).
But should to look like
react-native
asked Nov 16 '18 at 16:18
indapublic
1,11652341
I have scroll view with some component.
<ScrollView ref={ref => this.contentRef = ref}>
<SomeComponent ref={ref => this.targetRef = ref}
</ScrollView>
What is the best way for scroll to SomeComponent but limit to ScrollView height?
My try:
if (this.contentRef && this.targetRef) {
const UIManager = NativeModules.UIManager;
UIManager.measure(findNodeHandle(this.contentRef), (contentX, contentY, contentW, contentH) => {
UIManager.measure(findNodeHandle(this.targetRef), (activeStepX, activeStepY) => {
const h = Dimensions.get('window').height;
if (activeStepY > contentH / 2) {
this.contentRef.scrollTo({ x: 0, y: h, animated });
} else {
this.contentRef.scrollTo({ x: 0, y: contentH, animated });
};
});
});
};
But if target very close to screen bottom, I have empty space on bottom (sorry, I need to hide any information).
But should to look like
react-native
react-native
asked Nov 16 '18 at 16:18
indapublic
1,11652341
asked Nov 16 '18 at 16:18
indapublic
1,11652341
asked Nov 16 '18 at 16:18
indapublic
1,11652341
asked Nov 16 '18 at 16:18
indapublic
1,11652341
asked Nov 16 '18 at 16:18
indapublic
1,11652341
1,11652341
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
Something like using onLayout method
https://facebook.github.io/react-native/docs/view#onlayout
e.g
<ScrollView>
<YourComponent onLayout={this.onLayout()} />
</ScrollView>
onLayout(e) {
return e.nativeEvent.layout.h // e.g would be the height of your scroll view
}
answered Nov 16 '18 at 16:40
wijuwiju
764
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return tonormalview
– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
|
show 2 more comments
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
});
}
});
draft saved
draft discarded
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%2f53341715%2freact-native-best-way-for-scroll-to-element-inside-scrollview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Something like using onLayout method
https://facebook.github.io/react-native/docs/view#onlayout
e.g
<ScrollView>
<YourComponent onLayout={this.onLayout()} />
</ScrollView>
onLayout(e) {
return e.nativeEvent.layout.h // e.g would be the height of your scroll view
}
answered Nov 16 '18 at 16:40
wijuwiju
764
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return tonormalview
– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
|
show 2 more comments
1
Something like using onLayout method
https://facebook.github.io/react-native/docs/view#onlayout
e.g
<ScrollView>
<YourComponent onLayout={this.onLayout()} />
</ScrollView>
onLayout(e) {
return e.nativeEvent.layout.h // e.g would be the height of your scroll view
}
answered Nov 16 '18 at 16:40
wijuwiju
764
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return tonormalview
– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
|
show 2 more comments
1
1
1
Something like using onLayout method
https://facebook.github.io/react-native/docs/view#onlayout
e.g
<ScrollView>
<YourComponent onLayout={this.onLayout()} />
</ScrollView>
onLayout(e) {
return e.nativeEvent.layout.h // e.g would be the height of your scroll view
}
answered Nov 16 '18 at 16:40
wijuwiju
764
Something like using onLayout method
https://facebook.github.io/react-native/docs/view#onlayout
e.g
<ScrollView>
<YourComponent onLayout={this.onLayout()} />
</ScrollView>
onLayout(e) {
return e.nativeEvent.layout.h // e.g would be the height of your scroll view
}
answered Nov 16 '18 at 16:40
wijuwiju
764
answered Nov 16 '18 at 16:40
wijuwiju
764
answered Nov 16 '18 at 16:40
wijuwiju
764
answered Nov 16 '18 at 16:40
wijuwiju
764
764
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return tonormalview
– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
|
show 2 more comments
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return tonormalview
– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
I still receive empty area below after I scrolled
– indapublic
Nov 18 '18 at 5:12
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
maybe try setting contentContainerStyle prop of ScrollView to {{ flex: 1 }} or {{ height: Dimensions.get("window").height }} or giving Your component some bottomPadding stylying, because ScrollView's prop overScrollMode is already set to 'auto' which allow a user to over-scroll the view only if the content is large enough to meaningfully scroll. hope these pointers could help helps
– wijuwiju
Nov 19 '18 at 7:29
Tried already - no difference. If I scroll by hand - scroll view will return to
normal view– indapublic
Nov 19 '18 at 7:36
Tried already - no difference. If I scroll by hand - scroll view will return to
normal view– indapublic
Nov 19 '18 at 7:36
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
@indapublic hey, did you manage to solve the problem in the end?
– wijuwiju
Nov 27 '18 at 18:19
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
nope behavior still exists
– indapublic
Nov 27 '18 at 23:36
|
show 2 more comments
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53341715%2freact-native-best-way-for-scroll-to-element-inside-scrollview%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
