TabController: WARN message from Reanimated

[andywan]

Description

When using TabController in React Native project, it always show a WARN message:

(NOBRIDGE) WARN  [Reanimated] Reading from `value` during component render. Please ensure that you do not access the `value` property or use `get` method of a shared value while React is rendering a component.

If you don't want to see this message, you can disable the `strict` mode. Refer to:
https://docs.swmansion.com/react-native-reanimated/docs/debugging/logger-configuration for more details.

Related to

• Components
• Demo
• Docs
• Typings

Steps to reproduce

1. Copy the code to a React Native page.
2. Run "npx expo start" and load the page.
3. You will see the WARN message showing on the terminal window of VSCode.

Expected behavior

No error or warning messages.

Actual behavior

The WARN message is showing.

More Info

Code snippet

<TabController items={[{label: 'page 1'}, {label: 'page 2'}]} >
    <TabController.TabBar  />
    <TabController.TabPage index={0}><Text>pagee 1</Text>
    </TabController.TabPage>
    <TabController.TabPage index={1}><Text>page 2</Text>
    </TabController.TabPage>
</TabController>

Environment

• React Native version: ^0.76.9
• React Native UI Lib version: ^7.40.1
• react-native-reanimated version: ~3.16.1

Affected platforms

• Android
• iOS
• Web

[cinzianicoletti]

Same with: React Native UI Lib version: ^7.46.1

The problem is there:
src/components/tabController/TabBar.tsx

[Reanimated] Reading from value during component render. Please ensure that you don't access the value property nor use get method of a shared value while React is rendering a component.