How can a tab determine if it is the focused tab?

[macsj200]

I need to determine if a tab is the active tab like in this stackoverflow post.

My understanding is that all tabs are rendered by default. This means that even if a tab isn't the current active tab it will still be rendered (unless you use the lazy prop).

I do not want to lazily load the tabs. I do want to be able to easily determine from an arbitrarily nested child component if it is being rendered on the active tab.

import * as React from 'react'
import { View, useWindowDimensions, Text } from 'react-native'
import { TabView, SceneMap } from 'react-native-tab-view'

const FirstRoute = () => (
  <View style={{ flex: 1, backgroundColor: '#ff4081' }} />
)

const SecondRoute = () => {
  const isActiveTab = false // TODO determine if active tab or not
  return (
    <View style={{ flex: 1, backgroundColor: '#673ab7' }}>
      <Text>{isActiveTab}</Text>
    </View>
  )
}

const renderScene = SceneMap({
  first: FirstRoute,
  second: SecondRoute,
})

export default function TabViewExample() {
  const layout = useWindowDimensions()

  const [index, setIndex] = React.useState(0)
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ])

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
    />
  )
}

Desired API example (`isActiveTab`)

Is there an API similar to the React Navigation useIsFocused() hook?

If not, I was planning on just adding some context that exposes the index state variable to arbitrarily nested children. Alternatively, I could use "prop drilling" to pass the index prop down the tree. I would like to avoid prop drilling if possible.

Are there any performance considerations to be aware of using these approaches? For example, I don't want every tab change to re-render the entire tree. Does anybody have any suggestions for memoization?

[Bimbimz]

in renderScene
return <FirstRoute index={index} />;

const FirstRoute = ({ index }) => { console.log(index); }