CODEWITHSUNDEEP
react-native
CaspianTerrazzo
CaspianTerrazzo

Reputation: 2148

How do I update Different Screens form another independent screen?

I have an App with a navigationbar with 2 Screens. When i apply a function on Screen/Component 1 , I want to render or trigger a change in the Second Screen.

is there a way to either re-render the screen on Enter or to update the state of the other screen ?

Component one: 

export default class HomeScreen extends React.Component {

    constructor() {
      super();

     }

    _onPress(){
      try {
          await AsyncStorage.setItem('value', 'changed Value');
        } catch (error) {

          console.log(error.message);
        } 
        console.log("saved: "  + this.state.userName )


     }

   render() {





    return (
      <View style={styles.container}>
        <Button title="btn" onPress={() => this._onPress()} >                                                                    
         </Button>
      </View>
    )

}

component 2:

export default class SecondScreen extends React.Component {

    constructor() {
      super();
      this.state = {some : ''}

     }

    async getValue () {
    let recievedValue = '';
    try {
      let promise = await AsyncStorage.getItem('value') || 'cheeseCake';
      promise.then((value) => recievedValue = value) 
    } catch (error) {
      // Error retrieving data
      console.log(error.message);
    }

    return recievedValue
  }

   render() {



    var value= this.getValue();

    return (
      <View style={styles.container}>
        <Text>
             HERE CHANGED VALUE: {value}                                                              
         </Text>
        <Button onPress={()=> this.setState((prev)=> {some:'Thing'})}>    
         </Button>
      </View>
    )

}

When i press the Button on screen 1(HomeScreen) the value is saved. But it only shows in the secont screen when I trigger a statechange via Button Press.

How do I render the screen when I visit the screen via navigation bar ? enter image description here

Upvotes: 0

Views: 120

Answers (1)

Jebin Benny
Jebin Benny

Reputation: 951

Did you try EventEmiter?

Use this custom event listener: https://github.com/meinto/react-native-event-listeners

eg:

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

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

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

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

    componentWillUnmount() {
        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>
)

Upvotes: 1

Related Questions