fix: BottomNavigation clickthrough in tabs

[jasperro]

Fixes #2366

Summary

Fixes #2366 by replacing rendering tab on first load to rendering tab on first load and only when tab is focused.

Test plan

Test this in an app that contains buttons in multiple tabs, check if you can click the buttons and they don't click through.
yarn && yarn prepare
cp {babel.js,lib,LICENSE.md,package.json,README.md,src} ~/MyProject/node_modules/react-native-paper -rf

[callstack-bot]

Hey @jasperro, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

[Trancever]

@jasperro Could you provide a repo/snack that reproduces the issue?

[this-fifo]

I've included a snack that reproduces the issue on #2366

[jasperro]

@Trancever I've made a snack too that also shows issue #2366 at https://snack.expo.io/AMAgczEzZ

Reproduction steps: Click fab (should show button 1 pressed), switch to Two and click fab (should show button 2 pressed), switch back, click the button again and it will show button 2 pressed instead of button 1.

[jasperro]

@Trancever could you please look at this again, I just updated the branch to update it to the new changes in the repository. The issue still persists in the latest 4.7.1, and this commit fixes it. I would like my application to be functioning correctly on the web. The commit just uses the already-existing "focused" attribute that the rest of the code uses. I tested it in my own application and the branch works (with yarn link), @this-fifo, @paour could you test if it still works for you?

It seems the pull request is broken (due to rename of master to main?), I made a new pull request: #2548