android - Laggy animations (tab bar/pager) with react-native -

i have quite typical problem of laggy animations during component rendering. however, far understand, common solutions found in documentation of react-native cannot applied use case.

let me explain: have tab pager implemented (i) viewpagerandroid containing set of pages , (ii) tab bar composed of set of touchables , line (animated.view) moves (translatex transform) when pager x-scroll value changes.

each page component follows same logic:

• when componentdidmount called, triggers network call loading data
• once data loaded, state updated new data , component rerendered
• the render method returns flatlist displays loaded data (20 items only)

my problem is: if user clicks on tab while pages rendered, animations horribly laggy. given animation , rerendering performed on ui thread, i'm guessing competing in way.

i eliminated various causes, wasn't able find proper solution keep animation fluid:

• i replaced network call hardcoded data , simple timeout; ui still laggy when pages rerendered
• i tried improve rerendering time, flatlist quite slow using pure components.
• i tried in release mode , there no differences
• the problem occurs on physical device (nexus 5x, quite powerful)
• it's not specific implementation, tried github.com/skv-headless/react-native-scrollable-tab-view , github.com/zbtang/react-native-viewpager
• i know interactionmanager , timermixin.requestanimationframe, it's useless in case: when rendering started, user can still click on tab bar buttons , it's not option wait end of render (laggy).

i uploaded code in github repository (https://github.com/benjaminbillet/tabbartest), in case want have more details. it's quite straightforward, don't hesitate ask me more details.

some additional information:

• react-native 0.46.4
• node 8.2.0
• npm 5.3.0
• tried on android.

do think should fill bug report?

thanks lot.

edit-1 here simplified version of animation code:

render() {   const underlinestyle = {     position: 'absolute',     left: 0,     bottom: 0,     width: this.tabwidth,     height: underlineheight,     backgroundcolor: underlinecolor,     transform: [{       translatex: this.pagerscrollx.interpolate({         inputrange: [0, 1],         outputrange: [0, this.tabwidth],       }),     }],   };    return (     <view style={[styles.tabs, style]}>       ...       <animated.view style={underlinestyle} />     </view>   ); }  onpagescroll(offset) {   const { offset, position } = e.nativeevent;   this.pagerscrollx.setvalue(position + offset); }