Build Maps and Save Locations , by using React Native-Redux-Navigation-Icons-MAPs — Part-III

Check Part-II

Welcome to the penultimate part of this article.

In the previous part I focused on Redux. I explained it in general then I elucidated the structure of it supporting that with an image to make it clearer, Then I finished it by showing how to install redux and how I did use it in the app.

In the first part I’ve talked about react-native-navigation Lib. It means that now we know about it and about redux, so that I think it is the appropriate time to go one more step in our project code to how we use react-native-navigation Lib and how we create screens and how to bind all of that with redux.

Ready! Let’s go…

1. Screens :

You remember from the first part of the article that our app has two screens, one was for displaying the map and the other was to display the list of places that the user saves. Well, I want to start from the second screen.

What is a screen in react native? Well, the screen in react native is simply a class. We just create a class as any other class we create. We put at that class what we want to display in a screen, for example, if we want to display a text box and a button we insert the tag of <TextInput /> and <Button /> and when the screen is displayed these two will appear in it. After writing the code of the class we need to tell the react-native-navigation that this class will be used as a screen so keep it with you.

Remember : react-native-navigation lib first registers all the screens then when a screen is needed it call it by its unique name.

So what we need to do now is to create the class of the item list screen and then register it at react-native-navigation.

This class is so simple, its work is to display the list of places, so it just call the LocationList component which we created in the first part. Calling a pre-defined component is easy, it is used as a self-closed tag. Before start to the code of this class I want to recall the full code of the “LocationList” component.

*LocationList.js,

import React from 'react';
import { FlatList, StyleSheet } from 'react-native';
import ListItem from '../ListItem/ListItem';
const LocationList = props => {
  return (
    <FlatList
      style={styles.listContainer}
      data={props.locations}
      renderItem={(info) => (
        <ListItem
          placeName={info.item.placeName}
          placeLocation={info.item.location}
          onItemDeleted={() => props.onItemSelected(info.item.key)}
        />
      )}
    />
  );
};
const styles = StyleSheet.create({
  listContainer: {
    width: "100%"
  }
});
export default LocationList;

In this code line,

onItemDeleted={() => props.onItemSelected(info.item.key)}

the component gets the key of the item that the user want to delete. It gets it from the “ListItem.js” component when the user click the delete button. Then we will get this key at the place list screen to delete that specific item. Be aware that the key isn’t received unless the user press the delete button.

Now let’s look at the place list screen’s code,

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import LocationList from '../../components/LocationList/LocationList';
class Places extends Component {
render() {
    return (
      <View style={styles.container}>
        <LocationList
          locations={this.props.locations}
          onItemSelected={this.placeDeletedHandler}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 5
  }
});
export default Places;

I called it places. We see that it imports the LocationList component to use it. Then it call it as a tag sends locations array to the component to display items that inside it. Remember that we keep places in locations array which resides at redux. And also it gets the key of the item we want to delete if exists by this code line,

onItemSelected={this.placeDeletedHandler}

Well, the locations array is coming from redux and the item key must go to redux to update the state but how we do so.

To do that we need to connect this class to the redux and we do that as following,

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import LocationList from '../../components/LocationList/LocationList';
import { connect } from 'react-redux';
import { deletePlaces } from '../../store/actions/index';
class Places extends Component {
placeDeletedHandler = (key) => {
    this.props.onDeletePlace(key);
  }
render() {
    return (
      <View style={styles.container}>
        <LocationList
          locations={this.props.locations}
          onItemSelected={this.placeDeletedHandler}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 5
  }
});
const mapStateToProps = state => {
  return {
    locations: state.locationsList.locations
  };
};
const mapDispatchToProps = dispatch => {
  return {
    onDeletePlace: (key) => dispatch(deletePlaces(key))
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Places);

I rewrite the class code again to connect it to redux. Well, how the connection is done?

First of all we need to import “connect” property from “react-redux” ,which we installed earlier in the previous part, and from its name connect is a function used for connecting with redux.

Another thing we do is to create two functions after the class. One of these two functions is to get variables from the state which resides in redux, and the other one is to talk with actions which we created at redux.

Let’s look at the first one,

const mapStateToProps = state => {
  return {
    locations: state.locationsList.locations
  };
};

the name of the function is up to you, I gave it the name “mapStateToProps” it gets state as a parameter. In the previous part we only declare an array in the state in redux, and here we need it to send it to the LocationList component. So we say “state.locationsList.locations” , you see locatoinList this is the reducer we’ve created in redux. And now we know from redux that reducer talks directly with the store, where our state resides. So by the code line above we say to the reducer “hey I need you to give me locations array from the state” and then we assign it to a new locations array to use it in our class.

Now to the second function,

const mapDispatchToProps = dispatch => {
  return {
    onDeletePlace: (key) => dispatch(deletePlaces(key))
  };
};

this function used to send actions. The only action we use in the place list screen is delete action, so we only call the function of that action.

To call the action function we use this code line,

onDeletePlace: (key) => dispatch(deletePlaces(key))

we say dispatch the specific action we want to call and give it parameters if it has. And to be able to talk to that action from inside the class we assign it to a new function name, so it become its “ representative”. Another important thing we should be aware of is we have to import the action we want to use from the index file from redux,

import { deletePlaces } from '../../store/actions/index';

Then we can call the action inside the class easily, look at this,

placeDeletedHandler = (key) => {
    this.props.onDeletePlace(key);
  }

after we assigned the action to “onDeletePlace” we use it as above to trigger that action. So the above code line calls the delete action and gives it the key of the item we want to delete. And then that action takes the key to redux and from there it receives the reducer, through which the key arrives the store and the place which key is equivalent to the coming key is removed.

All what I said in the last paragraph we did in redux. If you check the reducer and action functions you will see all that, remember it was simple.

So till here we finish the place list screen and we bind it to some parts of redux “which we needed” so let us now register this screen to react-native-navigation.

2. Screen & react-native-navigation :

What we are going to do here is to register the screen to react-native-navigation, and also to wrap whole app with redux and like that our app become connected to redux completely. Let’s see the code,

import { Navigation } from 'react-native-navigation';
import {Provider} from 'react-redux';
import PlacesScreen from './src/screens/Places/Places';
import configureStore from './src/store/configureStore';
const store = configureStore();
//Register screens
Navigation.registerComponent("pick-places.PlacesScreen",
() => PlacesScreen,
store,
Provider
);
//Start an App
Navigation.startSingleScreenApp({
  screen: {
    screen: "pick-places.PlacesScreen",
    title: "Place List"
  }
  });

Well, we write this code inside App.js file.

In the beginning we import Navigation property from react-native-navigation lib. Then we import Provider property from react-redux lib by which we wrap the app with redux. Then we import the screens we want to register at navigation. And also we import configureStore which is the store of redux.

After that, first thing we do is to implement the configureStore. Then we register the screens using registerComponent function from navigation.

Navigation.registerComponent("pick-places.PlacesScreen",
() => PlacesScreen,
store,
Provider
);

while registering the screen we assign four parameters, first one is the unique name of the screen, the second is the class of the screen, the third one is the store of redux and the last is Provider to wrap it with redux because we use the state at that class.

After that we should tell react-native-navigation from which screen to start. So we use this,

Navigation.startSingleScreenApp({
  screen: {
    screen: "pick-places.PlacesScreen",
    title: "Place List"
  }
  });

two parameters are given here one is the screen name and the other is the name we want to appear above the screen in the app.

Till here we connect the screen to the state and actions, then we register it to navigation and we wrap all that with redux.

By that we came to the end of this part, I hope you found it useful and liked it.

Get ready to the most interesting part, which I personally enthusiastic to it. It will be completely about MAPs starting from installing its library then to using it and insert it to any app and also the problems we may face when using it and how to solve them. I’m really excited 💪🏻🤓

Remember: Full code and final working app will be published with you in the final part.

Here is the link of the last part.