How to use it with react-native-router-flux

[grundmanise]

Hi, can you please show an example of how to use your component with react-native-router-flux?

Should I use it like this?

import {Scene, Router} from 'react-native-router-flux';

class App extends React.Component {
  render() {
    return <Router>
      <Scene key="root">
        <Scene key="login" component={Login} title="Login"/>
        <Scene key="register" component={Register} title="Register"/>
        <Scene key="home" component={Home}/>
      </Scene>

     // Within your render function.
     // Include the MessageBar once within your top View element
     // Make sure you add the MessageBar at the very bottom of your master component, then it will be           displayed over all other components
     <MessageBarAlert ref="alert" />

    </Router>
  }
}

[gbhrdt]

According to #16 (comment) it's not possible yet, I also did not get it to work with react-native-router-flux. Hopefully @KBLNY will get something together 👍 .

[johanmic]

im using with react-native-router-flux and have no problems with it

class AppRouter extends Component {
  constructor(){
    super()
    this.state = {shouldReload:false}
  }
  componentWillReceiveProps(nextProps) {
    this.setState({shouldReload:true})
  }
  componentDidMount() {  
    MessageBarManager.registerMessageBar(this.refs.alert);

  }
  componentWillUnmount() {
    MessageBarManager.unregisterMessageBar();
  }
  showAlert(alert) {
    MessageBarManager.showAlert(alert);
  }
  render() {
    const { loggedIn } = this.props
    return (
      <View style={styles.container}>
      <RouterWithRedux
        navigationBarStyle={ //
          {
            marginTop:-20,
            backgroundColor:colors.primaryDark,
            borderBottomWidth:0,
          }
        }
        renderBackButton={(nav) => {
            return nav.navigationState.index ? (
                <TouchableOpacity onPress={Actions.pop} style={{height:40, width: 40, margin:10, marginTop:5}}>
                    <Icon name="ios-arrow-back" size={20} color="white"  />
                </TouchableOpacity>
            ) : null;
        }}
        titleStyle={
          {color:colors.white}
        }
        showAlert={this.showAlert}
      >
      <Scene key="root">
            ...scenes            
      </Scene>
      </RouterWithRedux>
      <MessageBarAlert ref="alert" />
      </View>
    )
  }
}

then i call this.props.showAlert( {your alert} ) whenever i need it.
not very reduxy but does the job.

[ghost]

Hello @jaywalklabs may I know, how did you import it? thanks!

[herarya]

@mergemeynard try follow example this https://github.com/aksonov/react-native-router-flux/blob/master/Example/components/MessageBar.js
end
https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js

<Overlay key="overlay"> <Stack ..../> <Scene component={MessageBar} /> </Overlay>

[blntylmn]

@herarya thanks man.