Build Wordpress Client App with React Native #3: Handle Navigation

Build Wordpress Client App with React Native #3: Handle Navigation

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. …

This series intends to show how I build app to serve content from my WordPress blog by using react native. Since, my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme , offline mode, infinite scroll and many more. You can discover much more in this series.this inspiration to do this tutorial series came from the Mobile Templates from instamobile

Now, we need to organize our project structure with all the files and folders and also set up the navigation.

For that, we are going to install the react-navigation package version 4 and all its required dependency packages. Recently, most of the components and modules delivered by the react-navigation package have been separated into different packages. Hence, we need to install other packages as well in order to make our navigation fully work. For that, we need to run the following command in our project repository:

ReactNative vs NativeScript – Choosing the best framework

ReactNative vs NativeScript – Choosing the best framework

Which one would you choose to create a perfect mobile solution for your business? ... React Native And NativeScript As The Most Popular Mobile Development . This article will our brief comparison of React Native and NativeScript development frameworks ...

Which one would you choose to create a perfect mobile solution for your business? ... React Native And NativeScript As The Most Popular Mobile Development . This article will our brief comparison of React Native and NativeScript development frameworks ...

Due to the expanding mobile development industry, it is nearly impossible to choose the best tool for implementing the most lucrative and innovative ideas.

Competition is neck-to-neck! As for me, I would prefer to choose a framework that provides impeccable performance while at the same time is developer-friendly.

Our focus for today is to hand-pick a popular, reputable and easy-to-use best development framework between React Native and Native Script.

ReactNative vs NativeScript: I know questions like Which one is better? Which one is stronger? Which one would you prefer to offer a qualified mobile solution for your business today?

Might be taking a better part of your thoughts right now, isn’t?

I will answer these questions by analyzing and comparing the two frameworks and taking into account their differences. I hope this will leave you in a better position to make an informed choice.

First, let’s start with:

React Native

React Native is a product of Facebook Inc. It is an extension of React JS hence shares tools and principles.

React Native lets you compose a rich mobile UI using declarative components. The main focus of the framework is visual effects, user interface, and impeccable building blocks.

import React, { Component } from "react";

import { Text, View } from "react-native";

class HelloReactNative extends Component {
render() {
return (

If you like React.js, you will also like to React Native.

Instead of 'div' and 'span', you will use native components like
'View' and 'Text'.



);
}
}


  • React Native lets you build apps faster with hot reloading.
  • It is possible to run new code while retaining your application state.
  • React Native updates the user interface with the help of virtual DOM.
  • It smoothly combines with components written in Swift, Java, or Objective-C.
  • It is simple to drop down to native code if you need to optimize certain aspects of your app.
  • It is also easily building a part of the app to React Native and another part of your app using the native code directly.
import React, { Component } from "react";
import { Text, View } from "react-native";
import { MapViewComponent } from "./your-native-map-implementation";

class CustomMapView extends Component {
render() {
return (



MapViewComponent could use native Swift, Java, or Objective-C - the
the product development process is the same.



);
}
}

Aside from the many features and functionality I have mentioned so far, React Native is a cross-platform development tool, therefore, the same codebase run well on any device.

Giant companies like Instagram, Skype, Townske to mention but a few uses React Native.

Up until now, I believe you have the confidence to stick around with React Native for life, apart from one downside: conversion full of bugs.

Many bugs may reveal themselves when the HTML code is converted to the native code, which is time-consuming and difficult to fix.

I say difficult because React Native was originally designed for iOS development, therefore needs iOS knowledge to deal with the complications.

NativeScript

NativeScript enables you to build a truly native app for Android, iOS, and web from a single JavaScript codebase with the support for TypeScript, CSS and popular frameworks like Angular & Vue.js.

One fascinating thing that I like about NativeScript is the ability to let you build apps with the technologies you are conversant with and does the rest under the hood.

Why NativeScript?

It has a NativeScript playground which is a web-based resource to help novice and real developers get started in minutes.

The NativeScript sidekick is a faithful companion for NativeScrpt developers. NativeScript lets you focus on building exciting parts of your mobile app and let sidekick deal with the elephant in the room, does the rest for you.

NativeScript allows writing code in JavaScript and TypeScript as I mentioned earlier, that is why it resonates well with the needs of many developers.

Developers with experience in Angular 2 feel some comfort with NativeScript because of the same front-end development tools and the same structure for creating components.

Core features of NativeScript

  • Declarative style simplifies creating mobile components
  • UI Native code is used no matter the language your code is in
  • Best for building apps for commercial needs
  • Set up NativeScript by adding one line of code only.
  • NativeScript provides software developers full access to API

Cons associated with NativeScript

  • Large APKs: sometimes certain app’s installer is bigger than the size of the app itself
  • Many plug-ins by the development community aimed at improving performance and extending functionalities have not been tested yet.
  • NativeScript does not support HTML and DOM, which leads to complicated development processes.

So far so good, the battle of titans continues, NativeScript vs React Native

. As we have seen, both rivals demonstrate a high level of performance and functionality, but still, we are obliged to make a choice.

Now, what next? I will draw their differences maybe this will help us reach a decision.

I will employ the following metrics in my analysis; used technologies, the performance of each tool and extensions & community around each. Straight to the point:

Used technologies

React Native uses React.JS while NativeScript employs Angular.JS. Inform your choice by comparing React Native vs Angular friendly frameworks. That sounds better and leaves you at an edge.

Performance

React Native provides experience as close as native sounds and top performance.

On the other hand, rendering slows down NativeScript apps. Generally, NativeScript apps are larger and as the word goes ‘size influences performance’

Extensions and community

Both teams have a dedicated community surrounding it.

As you know React Native was developed by the tech giant Facebook, you can imagine massive community striving to extend React Native functionality, no wonder the daily plug-ins to support the tool.

On the contrary, NativeScript does not rally a vibrant community behind it, therefore, slow development compared to React Native.

Conclusion

Both React Native ad NativeScript have their own strengths and weaknesses, however, you are bound to make the right choice by doing a deep research of both frameworks before settling on one. My promise to you, you will finally choose a development tool based on your project needs and expected deliverables.

Car Parking Finder App UI Clone in React Native #3 : Parking Spot Cards - Kriss

Car Parking Finder App UI Clone in React Native #3 : Parking Spot Cards - Kriss

This tutorial is the third part of our React Native Car Parking App UI clone series. In the [previous part](https://dev.to/absek/car-parking-finder-app-ui-clone-in-react-native-2-scrolling-swiping-transition-kc1), we successfully implemented the...

This tutorial is the third part of our React Native Car Parking App UI clone series. In the previous part, we successfully implemented the scrolling transition of car parking spots. In this tutorial, we are going to continue from where we left off in the last part. So, it is recommended to go through the previous part in order to get the full insight into the project.

As stated in the previous parts, the tutorial series was inspired by the Store Locator App template 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 second part is also the continuation of coding implementations and designs from the Youtube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial uses the fast coding technique to implement this UI clone which may be difficult to grasp for any developer especially the beginners. This written tutorial provides the step by step implementation which will be easier to understand and implement.

Overview

In this third part of this tutorial series, we are going to add additional information to our parking spot cards of the parking section in the map screen as well as style it correctly. The idea is to integrate the car parking spot data into the parking spot card that we implemented with the scrolling transition in the last tutorial. Then, we are going to add some components and button styles to the card as well in order for it to look appealing. We are also going to use vector icons and style them properly.

So, let us begin!!

Adding Car Parking Spot Info

Here, we are going to add some additional car parking spot information to our parking spot card in the parking section. We are also going to style it in order for it to look appealing. Now, we are going to use some additional data from parkingSpots array and use it in the renderParking() method as shown in the code snippet below:

renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
            <View style={{flex : 1, flexDirection : 'column'}}>
              <Text>x {item.spots} {item.title}</Text>
            </View>
            <View style={{flex : 1}}>
              <Text>${item.price}</Text>
              <Text>{item.rating}</Text>
            </View>
          </View>
      )
  }

Here, we have the parent View component wrapping two child View components. The first child View component has some inline styles with spots and title information. And, the second View component has price and rating information. The required style is provided in the code snippet below:

parking : {
    flexDirection : 'row',
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 24,
    marginHorizontal: 24,
    width : width - ( 24 * 2 )
  }

Hence, we will get the following result in our emulator screen:

As we can see, some additional parking spot information has appeared on the parking spot card. But, we need to add more information from our parkingSpots array.

Adding Time Value for Parking Spot Cards

Here, we are going to add the time value for each parking spot cards. For that, we need to define a state called hours as shown in the code snippet below:

state = {
    hours: {},
}

Read More...

The post React Native Car Parking Finder App UI Clone #3 : Parking Spot Cards appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.

React Native Car Parking Finder App UI Clone #4 : Map Markers - Kriss

React Native Car Parking Finder App UI Clone #4 : Map Markers - Kriss

This tutorial is the fourth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the car parking spots section. In this part of the tutorial series, we are going to continue from where we left off...

This tutorial is the fourth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the car parking spots 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 the previous parts of this tutorial series in order to get the full insight and development of the project.

As mentioned in the previous parts, the inspiration of this tutorial came from the Store Locator App template that provides us with an amazing, 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 fourth part is also the continuation of coding implementations and designs from the YouTube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial uses a fast coding style to deliver the overall tutorial to the viewers which may be difficult to grasp for any developer especially the beginners. This tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to implement the UI.

Overview

In this fourth part of the tutorial series, we are going to add the custom Map Marker which will represent the car parking spot locations on the map. The idea is to integrate the Marker component provided by MapView component into the MapView in order to show the default location markers. Then, we are going to customize the markers in order to make it as in the actual app. Lastly, we are going to add the active style to each map marker.

So, let us begin!!

Changing SrollView to FlatList

Firstly, we are going to make an extra change to our ScrollView in renderParkings() method. Here, we are going to change the ScrollView into FlatList in order to change our parking spot cards in the parking section into the list. By changing it into FlatList, we will get all the advantages offered by FlatList component as well as can include the ScrollView props into the FlatList component. The coding implementation for this is provided in the code snippet below:

renderParkings(){
      return(
        <FlatList
          horizontal
          pagingEnabled
          scrollEnabled
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          snapToAlignment="center"
          style={styles.parkings}
          data={parkingsSpots}
          keyExtractor={(item, index) => `${item.id}`}
          renderItem={({ item }) => this.renderParking(item)}
        />
      )
}

Here, we have replaced the ScrollView with FlatList component. Most of the required props that we integrated to the ScrollView for a smooth swiping transition are also incorporated in the FlatList component. The extra props that we have added are the data for the parkingsSpots , keyExtractor in order to identify each item in the list uniquely and renderItem which will return the template. FlatList loops through each element of our parkingsSpots array and return the list view which can be customized as a template in the renderItem prop.

Note that, we should not forget to import the FlatList component from the react-native package.

Now, we are also going to add a react hook called componentWillMount(), which will change the state of our hours state to 1 as shown in the code snippet below:

componentWillMount() {
    const hours = {};
    parkingsSpots.map(parking => {hours[parking.id] = 1});
    this.setState({ hours });
  }

Now, we should get the same result as we did before with ScrollView. Hence, if we re-run the emulator, we will get the following result in our emulator screen:

Adding the Map Markers

Here, we are going to add the Map Marker to our MapView component. For this, we will need to add some additional coordinate data to our parkingsSpots array data as provided in the code snippet below:

Read More...

The post React Native Car Parking Finder App UI Clone #4 : Map Markers appeared first on Kriss.

Disclosure

This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.