This tutorial is the fifth part of our React Native Car Parking App UI clone series. In the , we successfully implemented the Map Markers in MapView section. In this part of the tutorial series, we are going to continue from where we left off in the last part. So, it is recommended to go through all the previous parts of this tutorial series in order to get the full insight and development of the project. last part As stated in the previous parts, this tutorial series was inspired by the React Native App Templates that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this fifth part is also the continuation of coding implementations and designs from the YouTube video tutorial by for the Car parking Finder App UI clone. The video tutorial delivers the overall implementations using a fast coding style which may be difficult to grasp for any developer especially the beginners. However, this tutorial gives stepwise guidance on the implementation of each UI section. Hence, the readers can relax and take time to learn and implement the UI. React UI Kit Overview In this fifth part of the tutorial series, we are going to implement the Header section. The Header section will include the detected location name along with a menu icon button on the right side. But first, the idea is to transfer all the color and size style properties to a completely different file and import it into our Map Screen. Then, we will style the size and color of components in the map screen using the properties from our external file. Lastly, we will implement the header section with the menu button which is quite easy. So, let us begin!! Storing Style Properties in Different File In this step, we are going to store our size and color properties used very commonly on the map screen to a different file called ‘theme.js’. This will make things easier for us to assign styles to different components. Now, we need to create a file called in our main project folder as shown in the code snippet below: ‘theme.js’ As we can see, we have got the file. Now, in the theme.js file we need to define our color and size properties as shown in the code snippet below: ‘theme.js’ COLORS = { : , : , : , : , : , }; SIZES = { : , : , : , } { COLORS, SIZES, } const red '#D83C54' gray '#7D818A' black '#3D4448' white '#FFFFFF' overlay '#C1BEC0' const base 12 icon 16 font 16 export Here, we have defined the color and size style properties in the and constant variables that are then exported. The variable contains different color properties containing their respective color codes. And for the variable, we have defined base size as 12 and icon and font sizes to be 16 pixels. COLORS SIZES COLORS SIZES Integrating Color style properties based on theme.js file Since we have defined some common style properties in the file, here we are going to import the styles from file and integrate them into our component inline styles as well as the styles in the component. But first, we need to import the theme.js file into our Map.js file as shown in the code snippet below: theme.js theme.js StyleSheet import * as theme from '../theme'; Now, we are going to change the color and size style properties in accordance with the pre-defined styles from theme.js file. Changing color style properties in accordance with theme.js Here, we are going to change the color style properties with the variable from the file. All the changes made to the style properties in the component is provided in the code snippet below: COLORS theme.js StyleSheet container: { : , : theme.COLORS.white }, : { : , : theme.COLORS.white, : , : , : , : width - ( * ) }, : { : , : , : , : , : theme.COLORS.red }, : { : , : theme.COLORS.white, : , : , : , : , : theme.COLORS.white, }, : { : theme.COLORS.red, : , }, : { : theme.COLORS.gray }, : { : theme.COLORS.black, : { : , : , }, : , : , : theme.COLORS.white , : }, : { : theme.COLORS.red, }, flex 1 backgroundColor parking flexDirection 'row' backgroundColor borderRadius 6 padding 15 marginHorizontal 24 width 24 2 buy flex 1.25 flexDirection 'row' padding 8 borderRadius 6 backgroundColor marker flexDirection 'row' backgroundColor borderRadius 24 paddingVertical 12 paddingHorizontal 24 borderWidth 1 borderColor markerPrice color fontWeight 'bold' markerStatus color shadow shadowColor shadowOffset width 0 height 6 shadowOpacity 0.1 shadowRadius 4 backgroundColor elevation 15 active borderColor Now, we have some inline styles as well bound to the different components in method. We need to change them in accordance with variable as well. All overall code with changes is provided in the code snippet below: renderParking() COLORS <TouchableWithoutFeedback key={ } onPress={() => .setState({ : item.id })} > <View style={{flex : 1, flexDirection : 'column'}}> <Text style={{fontSize: 16}}>x {item.spots} {item.title}</Text> <View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}> <Text style={{fontSize : 16}}>05:00 hrs</Text> </View> </View> <View style={{flex : 1.5, flexDirection : 'row'}}> <View style={{flex : 0.5, justifyContent: 'center', marginHorizontal : 24}}> <View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}> <Ionicons name='ios-pricetag' size={16} color={theme.COLORS.gray}/> <Text>${item.price}</Text> </View> <View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}> <Ionicons name='ios-star' size={16} color={theme.COLORS.gray}/> <Text>{item.rating}</Text> </View> </View> <TouchableOpacity style={styles.buy}> <View style={{flex:1, justifyContent: 'center'}}> <Text style={{fontSize : 25, color : theme.COLORS.white}}>${item.price *2}</Text> <Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text> </View> <View style={{flex : 0.5, justifyContent : 'center', alignItems : 'center'}}> <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text> </View> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> `parking- ` ${item.id} this active < = ]}> View style {[styles.parking, styles.shadow Hence, we have completely changed the color properties. Now, we are going to do the same with size properties in accordance with variable from file. SIZES theme.js Changing size properties in accordance with theme.js Here, we are going to change the size style properties with the variable from the theme.js file. All the changes made to the style properties in the component is provided in the code snippet below: SIZES StyleSheet styles = StyleSheet.create({ :{ : , : , : , : theme.SIZES.base * , : theme.SIZES.base * }, : { : , : theme.COLORS.white, : , : , : theme.SIZES.base * , : width - ( theme.SIZES.base * ) }, : { : , : theme.COLORS.white, : theme.SIZES.base * , : , : theme.SIZES.base * , : , : theme.COLORS.white, }, }); const parkings position 'absolute' right 0 left 0 bottom 2 paddingBottom 2 parking flexDirection 'row' backgroundColor borderRadius 6 padding 15 marginHorizontal 2 width 4 marker flexDirection 'row' backgroundColor borderRadius 2 paddingVertical 12 paddingHorizontal 2 borderWidth 1 borderColor Also, we have some inline size styles as well bound to the different components in method. We need to change them in accordance with variable as well. All overall code with changes is provided in the code snippet below: renderParking() SIZES <TouchableWithoutFeedback key={ } onPress={() => .setState({ : item.id })} > <View style={{flex : 1, flexDirection : 'column'}}> <Text style={theme.SIZES.font}>x {item.spots} {item.title}</Text> <View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}> <Text style={theme.SIZES.font}>05:00 hrs</Text> </View> </View> <View style={{flex : 1.5, flexDirection : 'row'}}> <View style={{flex : 0.5, justifyContent: 'center', marginHorizontal : theme.SIZES.base * 2}}> <View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}> <Ionicons name='ios-pricetag' size={theme.SIZES.icon} color={theme.COLORS.gray}/> <Text>${item.price}</Text> </View> <View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}> <Ionicons name='ios-star' size={theme.SIZES.icon} color={theme.COLORS.gray}/> <Text>{item.rating}</Text> </View> </View> <TouchableOpacity style={styles.buy}> <View style={{flex:1, justifyContent: 'center'}}> <Text style={{fontSize : 25, color : theme.COLORS.white}}>${item.price *2}</Text> <Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text> </View> <View style={{flex : 0.5, justifyContent : 'center', alignItems : 'center'}}> <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text> </View> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> `parking- ` ${item.id} this active < = ]}> View style {[styles.parking, styles.shadow Hence, we have completely changed the size properties based on the variable. SIZES Now, we are going to make the code in file more clearer and standard. For that, we are going to move some inline style properties to the component. Map.js StyleSheet Organizing Inline styles to StyleSheet Here, we are going to make our code clearer by moving our inline styles in different components to the component. For that, we need to define a style variable for each inline styles. Here, in the file, most of the inline styles are in the method. So, first we are going to define the variable for each inline styles as shown in the code snippet below: StyleSheet Map.js renderParking() StyleSheet hours : { : , : }, : { : theme.SIZES.text, : , }, : { : , : }, : { : , : , : theme.SIZES.base * }, : { : , : , : , : }, : { : , : }, : { : , : , : }, : { : , : theme.COLORS.white } flex 1 flexDirection 'column' hoursTitle fontSize fontWeight '500' parkingInfoContainer flex 1.5 flexDirection 'row' parkingInfo flex 0.5 justifyContent 'center' marginHorizontal 2 parkingIcon flex 1 flexDirection 'row' justifyContent 'space-between' alignItems 'center' buyTotal flex 1 justifyContent 'center' buyButton flex 0.5 justifyContent 'center' alignItems 'center' buyTotalPrice fontSize 25 color Now, we need to assign these properties variables to their respective component as shown in the code snippet below: StyleSheet <TouchableWithoutFeedback key={ } onPress={() => .setState({ : item.id })} > <View style={styles.hours}> <Text style={theme.SIZES.font}>x {item.spots} {item.title}</Text> <View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}> <Text style={styles.hoursTitle}>05:00 hrs</Text> </View> </View> <View style={styles.parkingInfoContainer}> <View style={styles.parkingInfo}> <View style={styles.parkingIcon}> <Ionicons name='ios-pricetag' size={theme.SIZES.icon} color={theme.COLORS.gray}/> <Text>${item.price}</Text> </View> <View style={styles.parkingIcon}> <Ionicons name='ios-star' size={theme.SIZES.icon} color={theme.COLORS.gray}/> <Text>{item.rating}</Text> </View> </View> <TouchableOpacity style={styles.buy}> <View style={styles.buyTotal}> <Text style={styles.buyTotalPrice}>${item.price *2}</Text> <Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text> </View> <View style={styles.buyButton}> <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text> </View> </TouchableOpacity> </View> </View> </TouchableWithoutFeedback> `parking- ` ${item.id} this active < = ]}> View style {[styles.parking, styles.shadow Hence, after everything is organized, we will get the same result as before which is shown in the following emulator screenshot: As we can see, the result is the same as before with all the codes organized. Section Implementing Header In this step, we are going to implement our in our Map.js file. The will contain a detected location name as shown in the Map as well as a menu icon button on the right side. In our previous parts of this tutorial series, we have already separated a function called method. This method returns the template for the section. We also have called this method in the method of our Map.js file. Header Section Header Section renderHeader() renderHeader() Header renderHeader() render() Now, we are going to add some components to method which will implement the . For that, we need to use the code from the following code snippet: renderHeader() Header Section renderHeader(){ ( <View style={{ flex: 1, justifyContent: 'center' }}> <Text style={styles.headerTitle}>Detected location</Text> <Text style={styles.headerLocation}>San Francisco, US</Text> </View> ) } return < = > View style {styles.header} </ > View Here, we have a parent component that wraps a child component with some inline flex styles. This child component wraps two components that will display the detected location name. The components are also bound to some styles. The required styles are provided in the code snippet below: View View View Text Text header: { : , : , : theme.SIZES.base * , : theme.SIZES.base * , : theme.SIZES.base * , }, : { : theme.COLORS.gray, }, : { : theme.SIZES.font, : , : theme.SIZES.base / , }, flexDirection 'row' justifyContent 'center' paddingHorizontal 2 paddingTop 2.5 paddingBottom 1.5 headerTitle color headerLocation fontSize fontWeight '500' paddingVertical 3 Hence, we will get the following result in our emulator screen: Therefore, we have got the Detected Location name with proper style in the Header section. Now, we need to add a menu icon button to the right side of the Header section. Adding Menu Icon Here, we are going to add a menu icon to the right side of the . For that, we are going to use the Ionicons component which we have already imported from the package provided by expo client. The code to add the icon is provided in the code snippet below: Header Section vector-icons <View style={styles.header}> <Text style={styles.headerTitle}>Detected location</Text> <Text style={styles.headerLocation}>San Francisco, US</Text> <View style={styles.headerIcon }> <Ionicons name="ios-menu" size={theme.SIZES.icon * 1.5} /> </TouchableWithoutFeedback> < = }> View style {styles.headerLocationInfo </ > View < > TouchableWithoutFeedback </ > View Here, we have added another child component below the component wrapping text for the detected location. View View The second child component with some inline flex styles wraps the component. View TouchableWithoutFeedback Then, the component wraps the component with the menu icon and size prop. TouchableWithoutFeedback Ionicons The required styles are provided in the code snippet below: headerIcon :{ : , : , : , }, : { : , : }, flex 1 justifyContent 'center' alignItems 'flex-end' headerLocationInfo flex 1 justifyContent 'center' Hence, we will get the following result in the emulator screen: As we can see, we have the header section with the detected location name and the menu icon to the right. Finally, we have successfully implemented the Header section in our map screen. With this, we have come to the end of this part of our tutorial. This completes our Map screen UI. Conclusion This tutorial is the fifth part of the React Native Car Parking Finder App UI clone tutorial series. In this part, we continued from where we left off in the fourth part of this tutorial series. In this part of the tutorial, we learned how to store the style properties in a separate file and use them to style the components of our screen. We also organized our styles in the StyleSheet component to make code standard and clear. Finally, we also got stepwise guidance on implementing the Header Section. In the next part of this tutorial series, we are going to implement a Modal representing the parking spot cards.
