How to deep link in React Native pt.2 — Scroll to Element

Flat List

<FlatList
ref={ref => {
this.flatListRef = ref;
}}
// … other props …
/>
this.flatListRef.scrollToIndex({
animated: true,
index: itemIndex,
});
onScrollToIndexFailed={error => { this.flatListRef.scrollToOffset({
offset: error.averageItemLength * error.index,
animated: true,
});
setTimeout(() => {
if (this.flatListRef !== null) {
this.flatListRef.scrollToIndex({
index: error.index,
animated: true,
});
}
}, 100);
}}

Scroll View

<ScrollView
ref={ref => {
this.scrollViewRef = ref;
}}
// ...
>
this.scrollViewRef.scrollTo({
animated: true,
y: viewY,
});
<View
onLayout={event => {
const { layout } = event.nativeEvent;
console.log(‘height:’, layout.height);
console.log(‘width:’, layout.width);
console.log(‘x:’, layout.x);
console.log(‘y:’, layout.y);
}}
>

Pairing it with deep linking

const { commentId } = this.props.navigation.state.params;const commentIndex = commentsArr.findIndex(c => c.id === commentId);
Deep-linking/autoscrolling combo in action

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Adding TypeScript Support to Quasar

Enhance your UI with D3.js

Functional Redux — No More Switch Statements

Becoming more reactive with RxJS flatMap and switchMap

Deploy React App to AWS Amplify

Remove Duplicates from Sorted Array

Building exciting lightning-fast Web Apps | The Why and How Guide to PWA in India

Creating React Component Library and testing it locally

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Natko Biscan

Natko Biscan

More from Medium

React Native Development In Healthcare -Benefits, and Importance

Crash! Crash! Crash! Integration of Huawei Crash Kit in Application using React Native.

Let’s Create a Web Application Using React JS in 20 Minutes. No Need for a 10 Hour Video — Part 1

PERFORMANCE COMPARISON OF IONIC VS REACT NATIVE | SSTech System