@@ -2,7 +2,6 @@ import * as React from 'react';
22import {
33 StyleSheet ,
44 View ,
5- ScrollView ,
65 StyleProp ,
76 ViewStyle ,
87 TextStyle ,
@@ -139,7 +138,7 @@ export default class TabBar<T extends Route> extends React.Component<
139138
140139 private scrollAmount = new Animated . Value ( 0 ) ;
141140
142- private scrollView : ScrollView | undefined ;
141+ private scrollViewRef = React . createRef < Animated . ScrollView > ( ) ;
143142
144143 private cancelNextFrameCb : ( ( ) => void ) | undefined = undefined ;
145144
@@ -270,11 +269,18 @@ export default class TabBar<T extends Route> extends React.Component<
270269
271270 private resetScroll = ( index : number ) => {
272271 if ( this . props . scrollEnabled ) {
273- this . scrollView &&
274- this . scrollView . scrollTo ( {
275- x : this . getScrollAmount ( this . props , this . state , index ) ,
276- animated : true ,
277- } ) ;
272+ // getNode() is not necessary in newer versions of React Native
273+ const scrollView =
274+ // @ts -ignore
275+ typeof this . scrollViewRef . current ?. scrollTo === 'function'
276+ ? this . scrollViewRef . current
277+ : this . scrollViewRef . current ?. getNode ( ) ;
278+
279+ // @ts -ignore
280+ scrollView ?. scrollTo ( {
281+ x : this . getScrollAmount ( this . props , this . state , index ) ,
282+ animated : true ,
283+ } ) ;
278284 }
279285 } ;
280286
@@ -413,10 +419,7 @@ export default class TabBar<T extends Route> extends React.Component<
413419 } ,
414420 } ,
415421 ] ) }
416- ref = { ( el ) => {
417- // @ts -ignore
418- this . scrollView = el ?. getNode ( ) ;
419- } }
422+ ref = { this . scrollViewRef }
420423 >
421424 { routes . map ( ( route : T ) => {
422425 const props : TabBarItemProps < T > & { key : string } = {
0 commit comments