CODEWITHSUNDEEP
react-nativenavigation
Tamir
Tamir

Reputation: 625

Navigated React Native component is not rendered properly after updating its parent's state

I have a parent component with Navigator and 2 child components. In parent component I have a method that updates the height of a View it has, which I pass to child components, allowing them to refresh the state of the parent once they are mounted.

When I navigate directly to second child, then call this method in second child's componentDidMount, the second child is re-rendered properly. However, when I navigate from first child to second, the second child is not re-rendered as expected.

Parent:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Navigator,
  View
} from 'react-native';

import FirstChild from './FirstChild';
import SecondChild from './SecondChild';

export default class Parent extends Component {

  constructor(props) {
    super(props);
    this.setViewHeight = this.setViewHeight.bind(this);
    this.state = {
      viewHeight : 200
    }
  }

  renderScene(route, navigator) {

     var child = route.name == 'FirstChild' ?
      <FirstChild navigator={navigator} heightSetter={this.setViewHeight}/> :
      <SecondChild navigator={navigator} heightSetter={this.setViewHeight}/>;

     return (
       <View style={styles.container}>
         <View style={[styles.dynamicView, {height: this.state.viewHeight}]}/>
         {child}
       </View>
    )    
  }

  render() {
    return (
      <Navigator
        ref='navigator'
        initialRoute={{ name: 'FirstChild' }}
        renderScene={(route,navigator)=>this.renderScene(route,navigator)}
      />
    );
  }

  setViewHeight() {
    this.setState({
      viewHeight: 100
    })
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  dynamicView: {
    alignSelf: 'stretch',
    backgroundColor: 'rgba(100,100,200, 0.5)'
  }
});

First Child:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

export default class FirstChild extends Component {

  constructor(props) {
    super(props)
  }

  render() {
    return (
      <TouchableOpacity style={styles.child} onPress={() => this.props.navigator.push({name: 'SecondChild'}) }>
        <View style={styles.child}>
          <Text>FIRST</Text>
        </View>
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  child: {
    height: 200,
    alignSelf: 'stretch',
    backgroundColor: 'rgba(200,100,100,0.5)'
  }
});

Second Child:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class SecondChild extends Component {

  constructor(props) {
    super(props)
  }

  componentDidMount() {
    this.props.heightSetter();
  }

  render() {
    return (
      <View style={styles.child}>
        <Text>Second</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  child: {
    height: 200,
    alignSelf: 'stretch',
    backgroundColor: 'rgba(200,100,100,0.5)'
  }
});

Upvotes: 0

Views: 237

Answers (1)

Ujjwal Nepal
Ujjwal Nepal

Reputation: 546

The question you are putting is not clear actually. What is the behavior that you got? Without clear picture of that it's not possible to answer your question but can tell you one thing that is

Using the navigation which is built in to react native is little complex and when there are many scenes to go through it doesn't support at all.

You can use navigation library like react-native router flux, which will definitely help you solve the issue you have got.

Here is the link,

https://github.com/aksonov/react-native-router-flux

Upvotes: 1

Related Questions