React-native-router-flux: [Question] Best way to implement "onLeft()" and "onRight()" logic inside the scene's component

[agustinaliagac]

Using:

• react-native-router-flux v3.38.0
• react-native v0.43.3

Hello ! I've tried to find this in other threads unsuccessfully. I need to implement some kind of logic inside of the "onRight()" method of a Navigation Bar that requires data from the Scene's component state. I'm using Redux, so a possible solution could be to connect the "Router Component" to the actions and reducers I need. However I would rather put this piece of logic inside of the scene's component, because it would just make more sense to me.

The closest thing I found is adding this code inside "componentWillMount()". But I don't think it's a good solution since it's refreshing the screen just to add the button to the navbar, making the loading process much slower.
Actions.refresh({ rightTitle: 'Permitir', onRight: this.onCreateInvite.bind(this) });

Is there any way to achieve something like that with the RN - Redux - RNRF stack ?

Thanks !

[brrr]

there is a tricky way:

1. register event listener inside your component

componentDidMount(){
    this.listener = RCTDeviceEventEmitter.addListener(Constants.EVENT_REMOVE_FRIEND,(value)=>{  
      console.log('...............'); 
    });  
    console.log('listener is added.....'); 
  }

  componentWillUnmount(){  
    if (this.listener) {  
      this.listener.remove();
      console.log('listener is removed.....')
    }  
  }  

2.pull the trigger

          <Scene key="FriendProfile" component={FriendProfile} title="this is a title" rightTitle="this is the title of right button" onRight={()=>RCTDeviceEventEmitter.emit(Constants.EVENT_REMOVE_FRIEND)}/>

[agustinaliagac]

@brrr I'll definitely give it a try and post my results here. Thanks !!

[lRoMYl]

Here is how I customize the navigation bar button individually from the scene itself. Defining the style and button for the navigationBar from NavigationRouter.js are extremely messy.

Instead of defining the rightTitle/onRight in the NavigationRouter.js, you can define the right button from the scene itself.

During the scene configuration in NavigationRouter.js, access the custom button through the route parameters in the renderRightButton method. I wish there is a similar way available to retrieve the navigationBarStyle through pure function, then I would also be able to customize the navigationBar style individually from the scene itself instead of hardcoded styling in NavigationRouterStyle.js

NavigationRouter.js:
key='cameraScannerScreen'
component={CameraScannerScreen}
title=I18n.t('Scan')
hideNavBar={false}
hideTabBar={true}
backButtonImage={Images.btn_header_back}
navigationBarStyle={styles.transparentNavBar}
titleStyle={styles.transparentTitleStyle}
renderRightButton={(route) => { return route.albumButton }} />

CameraScannerScreen.js:

componentDidMount () {
    Actions.refresh({
      albumButton: this.renderAlbumButton()
    })
}

renderAlbumButton () {
    return (
      <TouchableHighlight
        style={styles.albumButton}
        onPress={() => console.tron.log('Your action here')}>
        <Text style={styles.albumButton}>{I18n.t('_camera_scanner_album')}</Text>
      </TouchableHighlight>
    )
  }