Is it possible to publish and subscribe to events(like in ionic) for Component munication. The two ponents I have there are no related (there are not parent and child). One ponent is a header that has a button Publish , and the other ponent is a form. What i want is to send an event from the clicked button to the form for validation purpose that says for example the field body cant be empty something like that.

EDIT: I am using router flux. The ponent i have the form is NewPost and the one with the Button publish is ButtonsNewPost. Are this ponents parent and child? They can unicate somehow?

        <Scene
          key="newPost"
          ponent={NewPost}
          hideNavBar={false}
          renderRightButton={<ButtonsNewPost/>}
          navBarButtonColor='#fff'
        >

SOLUTION:

newPost.js

ponentWillReceiveProps(newProps) {
    let validationMessage;
    if(newProps.validationBody) {
        validationMessage = 'El campo descripción es requerido';
        this.showToastValidation(validationMessage);

        //without the next line the validation toast only appear once
        this.props.validation_body(false); 
    } 

}

const mapStateToProps = state => {
   return {
    validationBody: state.validationBody
   }
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
               dispatch(validation_body(validationBody))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(NewPost)

reducers/validationBody.js

export default (state = false, action) => {
    switch(action.type) {
        case 'validation_body':
            return action.payload
        default:
            return state
    }
}

reducers/index.js

import validationBody from './validationBody';

export default bineReducers({
    validationBody: validationBody
})

actions/index.js

export const validation_body = (validationBody) => {
    return {
        type: 'validation_body',
        payload: validationBody
    }
}

buttonsNewPost.js

if (!window.description) {
   this.props.validation_body(true);
   return;
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
         dispatch(validation_body(validationBody)),
    }
}

export default connect(null, mapDispatchToProps)(ButtonsNewPost)

Is it possible to publish and subscribe to events(like in ionic) for Component munication. The two ponents I have there are no related (there are not parent and child). One ponent is a header that has a button Publish , and the other ponent is a form. What i want is to send an event from the clicked button to the form for validation purpose that says for example the field body cant be empty something like that.

EDIT: I am using router flux. The ponent i have the form is NewPost and the one with the Button publish is ButtonsNewPost. Are this ponents parent and child? They can unicate somehow?

        <Scene
          key="newPost"
          ponent={NewPost}
          hideNavBar={false}
          renderRightButton={<ButtonsNewPost/>}
          navBarButtonColor='#fff'
        >

SOLUTION:

newPost.js

ponentWillReceiveProps(newProps) {
    let validationMessage;
    if(newProps.validationBody) {
        validationMessage = 'El campo descripción es requerido';
        this.showToastValidation(validationMessage);

        //without the next line the validation toast only appear once
        this.props.validation_body(false); 
    } 

}

const mapStateToProps = state => {
   return {
    validationBody: state.validationBody
   }
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
               dispatch(validation_body(validationBody))
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(NewPost)

reducers/validationBody.js

export default (state = false, action) => {
    switch(action.type) {
        case 'validation_body':
            return action.payload
        default:
            return state
    }
}

reducers/index.js

import validationBody from './validationBody';

export default bineReducers({
    validationBody: validationBody
})

actions/index.js

export const validation_body = (validationBody) => {
    return {
        type: 'validation_body',
        payload: validationBody
    }
}

buttonsNewPost.js

if (!window.description) {
   this.props.validation_body(true);
   return;
}

const mapDispatchToProps = dispatch => {
    return {
        validation_body: (validationBody) => 
         dispatch(validation_body(validationBody)),
    }
}

export default connect(null, mapDispatchToProps)(ButtonsNewPost)

• javascript
• reactjs
• react-native
• react-native-router-flux

• 1 you should try use redux, or flux – san Commented Sep 24, 2018 at 1:41
• Yes i solve it with redux. If anyone wants the code, just ask for it. – Franco Coronel Commented Sep 24, 2018 at 2:03
• 1 Better add the solution, and whoever needs it (i guess a lot of people) will be able to read it immediately. – angelos_lex Commented Oct 5, 2018 at 20:37
• @angelos_lex Done – Franco Coronel Commented Oct 5, 2018 at 23:57

1 Answer 1

You can use the react-native-event-listeners library:

https://github./meinto/react-native-event-listeners

Usage is similar to Ionic events:

import { EventRegister } from 'react-native-event-listeners'

/*
 * RECEIVER COMPONENT
 */
class Receiver extends PureComponent {
    constructor(props) {
        super(props)

        this.state = {
            data: 'no data',
        }
    }

    ponentWillMount() {
        this.listener = EventRegister.addEventListener('myCustomEvent', (data) => {
            this.setState({
                data,
            })
        })
    }

    ponentWillUnmount() {
        EventRegister.removeEventListener(this.listener)
    }

    render() {
        return <Text>{this.state.data}</Text>
    }
}

/*
 * SENDER COMPONENT
 */
const Sender = (props) => (
    <TouchableHighlight
        onPress={() => {
            EventRegister.emit('myCustomEvent', 'it works!!!')
        })
    ><Text>Send Event</Text></TouchableHighlight>
)