Динамически изменять количество товаров в корзине

Question

Я показываю общую сумму корзины в Detail.js заголовке страницы из файла Routes.js. Я хочу изменить эту сумму, когда нажата кнопка Add to bag. Как я показал в это образ. Когда я обновляю свое приложение, оно обновляется, но я хочу изменить его одновременно. Я нашел решение для динамического заголовка, используя react-native-router-flux, но для rightButton я не знаю, как передать мою обновленную переменную в заголовок.

Routes.js :

import {Actions, Router, Stack, Scene} from 'react-native-router-flux';
import IndividualDetail from '../screens/IndividualDetail/IndividualDetail';

export default class Routes extends Component<{}> {
    constructor(props) {
        super(props);
        this.state = {
            bagCount: 0
        };
    }
    render() {
      const bagIcon = 
        <TouchableHighlight onPress={() => Actions.wishlist()} style={s.right_container}>
          <View style={s.icon_cont}>
            <View style={s.badge_cont}>
              <Text style={s.abdge_txt}>{this.state.bagCount}</Text>
            </View>
            <Icon name="shopping-cart" size={icon_size} color={colors.white}/>
          </View>
        </TouchableHighlight>

      return (
         <View style={{flex:1}}>
           <Router navigationBarStyle={styles.navbar_style} tintColor="#fff" backTitle=" " titleStyle={styles.title_style}>
             <Stack key="root" hideNavBar={false} >
               <Scene hideNavBar={false} key="individual_detail" component={IndividualDetail}  title="Product Detail" renderRightButton={() => bagIcon}/>
             </Stack>
           </Router>
         </View>
      );
   }
}

IndividualDetail.js

 export default class IndividualDetail extends Component 
 {
    constructor(props){
      super(props);
      this.state = {
         bagCount: 0
      };
    }

    _handleAddToBagBtn = () => {
       //Here I want to change bag total count at header
    }

    ...
 }

Любая помощь приветствуется.