React Native Navigation / Context API

Question

I'm using React-Native-Navigation with the Context api.

I'm wrapping my screens with a HOC component below.

  const ProviderWrap = Comp => props => (
    <Provider>
      <Comp {...props} />
    </Provider>
  );

Navigation.registerComponent('app.AuthScreen', () => ProviderWrap(AuthScreen));
Navigation.registerComponent('app.FindPlaceScreen', () => ProviderWrap(FindPlaceScreen));
Navigation.registerComponent('app.SharePlaceScreen', () => ProviderWrap(SharePlaceScreen));

And this is my Provider Component

class Provider extends Component {
  state = {
    placeName: 'hello',
    image: 'https://images.unsplash.com/photo-1534075786808-9b819c51f0b7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4dec0c0b139fb398b714a5c8264b4a9a&auto=format&fit=crop&w=934&q=80',
    places: [],
  }

  textInputHandler = (text) => {
    this.setState({
      placeName: text,
    })
  }

  searchInputHandler = (text) => {
    const SearchedPlace = this.state.places.filter(place => {
      return place.name.includes(text)
    })
    this.setState(prevState => {
      return {
        places: SearchedPlace,
      }
    })
  }

  placeSubmitHandler = () => {
    if (this.state.placeName) {
      this.setState(prevState => {
        return {
          places: [...prevState.places, {
            name: prevState.placeName,
            image: prevState.image,
          }],
          placeName: '',
        }
      })
    } else {
      return;
    }
  }

  placeDeleteHandler = (id, deleteModal) => {
    const newPlaces = this.state.places.filter((place, index) => {
      return index !== id
    })
    this.setState({
      places: newPlaces,
    })
    deleteModal();
  }

  render() {
    return (
      <GlobalContext.Provider value={{
        state: this.state,
        textInputHandler: this.textInputHandler,
        placeSubmitHandler: this.placeSubmitHandler,
        placeDeleteHandler: this.placeDeleteHandler,
        searchInputHandler: this.searchInputHandler,
      }}>
        {this.props.children}
      </GlobalContext.Provider>
    )
  }
}

My issue is that The Context state isnt shared between screens. in my context state i have a places array which i add to in the SharePlaceScreen which works fine but when i go over to FindPlaceScreen that context state places is empty. As if i had two separate context for each screen.

Answer 1

Here is an example of singleton Object there are many implementation you cas use es6 class also ... es6 examples

var SingletonState = (function () {
    var state;

    function createState() {
        return {someKey:'what ever'};
    }

    return {
        getState: function () {
            if (!state) {
                 state = createState();
            }
            return state;
        }
    };
})();

// usage 
var state1 = SingletonState.getState();
var state2 = SingletonState.getState();

console.log("Same state? " + (state1 === state2));