Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

tabview content don't re-render when state changes

See original GitHub issue

Issue type

I’m submitting a … (check one with “x”)

bug report
feature request

Issue description

Current behavior:

Tab view dont re-render when state changes Expected behavior:

Tab view content must re-render to change the “check” prop of the checkbox Steps to reproduce:

Simply change a state that you use inside tab view Related code:

    const Principal = () => (
      <Form>
        <Item>
          <Input placeholder="Razão Social"/>
        </Item>
        <Item picker 
          style={{marginLeft: 15}}>
          <Label style={{marginLeft: 5}}>Pessoa</Label>
          <Picker mode="dropdown"
            selectedValue={isFisica}
            onValueChange={(isFisica) => this.setState({isFisica})}>
            <Picker.Item label="Fisica" value={true}/>
            <Picker.Item label="Jurídica" value={false}/>
          </Picker>                
        </Item>
        <Item>
          <Input disabled={isFisica} placeholder="Nome fantasia"/>
        </Item>
        <Item>
          <Input placeholder={isFisica ? "CPF" : "CNPJ"} keyboardType="numeric"/>
        </Item>
        <Item>
          <DatePicker placeHolderText={isFisica ? "Data de nascimento" : "Fundação"}/>
        </Item>
        <Item style={{borderBottomColor: "#fff"}}>
          <Input placeholder="Inscrição Estadual"/>
          <Input placeholder="Inscrição Municipal"/>
        </Item>
        <Item>
          <Col style={{marginBottom: 10}}>
            <CheckBox checked={insEst}
              onPress={() => this.setState({insEst: !insEst})}/>
          </Col>
          <Col style={{marginBottom: 10}}>
            <CheckBox checked={insMun}
              onPress={() => this.setState({insMun: !insMun})}/>
          </Col>
        </Item>
      </Form>
    );

     <TabView selectedIndex={selectedIndex}
        style={{height}} 
        onSelect={selectedIndex => this.setState({selectedIndex})}>
        <Tab title="Principal"
          icon={() => <Icon name="person-add" type="Ionicons" style={styles.icon}/>}>
          {Principal()}
        </Tab>
        <Tab title="Contato" 
          icon={() => <Icon name="call" type="Ionicons" style={styles.icon}/>}>
          {Contato()}
        </Tab>
        <Tab title="Comercial" 
          icon={() => <Icon name="cart" type="Ionicons" style={styles.icon}/>}>
          {Comercial()}
        </Tab>
      </TabView>

Other information:

OS, device, package version

insert information here

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

Firetuycommented, Jul 3, 2019

Thanks already solved my problem!

I was not doing the right thing

0reactions

artyorshcommented, Jul 3, 2019

Also I’ve noticed that you’re using onPress prop in your CheckBox. In case it is imported from UI Kitten or React Native, you should use onChange

Top Results From Across the Web

Expo/React Native TabView re-render component/tab on state ...

Whenever the state of a component is changed with setState(...) method, the component should re-render to show the latest state data. This works ......

nikpetrovic/react-native-tab-view - npm

All the scenes rendered with SceneMap are optimized using React.PureComponent and don't re-render when parent's props or states change.

Prevent component to re-render when switching between ...

Hi, I'm using react functional component and react-tabtab. All react tabs (any library) re-render it's panel when switching between tabs.

Material Top Tabs Navigator | React Navigation

A material-design themed tab bar on the top of the screen that lets you switch between different routes by tapping the tabs or...

When does React re-render components? - Felix Gerschau

As we already saw before, React re-renders a component when you call the setState function to change the state (or the provided function...