Build Maps and Save Locations , by using React Native-Redux-Navigation-Icons-MAPs — Part-I
Map is an important feature you may need to use in various apps you build, and it can be used for different goals, for example, showing the address of a company, looking at places near to a certain place, finding your current place.
So Maps are so important and have a wide range of uses, therefor I build a simple app to show how this feature works and how we can use it as a part of other apps we work on.
Let’s Start… 👨🏻💻🤓
1. About The Application :
This app allows the user to pick a place from the map and give it a name then save it with the previous places they have picked. In other words, this application is to save various places that the user have been to.
This app consists of two screens,
*First Screen,
In this screen the map is viewed to the user, so the user can look at different places on the map and select any place he/she wants. This screen also has a button to detect the user’s current location. And also a text box to let the user enter a name for the selected place and then add that place with the attached name to a place list.
*Second Screen,
This screen views the list of places that the user has saved. Each item in the list consists of a map view, that shows the selected place, and under it there exist the name of that place and a delete button beside it.
* In This App We Will Use The Following:
- react-native-maps lib to view the map and select places etc.
- react-native-navigation lib to navigate between screens,
- Redux to manage the state,
- react-native-icons lib to assign an icon to the delete button.
To allow better understanding and keep the app as simple as possible I will explain the it in four different parts starting from the current one.
2. Creating Components And Screens :
This is my project structure. It contains components, screens, and store for redux.
- Creating ListItem Component :
As I mentioned earlier the places that the user save are kept in a list, that list consists of similar items, which are the saved places, I mean they are displayed in similar containers. The container is a view, and this view contain a map view, place name, and delete button. We create this item in “ListItem” component like the following,
import React from 'react';
import { TouchableOpacity, View, Text, StyleSheet, Dimensions } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';const ListItem = props => (
<View style={styles.listItem}>
<View style={styles.contain}>
<View style={{width: "70%"}}><Text style={styles.text}>{props.placeName}</Text></View>
<TouchableOpacity>
<View style={styles.trash}>
<Icon size={25} name="ios-trash" color="red"/>
</View>
</TouchableOpacity>
</View>
</View>
);const styles = StyleSheet.create({
listItem: {
width: "95%",
marginBottom: 7,
marginLeft: 10,
padding: 10,
backgroundColor: "white",
flexDirection: "column",
alignItems: "center",
borderRadius: 30,
borderWidth: 1,
borderColor: "#aaa"
},
contain: {
flexDirection: "row"
},
text: {
paddingTop: 5,
color: "black",
fontSize: 16,
fontWeight: "bold"
},
trash: {
alignItems: "center",
paddingTop: 5
}
});export default ListItem;
You see the code is very simple, it consists of a main view and inside it another view which contains a view for the text ,which is the place name, and another view to display the delete button, this view is actually a button creation, you see the TouchableOpacity tag which converts the view to a touchable view and inside it we insert a tag, it is Icon tag. This icon tag gets icons from react-native-vector-icons lib, I’ll show you how to install it a bit latter. This button we’ve just created doesn’t do anything for now, you now its function is to delete items, these items resides in the store which is redux, so I’ll add this functionality when I explain redux in the next part.
Well, the view will look like this,
Our work now is on the UI, so we are creating the components and by the end of the project we’ll see a real map view inside the above item.
*Installing react-native-vector-icons :
Installing this lib is so simple, first thing you should do is typing this code line in the terminal in the project directory,
npm install react-native-vector-icons --saveAfter installation is done you should do some few steps to link the lib to your project, you can find these steps to ios and android in this link.
I just want to show you apart of those steps you need to understand to know how to use this lib and get icons you want.
Have a look at this,
project.ext.vectoricons = [
iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf' ]
]you will add this part to android/app/build.gradle, look at file names within the parentheses which extension is “.ttf”, there you write from which file you want to get the icons, here we get icons from MaterialIcons and EvilIcons. To understand what I’m talking about have a look at this link. When you open this link first thing you see is “AntDesign”, that is a file name you can write in the above code line to get icons from it, and if you go down you will see different file names containing different icons.
In our app we use Ionicons file, so when you add the above code to your project you should enter it like the following,
project.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf' ]
]
I hope you could understand this point.
After that as you see in the code of ListItem component we call the lib and that certain file like this,
import Icon from 'react-native-vector-icons/Ionicons';then we can use it in the code as any tag by typing,
<Icon />then we determine three parameters, first one is the size of the icon, the second is the name of it, and third one is the color of it like this,
<Icon size={25} name="ios-trash" color="red"/>- Creating LocationList Component :
After creating the container of places “ListItem” we need to put it in a list and it should be a scroll list to be able to scroll up and down to see all places that the user saves. For that reason I used “FlatList” as following,
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}
/>
)}
/>
);
};const styles = StyleSheet.create({
listContainer: {
width: "100%"
}
});export default LocationList;
As you see “FlatList” gets a parameter called data, this parameter gets the data source, which is an array that keeps locations and thier names and keys in our case, actually that array is in redux so the data source is empty till this step, I’ll show you the array from redux in the next part. Then “FlatList” executes a function to render the data source. In other words to get each element of the array one-by-one and execute some functionality on it, in our case it send it to “ListItem” component to put it in the container. As you see in renderItem function we call “ListItem” tag, which is our component and we import it in the beginning.
Until now we get only the name of the place from the array, latter on we’ll also get the location from it.
Shortly, what we did till now is creating a container “ListItem” and put it in a scroll list “LocationList”.
We still have one component and the two screens need to be inserted to the project, but I prefer to leave them to the next parts because they are related to redux and map lib, so I will explain them first and while doing that I’ll write the code of the component and screens. But now let’s move to react-native-navigation lib.
3. react-native-navigation Lib :
First of all let’s install the library by typing the following to the terminal,
npm install --save react-native-navigation@1.1.xafter the installation is finished you need to go to this link to do some steps required to link the lib to your project. From their go to docs then installation-android.md or installation-ios.md, there you can find the steps you should follow for android or ios.
To avoid errors when you install the library for android, in the “android/app/build.gradle” don’t modify android{ } part, just update dependencies part.
* Brief introduction for react-native-navigation :
The main idea of it is how to get from A to B. If we are working on web we would say that to go from page A to page B we need to assign the link of page B to a button in page A so that we can pass to page B. But when working on a mobile application we are not working with links, therefor we use react-native-navigation lib, which allows us to navigate between screens by registering all screens of the app and then call the screen we want to go to very easily.
Let me give a simple example, let’s say that we have ScreenOne and ScreenTwo, first thing to do is to “register” these two screen,
Navigation.registerComponent("example-navigation.ScreenOne",
() => ScreenOne
);
Navigation.registerComponent("example-navigation.ScreenTwo",
() => ScreenTwo
);registerComponent function takes two arguments, first one is a unique identifier of the screen, which has a typical pattern, you have something like your app name then a dot and then the screen name which should be unique. The second argument is a function which return the required screen, in other words, the screen is a class and this function executes that class.
Well, we registered the screens but how to lunch them and move between them. Firstly, we start with one of the screens and let it be ScreenOne, to lunch it we use this part of code,
Navigation.startSingleScreenApp({
screen: {
screen: "example-navigation.ScreenOne",
title: "Page One"
}
});startSingleScreenApp function is used to start the app from a certain screen, so it get the screen identifier and a title to that screen.
Now we are in ScreenOne and want to go to ScreenTwo, let’s say that we have a button to do so, our code would be like this,
pageTwo = () => {
this.props.navigator.push({
screen: "example-navigation.ScreenTwo",
title: "Page Two"
});
};
//some code
<Button title="Go To Page Two" onPress={this.pageTwo} />really simple right.
Well how did I used this lib in this app? How do I save location information in the app? and How do redux work? I’ll try to answer most of these questions in the next part and if a small piece of them isn’t answered in the next part I’ll answer it in the part after it!
Note: if the codes of the app which I published here doesn’t work don’t worry because the code is not completed yet, and in the final part I will publish the full code and running app with you.
See you in the next part… 🙋🏻♂️
You can find Part-II here.
