React Navigation with nested navigators not refreshing screens

Using React-Navigation (v1.0.0-beta.8), I have a StackNavigator nested for each tab in the TabNavigator. The navigation state is handled by Redux.

TabNavigator works correctly; However, within a tab, the stack navigator is not updated after navigating to a specific screen.

Example

// HomeTabNavigator

const HomeTabNavigator = TabNavigator({
  Questions: {
    screen: QuestionsStackNavigator,
  },
  Results: {
    screen: ResultsStackNavigator,
  },
}, { initialRouteName: 'Questions'});

      

        
        
        
      

    

// NavigationReducer

const reducer = (state, action) => {
  const newState = HomeTabNavigator.router.getStateForAction(action, state);
  return newState || state;
};

      

        
        
        
      

    

// QuestionsStackNavigator

const QuestionsStackNavigator = StackNavigator(
  {
    QuestionsContainer: { screen: QuestionsContainer },
    QuestionContainer: { screen: QuestionContainer },
  },
  {
    initialRouteName: 'QuestionsContainer',
  }
);

QuestionsStackNavigator.navigationOptions = {
  tabBarLabel: () => <TabBarLabel label="Questions" />,
  tabBarIcon: ({ tintColor }) => (
    <TabBarIcon src={iconImage} style={{ tintColor }} />
  ),
};

export default QuestionsStackNavigator;

      

        
        
        
      

    

// QuestionsContainer

class QuestionsContainer extends React.Component {
  static navigationOptions = {
    title: 'Questions',
  }

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('QuestionContainer')}
        title="Open Question"
      />
    );
  }
}

      

        
        
        
      

    

Initial state of Redux

{
  navigation: {
    index: 0,
    routes: {
      0: {
        index: 0,
        routes: {
          0: {
            routeName: "QuestionsContainer",
            key: "Init"
          }
        }
      },
      ... 
    }
  }
}

      

        
        
        
      

    

After pressing the button, the state changes as follows:

{
  navigation: {
    index: 0,
    routes: {
      0: {
        index: 0,
        routes: {
          0: {
            routeName: "QuestionsContainer",
            key: "Init"
          },
          1: {
            routeName: "QuestionContainer",
            key: "id-1737252528-0"
          }
        }
      },
      ... 
    }
  }
}

      

        
        
        
      

    

Although the new screen is not displayed 😢