React-native-tab-view: Can't perform a React state update when adding a second scene to SceneMap

Created on 17 Jun 2020 · 8Comments · Source: satya164/react-native-tab-view

Current behaviour

I get a warning Can't perform a React state update... when adding a second scene to SceneMap. If I only have one property in the SceneMap, the error doesn't appear. I have reduced my components down to <Text>s and the warning still appears.

Expected behaviour

Not to see the warning.

Code sample

https://snack.expo.io/votgR9yPg

Screenshots (if applicable)

Screenshot 2020-06-16 at 23 42 42

What have you tried

Replaced my original components with <Text>s hoping that would help me debug where the bug was. Did not expect to see the warning when i was only rendering a <Text> as the tab component.

Your Environment

| software | version
| ---------------------------- | -------
| ios or android | ios simulator
| react-native | 0.62.0
| react-native-tab-view | 2.14.4
| react-native-gesture-handler | 1.5.2
| react-native-reanimated | 1.7.1
| node | 12.18.0 (Mac)
| npm or yarn | npm

bug

Source

zaarheed

Most helpful comment

I replaced my code with the example in the README, and I still get the warning.

import * as React from "react";
import { Dimensions, StyleSheet, Text, View } from "react-native";
import { SceneMap, TabView } from "react-native-tab-view";

const FirstRoute = () => <Text>One</Text>;

const SecondRoute = () => <Text>Two</Text>;

const initialLayout = { width: Dimensions.get("window").width };

export default function Tabs() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "first", title: "First" },
    { key: "second", title: "Second" }
  ]);

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

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

@satya164 any other ideas of what might be causing it?

zaarheed on 17 Jun 2020

👍6

All 8 comments

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

react-native-gesture-handler (found: 1.5.2, latest: 1.6.1)
react-native-reanimated (found: 1.7.1, latest: 1.9.0)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

github-actions[bot] on 17 Jun 2020

Updated both packages and the issue still exists

zaarheed on 17 Jun 2020

Don't create components in render.

satya164 on 17 Jun 2020

I replaced my code with the example in the README, and I still get the warning.

import * as React from "react";
import { Dimensions, StyleSheet, Text, View } from "react-native";
import { SceneMap, TabView } from "react-native-tab-view";

const FirstRoute = () => <Text>One</Text>;

const SecondRoute = () => <Text>Two</Text>;

const initialLayout = { width: Dimensions.get("window").width };

export default function Tabs() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: "first", title: "First" },
    { key: "second", title: "Second" }
  ]);

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

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}

@satya164 any other ideas of what might be causing it?

zaarheed on 17 Jun 2020

👍6

Same here.