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

Javascript — Create a simple server with Express

Math in Unity : Cross Product (Part II)

How to Structure your React Projects

Usecase of Javascript

How to integrate the Google map support in Azure Bot Service / Luis

Creating your first VS Code Extension

Hooked on React

Dirty secrets on dependency injection and Angular — part 2

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

Using Expo and Realm with expo-dev-client

Realm & Expo Logos

How to add FB SDK in react-native project

Creating pagination in react-native

React native pagination in FlatList

How to Improve the Performance of a React Native Application