DEV Community: Masoud Pezeshkzade

React native wallpaper app tutorial for beginners

Masoud Pezeshkzade — Mon, 07 Sep 2020 05:43:31 +0000

If you have ever tried to build your native mobile App with React Native, you may found it easy and intriguing as I did. Especially, if you are looking for a unique way to personalize your screen, I should admit you are on the right track on this page. This article, accompanied by other links mentioned in it completing the concept, is a complete guide through creating your specific wallpaper app, enabling you to modify its features as you like.

This wallpaper app has a drawer, search functionality, as well as different tabs of Community, Explore, and Favorite (first picture, inside the colored shape), looking roughly similar on both Android and iOS. You may find the source code here on GitHub, useful. Also, if you are a beginner and feel more comfortable with video tutorials, this series of YouTube videos on my channel is prepared right for you.

We will use some tools such as Expo, NativeBase, BlueStacks, and some websites like unsplash.com and reactnative.dev . If you need to know more about how to install and apply them, here you can find it out.

Ok! Let's start our project by introducing App.js including a homePage in its simple form:

import React from 'react';
import HomePage from './src/HomePage';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }

render() {

    return (
        <HomePage />
        );
     } 
  }

The homePage component, on the other hand, has a header holding three tabs, as well as a search icon, and the Favorite tab as picture 1. So, here are our states:

state = {
        favorites: [],
        isExploreLoading: false,
        searchBar: false,
        query: ''
    }

Through which our favorite pictures will be added to the "favorites" array, on click. “isExploreLoading” and “searchBar” render some parts of the application, and “query” is defined to provide search functionality by typing image name.

Now, import your chosen Header from NativeBase and create your homePage as: (the … inside the code will be completed step by step)

render() {

        return (
            <Container>
                <Header hasTabs searchBar={this.state.searchBar} >
                 …
                             </Header>
                <Tabs >
                 …
                 </Tabs>
            </Container >
        );
    }

1- SearchBar:
As the following picture shows, the searchBar holds a search icon, an input, and a “close” icon inside a transparent button.

So the “if condition” for clicking on search is:

{this.state.searchBar ?
                        <>
                            <Item>
                                <Icon name="ios-search" />
                                <Input placeholder="Search" onChangeText={this.onQueryChange} />
                                <Button transparent onPress={() => this.onSearchClick()}>
                                    <Icon name="close" />
                                </Button>
                            </Item>
                            <Button transparent>
                                <Text>Search</Text>
                            </Button>

                        </> :

Where, the "onQueryChange" and "onSearchClick" functions outside of the render enable us to search for images by their name:

onQueryChange = (query) => {
        this.setState({ query })
    }

onSearchClick = () => {
        this.setState(state => ({ searchBar: !state.searchBar, query: '' }))
    }

As picture 1 shows, there is a menu icon on the left side, a title next to the menu “My Wallpaper App”, and a search icon on the right side, if the search has not been clicked. So:

                        <>
                            <Left>
                                <Button transparent onPress={() => this.props.openDrawer()}>
                                    <Icon name='menu' />
                                </Button>
                            </Left>
                            <Body>
                                <Title>My Wallpaper App</Title>

                            </Body>
                            <Right>

                                <Button transparent onPress={() => this.onSearchClick()}>

                                    <Icon name='search' />
                                </Button>
                            </Right>
                        </>
                    }

2- Tabs:
According to picture 1, we have three tabs right below the header inside the container.

<Tabs >

     <Tab heading={<TabHeading><Text>Community</Text></TabHeading>}>
          <CommunityTab />
     </Tab>

     <Tab heading={<TabHeading><Text>Explore</Text></TabHeading>}>
          <ExploreTab />
     </Tab>

     <Tab heading={<TabHeading><Text>Favorites</Text></TabHeading>}>
          <FavoritesTab />
     </Tab>
</Tabs>

To have a cleaner code, I prefer to create each tab as a specific component imported to the homepage component. For now, we define these components in their simple form, and in the upcoming parts, we will complete them:

import React, { Component } from "react";
import {Text} from "react-native";


class CommunityTab extends Component {
    state = {};

    render() {
        <Text>Community Tab </Text>;
    }
}
export default CommunityTab;

Two other components would be generated by substituting their name in the above code.

Congrats! You finished the first part of your specific App as simple as above.
This App also includes menu, Community, Explore, and Favorite tabs need to be accomplished as the following pictures

If you are interested in finalizing this App, join us on the full article of this react native beginner tutorial on my website here, or series of videos on my YouTube channel. I wrote a detailed-oriented article on the former and created a comprehensive series of videos on the latter one to help you improve your programming skills. I hope that you find them useful.

How to Setup React Router v5 using React Hooks

Masoud Pezeshkzade — Wed, 06 May 2020 15:17:32 +0000

React Router library makes the navigation experience of the client in your web page application more joyful, but how?!

React Router, indeed, prevent the page from being refreshed. Thus the blank page resulted from a refreshed page is not displayed while the user is navigating and routing through your web. This tool enables you to manipulate your web application routes through provided routing components and dynamic routing while the app is rendering.

How to start:
You need a React web app, to get started. If you don't have, install create-react-app and launch a new project using it. Then you need to install react-router-dom, applying either npm or yarn.

npm install --save react-router-dom
yarn add react-router-dom

Now all the required components are installed. We are enabled to add any component to the App.js inside the router to build our unique web page. All these elements are the router children to which we specify their path. For instance, I add the components of Homepage, About, and Products inside the router where one can navigate through them. Also, React Router allows us to redirect our clients by a simple click on a button. To this purpose, import the Link to your component, define an onclick function for the button and redirect it to your intended path.

These are not all. There are other features in React Router. If you want to know how to install and benefit from it, join me in this YouTube video to decode the solution. I create the above-mentioned app and its components and explain all the features that we can use to improve it:

BUILDING RESPONSIVE PAGES USING FLEXBOX

Masoud Pezeshkzade — Sun, 26 Apr 2020 22:24:55 +0000

1- What is CSS FlexBox?
Flexbox is a CSS3 layout model to create a responsive page enabling the elements of the container to fit with every screen size without struggling with position and float. As a direction-agnostic layout algorithm, flexbox is free from any directional constraints in contrast to the block model and inline model that are vertically-biased, and horizontally-biased respectively. While the CSS flexbox is a one-directional layout working with either a row or a column, the CSS Grid is a two-dimensional layout capable of working with both rows and columns at the same time. The former layout is mostly applied for an application or a small-layout, and the latter is suitable for large-scale layouts.
If you want to benefit from flexbox power, this article will guide you step by step all through this way from the prerequisite concepts to flexbox features. Also, you can see my blog article to learn more about CSS grid.

2- Terminology and Core Concepts

Flexbox model is based on two perpendicular axes -main axis and cross axis- on which the flex items will be laid out depending on the values of the Flexbox properties.
axis:

main-axis: The primary axis of a container is the main axis on which all the child items are laid out, and the flex-direction property defines its direction.
cross-axis: The cross axis is perpendicular to the main axis. So, the cross axis is vertical if the main axis is horizontal and vice versa. properties:
main-start | main-end: These properties show where the item placement starts and where the item placement ends on the main axis
main size: The main-size of the container, depending on the horizontal or vertical direction, is determined by the width or the height of its largest item, respectively.
cross-start | cross-end: These properties show where the item placement starts and where the item placement ends on the main axis
cross size: The cross-size of the container, depending on the horizontal or vertical direction, is determined by the width or the height of its largest item, respectively.

3- Flex Container

After knowing the principle terminology of the flexbox, the next step is to create a container and set its value of display property to flex. This container is called a flex container containing the future children called flex items. The following code creates a flex container on which three flex items are laid out.
Code start:


.box { display: flex; }
<div class="box">
    <div>One</div>
    <div>Two</div>
    <div>Three
        <br>has
        <br>extra
        <br>text </div>
</div>

4- Flex Lines
A hypothetical line parallels the main axis, which enables flex items to be grouped, and aligned in their container is known as the flex line. A flex container can be a single-line in which all the children are laid out in a single line or multi-line in which the items are broken into multiple lines to prevent overflow.

5- Properties
I want to categorize properties into two sections of container-level properties that deal with the placement of the items in the container, and item-level properties that manipulate individual properties of each item inside the container.

5-1- Container-level properties
These properties deal with the placement, spacing, alignment, and justification of the items inside the container. The main container-level properties are mentioned in the below:

• Flex-direction: it defines the main axis direction using four possible values:
1- row (which is the default value, horizontal, left to right)
2- row-reverse (horizontal, right to left)
3- column (vertical, top to bottom)
4- column-reverse (vertical, bottom to top)

As you know, the cross axis is perpendicular to the chosen main axis now.

• Flex-wrap: this property defines whether the container is single-line or multi-line using three values:
1- nowrap (default): the single-line flex container can overflow
2- wrap: the flex items can wrap onto additional flex lines if there is no enough space in the first line.
3- wrap-reverse: Plays the same as the wrap does, but cross-start and cross-end are swapped

The cross-axis direction defines the order of stacking the lines on top of each other

• justify-content: You can use this property to align the flex items in the current line of the main axis through five values.
1- flex-start (default): Packs flex items from the beginning of the line.
2- flex-end: Packs the flex items from the end of the line.
3- center: Packs the flex items from the center of the line.
4- space-between: Evenly distributes flex items on the line.
5- space-around: Evenly distributes flex items on the line, with half-size spaces on either end.

• align-items: It aligns flex items on the cross axis via assigning the following values
1- flex-start: Packs the flex items from the cross-start of the line.
2- flex-end: Packs the flex items from the cross-end of the line.
3- center: Packs the flex items from the center of the line
4- baseline: Aligns the flex items by aligning their baselines.
5- stretch (default): Stretches the flex items from the cross-start to the cross-end;

• align-content: If there is extra space in the cross-axis, you can align the flex container lines within the same container applying the following values.
1- flex-start: Packs the lines from the cross-start of the flex container.
2- flex-end: Packs the lines from the cross-end of the flex container.
3- center: Packs the lines rom the center of the flex container.
4- space-between: Evenly distributes the lines in the flex container
5- space-around: Evenly distributes the lines in the flex container, with half-size spaces on either end.
6- stretch (default): Stretches the lines to fill the remaining space.

5-2- Item-level properties
These properties let you to manipulate the size of every individual item inside the container.
• flex-basis: As the value of width property, the flex-basis property defines the initial size of a flex item. While the default value of auto, absolute values, and percentages are applicable, negative values are invalid for this property.
• flex-grow: Also called as the flex-grow factor, this property could be assigned to expand the size of the items through remaining space of the container.
• flex-shrink: The size of the flex items could be shrined to fit when their size is larger than the flex container.
• flexbox shorthand: Three lines of coding for mentioned properties could be merged in a single line of coding by the use of the flexbox shorthand property.

This article is a guide to start your first experience of creating a flexbox layout. To Find more about CSS FlexBox and building responsive layouts with it, you can see full article on my blog.

Remote working protects your programming career against Coronavirus Pandemic

Masoud Pezeshkzade — Tue, 31 Mar 2020 20:29:20 +0000

Nothing can stop a programmer! You can always stay productive, even on Coronavirus quarantine. It is, indeed, a perfect opportunity to work remotely. If you like it, keep doing it ;)

It's so easy to start! You only need to follow a personal discipline to be welcomed to the world of remote working. Remote working is not the same as working from home on the couch while eating your breakfast. Of course, you can work at any time that you like. Just watch out for your time, though your schedule is flexible. You don't need to be an early bird, nor to work all day long. Just be wise about your timing to prevent getting behind. Create a pleasant quiet workspace. Use your ergonomic chair, stable internet connection, and second monitor, as you do in an office.

Also, you are not supposed to be available for your family all day long. You should make it clear for them that you need to maintain your focus at your home office and keep your constant communication with your coworkers if you work as a team member.

It’s that simple to start. The next step is to boost your productivity; touch the link below to make your remote working at COVID-19 quarantine a unique experience.

http://pezeshkzade.com/blog/remote-working-protects-your-programming-career-against-covid-19/

My journey from learning responsive template design using CSS Grid to teaching that

Masoud Pezeshkzade — Mon, 10 Feb 2020 14:28:43 +0000

The beginning
A month ago, I was looking for solutions of designing a responsive website using CSS frameworks. I knew that the BootStrap framework is a well-known CSS framework that will get that power to make my website responsive. I was thinking why should I use a framework in 2020 for CSS to give me responsive functionality. These days, all websites should be responsive and responsiveness is not a luxury or fancy feature for websites. I couldn't satisfy myself that I cannot have a fully responsive website with only using pure CSS. I was thinking after many years, doesn't CSS have any builtin feature to make responsive styles? Or are not they enough mature to use them without using any additional library or framework?

I checked the internet and found CSS Grid feature. I had seen several times in the other website codes or even inside Chrome Inspect Element tools while I was debugging my projects something like this:

   display: grid;

But I didn't know what is the usage of this kind of display for the element. I started reading more about CSS Grid feature until I found this CSS grid tutorial on youtube. The tutorials were published by Wes Bos and were so good to start with them. I watched every single video of the playlist and tried to check other CSS resources like CSS-Tricks . I learned everything about them and found how useful they are for designing responsive templates.

Browser support?
Whenever you get to know a new CSS feature, you will probably think the same thing. Browser Support! I was worried about how CSS Grid works in different browsers, older versions and my question was, can I rely on it for my next projects or not!

I searched and found this:

So I found browser support is quite good for it but the only problem is with CSS transitions. If you need to have transitions for changing the number of columns or rows of your grid, it is not supported yet. But in most cases, it is usable and soooooooo powerful.

Why do I think it is a powerful feature for responsiveness?
The first reason is that we will get access to great tools when using Grids:

1- FR unit! A new CSS length unit. Here you can read more about it.

2- Auto-fit and Auto-Fill! for auto-sizing columns which is really useful in terms of responsive template design. Read more about it here.

3- MinMax() feature! You can define your column width using the minmax function to specify the maximum and minimum values.

4- I built this example with only writing 23 lines of css code! You can see how responsive this is and I never used any media query to design this example!

Source code:

    .albums{
      display: grid;
      grid-template-columns: repeat(auto-fit,minmax(400px,1fr));
      align-content: center;
      grid-gap: 30px;
      transition: 2s;
    }
    .album{
      display: grid;
      grid-template-columns: 150px 1fr;
      grid-gap: 10px;
      align-items: center;
      color: white;
      background-color: #ffffff50;
      padding:20px
    }
    .album img{
      width: 100%;
      transition: 2s;
    }
    p{
      font-size: 11px;
      font-weight: normal;
    }

CSS Grid or FlexBox?

As I worked before with FlexBox in both React Native and CSS, I found both the same for some cases. Despite their superficial similarities, they are really different. In some cases, it is better to use FlexBox. For example, if you need to use CSS transitions and animations or need to show items in the opposite direction you have to use FlexBox.

Similar to building the whole page using table tag!
In the era of responsive page design, you must not use table tag to create your page structure. If you remember those days that we used table tag, aligning page structure was a relief for us. But these days we can only use table when need to show a real table. If you need that kind of relief like before, I suggest you use the CSS Grid feature. It is somehow similar to that way of structuring the page but more powerful and better.

Say goodbye to CSS float and shitty clear:both ?
Yes, I guess now it is the best time to stop using the float feature. By the power of new CSS features, we can do exactly what we were doing before with the float feature. Maybe you need to use it in some rare cases.

Tutorial ?
When I learned how to use Grids, in order to master it, I defined a practical challenge for myself. I decided to re-build the main page of the YouTube page and only use CSS Grid. This practice was awesome for me and I learned a lot from it. Then I decided to make several tutorial videos about it to show you how easily you can use CSS Grids to build a responsive layout for your projects.
You can watch two recent episodes of this tutorial and learn all in less than one hour.

The first part: designing the head bar

The second part: designing the left sidebar

Looking for more? Please subscribe to my YouTube channel in order to receive notifications when new episodes are out.

State management in ReactJS using Redux library

Masoud Pezeshkzade — Thu, 28 Nov 2019 09:07:58 +0000

There are several options for managing state inside ReactJs projects. You may have heard about libraries like Redux, Context API, Mobx and Unstated. In this article we are going to describe more about state management and Redux.

My story:
When I started working with React Native, as a native mobile developer, I found states scary and weird. In Java, we have Intents and Application class to send data between pages and store global variables. But none of them exists in React Native. Plus, In my first app, I didn't know why should we use a third-party to manage the application state while we have built-in state API. At that moment I just followed some tutorials about Redux and its implementation in React projects. Now after developing several applications with React and state managers, I found how state management can be useful to make our project structure better, project lines of code lower and your project more understandable for other developers. The thing is in big-scale projects, using state managers is a must!

I know that at first, maybe it will be wired and scary for you if you don't have a strong javascript understanding yet, but try to use it like me and don't blame yourself if you could not understand it deeply. Even today that I am writing this blog post, state management, and Redux is not easy peasy for me but I have to use it. I hope this article helps you to understand Redux better.

Redux
Redux is the first library that solved state management in React. It is so popular among React developers. In Redux we have several key elements:

1- Store: all our data will keep here.
2- Actions: they let us to send our data to Redux. Technically they are simple javascript objects that must have a type and can include several key-value data.

{
   type:"LOGIN_SUCCESS",
   token:"user token here ..."
}

We can also have action creators for ease:

function loginSuccess(token){
    return {
        type:"LOGIN_SUCCESS",
        token
    }
}
function logout(){
    return {
        type:"LOGOUT"
    }
}

3- Dispatch: it is a redux API that runs our actions. In fact, in order to save our data, we should run our actions using dispatch API.

store.dispatch(loginSuccess()); //dispatch api only accept javascript objects

4- Reducers: they are just pure javascript functions that accept actions as their argument and decide what to save in store when an action is sent to them.

const defaultState={
    auth: false,
    token: null
}

export default function users (state=defaultState, action){

    switch(action.type){

        case "LOGIN_SUCCESS":
            return {
                ...state,
                auth: true,
                token: action.token
            }
        case "LOGOUT":

            return {
                ...state,
                auth: false,
                token: null
            }

        default: 
            return state;
    }

}

** Keep in mind that you must not have any side effect operation inside your reducer function. For example, you cannot fetch data from your API inside your reducer function. If you are looking for more detail about PURE functions in javascript, please check this blog post.

** Writing only one general reducer? Redux accepts only one reducer but it is a bad practice to have a big general reducer function. It is better to write reducers based on their functionalities. For instance, we can have a reducer for users' stuff and one another for notifications and so on. At the end of the article, you see how we can use combineReducer API to merge all reducers to one.

Connecting your app to Redux
The next part is installing the Redux library and connecting your app to it.

npm install --save redux react-redux

After installing libraries open index.js file. At first, it should look like it:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

We need to change it to:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {createStore,combineReducers} from 'redux' //1
import users from './redux/users'//2
import {Provider} from 'react-redux' //3

const reducers=combineReducers({notifications}) //4
const store=createStore(reducers); //5


ReactDOM.render(<Provider store={store}><App/></Provider>, document.getElementById('root')); {/* 6 */}

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Line 1: importing createStore and combineReducers API's from redux package.
Line 2: importing our reducers. remember we have only one reducer but you can have as many as you need.
Line 3: importing Provider component. The provider component lets us connect our app to our store.
Line 4: combining all reducers to one reducer using combineReducer API. In the case of having several reducers we should write like this:


const reducers=combineReducers({users,notifications,test1,test2})

Line 5: Creating our store based on main reducer.
Line 6: Putting component inside .

Read and write state
Now everything is ready and we can read and write our states. You only need to connect your component to the Redux to complete your job.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux';
import {login,logout} from './redux/users';

class App extends React.Component{


  componentDidMount(){
    setTimeout(() => {
      this.props.login("token here...") //1
    }, 1000);

    setTimeout(() => {
      this.props.logout(); //2
    }, 5000);

  }
  render() {

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            USER TOKEN :
          </p>

          {this.props.users.auth && <p>{this.props.users.token}</p>} {/* 3 */}

        </header>
      </div>
    );
  }
}

function mapStateToProps(state){
  return{
    users: state.users
  }
}

const mapDispatchToProps={login,logout}

export default connect(mapStateToProps,mapDispatchToProps)(App); //4

Line 1 & 2: here we are calling our actions. Redux will send our actions to dispatch API and then passes it to our reducer...

Line 3: reading state from redux. Our component will be re-rendered when the user data changes.
Line 4: connecting our App component and then export it.

Github repository of this tutorial
Developers like to learn things through code examples. If you are looking for a working demo, you can check out my React Redux Github branch here . It is a basic react application that I implemented Redux in it. The reason why I made this repository is that it's gonna remind me implementation of all the useful libraries in Redux instead of looking on the internet for it. That is why I name it React Reminder. You can use this repo or you can have yours.

Summery
Redux is one of the useful libraries to manage your React application state. There are other options for you to do state management in your application like Context API. It is worth to take a look at other options before using Redux. In this article, we talked about how important state management is and showed how you can implement one of them in your projects step by step.
For more information about Redux, you can read its official documentation. If you are curious to learn more about Redux, I recommend you take a look at it's middlewares like Redux-Thunk and
specially Redux-Saga.

How to rapidly update your React Native android project using Code Push without app store upload

Masoud Pezeshkzade — Fri, 08 Nov 2019 08:16:57 +0000

These days React Native has become so popular among developers. React Native lets us to develop mobile applications that technically are able to run on Android and IOS platforms.

When you built your app and everything is ready for publishing it,
you have to submit your app in the app store and wait until they review and publish it for you. There are some cases that you need immediately update your app. For example, there is a critical bug in your release version.

In this case, you should build another version and submit it and wait for the review process. Plus, most users do not update their applications immediately. So these users will face errors and unluckily some of them will write bad reviews for your application.

Fortunately, Code Push library has solved this problem for our react native developers. While your application support code push, there is a way to update your app without sending any file to the app store and even your users don't need to update your application.

All the instructions for implementing Code Push library into your project have been described in my youtube channel.