CODEWITHSUNDEEP
reactjsreact-nativereact-navigationreact-state
Muhammad Abdullah Shafiq
Muhammad Abdullah Shafiq

Reputation: 864

Sharing data (an array) between two screens in tabs view using react-navigation in react native

I am using react-navigation without redux. so i have two tabs each with their own stack navigator, having one screen each. so i need and array of locations in both screens. currently i am doing this in both screens:

state = { locations: [] };

componentDidMount() {
  this.getAllLocations();
}

  async getAllLocations() {
    let locations = await this.getMoviesFromApi();
    this.setState({ locations });
  }

i just want to have this array at one location and both components should share this single source of truth. so changes made by either screen is reflected in the other screen. Is this possible without redux?

Upvotes: 0

Views: 1016

Answers (3)

LHIOUI
LHIOUI

Reputation: 3337

It is possible if you have a singleton object :

export default class SharedData {
  constructor(){
  if(SharedData.instance){
     return SharedData.instance;
   }

   this.state = {locations:[]};
   this.listners =[];
   SharedData.instance = this;
   return SharedData.instance;
 }

 setLocations(locations){
    this.state.locations = locations;
    this.listners.forEach(listner=>listner(this.state.locations));
 }
 getLocations(){
     return this.state.locations;
 }
 addListner(listner){
    this.listners.push(listner);
     return listner;
 }
 removeListner(listner){
   let index = this.listners.indexOf(listner);
   if(index > -1){
      this.listners.splice(index,1);
    }
 }
}

and then in every tab where you want to access shared locations state:

// get an instance of SharedData
this.sharedData = new SharedData();
// subscribe to locations changes
this.listner = sharedData.addListner((locations)=>{
   this.setState({locations});
});

 // set locations
 this.sharedData.setLocations([]);

  // unregister when destroying the component
  this.sharedData.removeListner(this.listner);

Upvotes: 2

RegularGuy
RegularGuy

Reputation: 3676

RN 0.59 has opened great possibilities with its release. One of them are react hooks, which is available in the latest version... in the future react hooks will be used everywhere. Trust me. So, a while back I looked for the possibilities of having a global state using react hooks and found the reactn library. It uses react native hooks, and even you can use global state in CLASS components. which opens a new door for theming and sharing data. Now my app supports light/dark mode, dynamic font size, Languages, and early implementation of "portals" using only this library.

The best part about it is that you can use it like state. There is no need of provider, or redux stuff (although it provides it). It can be integrated with react navigation (it requires modifying some source code, at most, adding an "n" to react, and reference the global variable). Is awesome and I love it.

I have been thinking in doing an article on medium about this, because the lib is not that popular in RN community, but hope that you will give it a chance the library is only 22KB, less than one full component.

As an alternative, you could think about writing your own library using hooks. But it's gonna be hard. Try it, there is no going back

Upvotes: 2

Hend El-Sahli
Hend El-Sahli

Reputation: 6742

I guess in order to achieve your goal, you're going to need some sort of a mechanism for storing 'global data', and if you don like Redux because it requires a lot of setup to achieve this simple task of sharing global data, then you chould you unstated ... which is alot simple to setup

Upvotes: 0

Related Questions