React-native-navigation: How bind button event on custom title topBar?

[esipavicius]

Hello,

I have TopBar component class. And I set it to navigation topBar.title.component. Also I have MAIN screen whit HOME_ID key. I want get pressed button status from topBar.title.component to HOME_ID screen. It is possible with Navigation? It yes, plese write how it should it implement. I moved from react-navigation. So here I do not know all possible functions.

Thanks.

`Navigation

    Navigation.setRoot({
        root: {
            sideMenu: {
                left: {
                    component: {
                        id: HOME_SIDE_MENU_ID,
                        name: HOME_SIDE_MENU_NAME,
                        options: {
                            layout: {
                                orientation: ['portrait']
                            },
                        },
                    }
                },
                center: {
                    stack: {
                        children:[
                            {
                                component: {
                                    id: HOME_ID,
                                    name: HOME_NAME,
                                    options: {
                                        layout: {
                                            orientation: ['portrait']
                                        },
                                        topBar: {
                                            title: {
                                                component: {
                                                    id: HOME_TOP_BAR_ID,
                                                    name: HOME_TOP_BAR_NAME,
                                                    options: {},
                                                }
                                            },
                                            visible: true,
                                            drawBehind: true,
                                            animate: true,
                                            background: {
                                                color: COLORS.SOFT_BLUE,
                                            },
                                        }
                                    }
                                }
                            }
                        ]
                    }
                },
            },
        }
    });

`

`TopBar

class TopBar extends Component<Props, State>
{
state: State = {

};

constructor(props: Props)
{
    super(props);
}

async onPressRefreshUserData(): void
{
    // I want get button press status to home screen
}

render(): any
{
    return (
        <View style={ styles.barMain } >
            <View>
                <EntypoIcon.Button
                    name="menu"
                    backgroundColor={ COLORS.SOFT_BLUE }
                    color={ COLORS.WHITE }
                    size={ 35 }
                    onPress={() => NativeNavigationService.openHomeSideMenu() }
                />
            </View>
            <Text style={ styles.titleText }>My DEH Deps</Text>
            <View style={ styles.barRight }>
                <EntypoIcon.Button
                    name="ccw"
                    backgroundColor={ COLORS.SOFT_BLUE }
                    color={ COLORS.GREEN }
                    size={ 35 }
                    onPress={() => this.onPressRefreshUserData() }
                />
            </View>
        </View>
    );
}
}

export default TopBar;

`

[husseinAbdulnabi]

inside the screen with id == HOME_ID, once the component is constructed or mounted

Navigation.mergeOptions(HOME_ID, {
  topBar: {
      title: {
           component: {
              id: HOME_TOP_BAR_ID,
              name: HOME_TOP_BAR_NAME,
              // add this
             passProps: {
                 onPress: this.handleTitlePress
              } 
              options: {},
           }
      }
  }
}) 

you need to do that inside the constructor or on mount event of the component so you can bind this, using setRoot or get Options won't do the job.
also inside your title component, just make it touchable, the component will receive the props with onPress in, so just call this.props.onPress once the touchable is pressed

[esipavicius]

@hisothreed Oh.. :) Thanks for idea. Its works!.