CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-navigation-stackreact-navigation-bottom-tab
Waheed Akhtar
Waheed Akhtar

Reputation: 3187

Lazy Load specific tab with React-Navigation v4

I am using React-Navigation V4 and the question is, Is there any way of lazy load only specific tab like if i have four tabs and i want to load two tabs after initialisation of tabs component and don't want to load other two these two only will load when user activates them. if i use lazy: true in React it'll work work all tabs or either lazy load will be disabled for all or enable for all.

Upvotes: 4

Views: 1294

Answers (1)

Ehsan Sarshar
Ehsan Sarshar

Reputation: 3211

Unfortunately there is not such a thing in react navigation v4. but if you want to achieve performance you can use other methods to kind of lazy load part of screen.

const TabPage = (props) => {
  const [renderHeavy, setRender] = useState(false)

  useEffect(() => {
      InteractionManager.runAfterInteraction(() => setRender(true))
  }, [])

  return (
      <View style={styles.body}>
          {
              renderHeavy &&
              <HeavyComponent />
          }
          <AnotherComponent />
      </View>
  )
 }

Upvotes: 1

Related Questions