I have an application with 3 tabs, what I want to achieve is that the floating button icon changes when changing tab

For that I have the onChangeTab function and the changeState, but I can't get it out. Now when executing I get

Can't find variable: index

The library I'm using is react native scrollable tab view, can someone help me??

Thanks!!

    export default class App extends Component{

      changeState =(i, ref) => {
        this.setState({index : i})
      }
 
      render() {
   
       return(
       
      <View style={styles.contentContainer}>
       <ScrollableTabView
       tabBarUnderlineIcon="#fff"
       tabBarUnderlineStyle={{backgroundColor: "#fff"}}
       tabBarActiveTextColor="#fff"
       tabBarInactiveTextColor="#ddd"
       tabBarBackgroundColor="#075e54"
       onChangeTab={({i,ref}) => this.changeState(i,ref)}
      >
       <Chats tabLabel="CHATS" />
       <States tabLabel="STATES" />
       <Calls tabLabel="CALLS" />
           
     </ScrollableTabView>
     </View>
     <ActionButton buttonColor="#075e54"
       icon={<Icon name={index === 1 ? 'chat' : index === 2 ? 'call' : 'photo-camera'}></Icon>}
     />
   </View>
   )
 }
}