Skip to content

Author: mpezeshkzade

How to build a wallpaper app in react native for beginners

React Native is a JavaScript framework to build native applications for Android and iOS. If you have the experience of developing mobile apps, you will find React Native surprisingly easy to work and create native apps.

Using the wallpaper app is a great way to make your screen personalized, and if you are into creating a special one by your programming skills, you are on the right track on this page. We are delighted that you have joint us in completing this app if you are new here.

In this article, I will create a wallpaper app using React Native that looks almost similar on both Android and iOS. It has a drawer, search functionality, as well as different tabs of Community, Explore, and Favorite (picture 1, inside the colored shape). So, join me if you want to create your React Native wallpaper app. This article covers everything you need, and the source code is on https://github.com/mdeveloper20/react-native-wallpaper . However, if you are a beginner and need detailed information, watch this series of YouTube videos on my channel about creating this wallpaper app.

Ok, Let’s kick start our project by introducing the useful tools of which we will take advantage. The first one would be the React Native website https://reactnative.dev/ .

https://expo.io/ is another useful tool enabling us to share our app with our friends in order to debug the created application without sending it to the app store. You can download it from google play store. Then, we need to install “Expo CLI” through either of the following codes by running it in terminal:

npm install expo-cli –global

yarn global add expo-cli

And “Expo font” through:

expo install expo-font

yarn add expo-font

Since this tutorial excludes the back-end side, I will use unsplash docs just as the API in this practice to get the required data and pictures (respecting the Unsplash policy).

Also, every necessary element of the user interface is taken from https://nativebase.io/ . You can install it using:

npm install native-base --save

The last tool is the BlueStacks that we will use to run the application.

Ok! Now every needed tool is ready for us to start coding.

  • App.js file:

Here is App.js in a simple form including a “homepage” component.  

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

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

render() {

    return (
        <HomePage />
        );
     } 
  }

Both “npm start” and “expo start” commands in TERMINAL could be used to run the expo.

  • HomePage component:

As it is shown in picture 1, the homepage component has a header holding three tabs, as well as a search icon, and the capability of adding favorite pictures to the Favorite tab. So, we need to define states as:

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

Our favorite pictures on which we click will be added to the “favorites” array. “isExploreLoading” and “searchBar” will be used to render different parts of the application, and “query” is defined to provide search functionality for the users by typing image name.

As we said, we will use the native base library to create the user interface inside the “render”. You can scroll down the “component” section of this website to see different elements and choose a header. We will modify it in our application. According to the documentation, every element should be wrapped inside a “container” while using NativeBase. So, import the “Header” from NativeBase and locate it inside a container as following: (the … inside the code will be completed step by step in this article)

render() {

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

1- Header:

1-1- searchBar:

The searchBar is displayed with an “input”, a “close” icon inside a transparent button, and a “search” icon if it’s been clicked. (The following picture)

and here is the “if condition” while we click on search: (Like me, you may prefer to use Ionicons.)

{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>

                        </> :

Also, 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: '' }))
    }

When the search is not been clicked, we have a drawer and a menu icon inside a transparent button on its left side (picture 1). Also, there is a title next to the menu “My Wallpaper App”, and a “search icon” inside a transparent button on the right side. The “else condition” is:

                        <>
                            <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>
                        </>
                    }

Make sure that you have imported “body” from “native-base” library.

1-2- Tabs:

According to the picture 1, there are three tabs right below the header component 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>

As you see, each tab has a specific component that we should import to the homepage component and call them inside the related tabs.

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;

We can create two other components by substituting their name in the above code.

Congrats! You’ve finished the first step of creating your App. In the next section, we will proceed with developing our app by creating the navigation bar (drawer).

  • Menu icon

We created a drawer at the top left of our application, and we will create what is inside the menu when it is clicked (picture 3)

Ok! Let’s start by creating a “SideBar” file and “index.js” inside it. Soon, we will connect it to the “App.js”. Like before, all the elements should be wrapped inside a “container:

import React, { Component } from 'react';
import { Container, Text, ListItem, Left, Icon, Body, Content } from 'native-base';
import { Grid, Row } from 'react-native-easy-grid';

export default class SideBar extends Component {
    render() {
        return <Container>
            <Grid >
                
              ...

            </Grid>
        </Container>

    }
}

Where we’ve already installed React Native Easy Grid by:

npm install react-native-easy-grid --save

As you see in the picture 4, we have two rows in this section inside the colored shapes.

picture 4

One of them holds the app name “My Wallpaper App”.

<Row style={styles.box} >
                    <Text My Wallpaper App</Text>
                </Row>

The other one includes three items inside a “container” with which the user is directed to other parts of the app. So, import the “ListItem” from native-base and:

<Row>
                    <Content>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text >Home Page</Text>
                            </Body>
                        </ListItem>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text >Contact Us</Text>
                            </Body>
                        </ListItem>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text >More Apps</Text>
                            </Body>
                        </ListItem>
                    </Content>
                </Row>

Here we aligned the rows to the left and then added “Home Page”, “Contact Us” and “More Apps” inside the body.

Connect the sideBar to the App.js:

First, import the component into the App.js file. Then, we will easily add the sideBar to it by wrapping it inside a “Drawer” component and passing the props:

<Drawer
          ref={(ref) => { this._drawer = ref; }}
          content={<SideBar />} >
          <Container>
            <HomePage openDrawer={this.openDrawer.bind(this)} />

          </Container>
        </Drawer>

and the functions outside the render with which the drawer is being opened and closed are:

closeDrawer() {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this._drawer._root.open()
  };

Add style:

Good! If you run the code, you must have a simple page without any style, and if you have any problem concerning the coding, you may find this YouTube video tutorial or this Github source useful.

It’s time to take one step further and write a style for sidebar component and make the page beautiful. For this purpose we need to import StyleSheet by:

import { StyleSheet } from 'react-native';

and this is my style:

const styles = StyleSheet.create({
    box: {
        height: 200,
        alignItems: 'flex-end',
        backgroundColor: '#202991',
        padding: 20,
        marginBottom: 30
    },
    appName: {
        color: 'white',
        fontSize: 25
    },
    text: {
        color: 'black'
    },

});

You may also try your style. It could be more beautiful than mine, even. BTW, don’t forget to add your style to your components:

<Row style={styles.box} >
                    <Text style={styles.appName}>My Wallpaper App</Text>
                </Row>
                <Row>
                    <Content>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text style={styles.text}>Home Page</Text>
                            </Body>
                        </ListItem>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text style={styles.text}>Contact Us</Text>
                            </Body>
                        </ListItem>
                        <ListItem icon>
                            <Left>
                                <Icon active name="ios-arrow-dropright" />

                            </Left>
                            <Body>
                                <Text style={styles.text}>More Apps</Text>
                            </Body>
                        </ListItem>
                    </Content>
                </Row>

Well done! Pat yourself on the back for the next part of the App that you have completed. Next section, covers the “community” tab of three tabs of the “homepage” section

  • Community tab

Previously we created a simple community tab, and now we will complete it (colored shaped inside the following picture).

First of all, I import the “view” component, working as a container, from react-native and set a “style” for it will be complete later. Also, I need to import “FlatList” from react-native since I want to show items in a list. So, we have:

render() {

        return (
            <View style={styles.MainContainer} >

                <FlatList
                    data={this.state.users}
                    renderItem={this.renderRow}
                    keyExtractor={(i) => i.id}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => !this.state.isLoading &amp;&amp; this.loadData(this.state.page + 1)}

                />
            </View>
        );
    }

in which the state of “users” are passed to “data” as props, the “keyExtractor” is used to specify a key for every element to prevent getting the warning, “onEndReached” displays new items while scrolling, and “renderItem” is a function outside of the render to execute every list item:

renderRow = ({ item }) => {

        return <ListItem thumbnail>
            <Left>
                <Thumbnail square source={{ uri: item.avatar }} />
            </Left>
            <Body>
                <Text>{item.name}</Text>
                <Text note numberOfLines={1}>{item.bio}</Text>
            </Body>
            <Right>
                <Button transparent>
                    <Text>View</Text>
                </Button>
            </Right>
        </ListItem>
    }

Do not forget to import “Left” and “Body” from native-base.

Now let’s go to the beginning of the loop to create the “style”. So, import the “StyleSheet” from react-native and define a container inside “const style”:

const styles = StyleSheet.create({
    MainContainer: {
        justifyContent: "center",
    }
})

Outside of the render define state as:

constructor(props) {
        super(props);

        this.state = {
            users: [],
            isLoading: true,
            page: 1

        }

    }

Also, call data through:

componentDidMount =async () => {

         await this.loadData(1);
         this.loadData(2)

    }

in which the “load Data” accepts the “page” as the variable. As we said before, since this tutorial does not cover backend, data is taken from unsplash.com using “fetch”. Then it will be converted to the JSON using “await” and will be set as the state in “setState”:

loadData = async (page) => {
        this.setState({
            isLoading: true
        });

        const response = await fetch(`https://api.unsplash.com/search/users?client_id=${accessKey}&amp;page=${page}&amp;query=community`);

        const data = await response.json();

        this.setState(state => ({
            users: [...state.users, ...data.results.map(i => ({
                id: i.id,
                name: i.first_name,
                avatar: i.profile_image?.medium,
                bio: i.bio
            }))],
            page,
            isLoading: false
        }));
    }

“map” is used to remove unnecessary elements in “setState”.

Congrats! You are one step closer to completing your specific app. Next sections are dedicated to “Explore” and “Favorites” tabs, respectively.

  • Explore tab

Let’s complete “Explore” tab by editing render function using the “View” container and set a style.

render() {

        return (
            <View style={styles.MainContainer} >

                <FlatList
                    data={this.state.images}
                    renderItem={this.renderRow}
                    numColumns={3}
                    keyExtractor={(i) => i.id}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => !this.state.isLoading &amp;&amp; this.loadData(this.state.page + 1)}
                    onRefresh={() => this.onRefresh()}
                    refreshing={this.state.isRefreshing}
                />
            </View>
        );
    }

Where state of images is passed to the data props inside the “FlatList”. “FlatList” shows one item in every row by default, but it can be adjusted using “numColums”. “onEndReached” loads more data while the user scrolls and request more data from the server. “onRefresh” function, outside of render, helps us to get the first data after scrolling down:

onRefresh = () => {
        this.setState({
            images: [],
            isRefreshing: true
        }, () => this.loadData(1));
    }

In which the loader animation would be displayed while the page is getting refreshed.

Also, the “renderRow” function is specified to render every item:

renderRow = ({ item }) => {

        return <ImageItem addToFavorites={this.props.addToFavorites} item={item} />
    }

You may want to write the “ImageItem” inside the explore tab; However, I prefer to make a cleaner code using an “ImageItem” component as following:

import React, { Component } from 'react';
import { Text, Thumbnail, View, Icon } from 'native-base';
import { TouchableWithoutFeedback } from 'react-native';

class ImageItem extends Component {
    state = {
        isFavorite: false
    }

    render() {
        const { item } = this.props;
        return (<TouchableWithoutFeedback onPress={() => {
            this.props.addToFavorites(item);
            this.setState({
                isFavorite: !this.state.isFavorite
            })

        }}
        >
            <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
                <Thumbnail style={styles.imageThumbnail} source={{ uri: item.url }} />
                <View style={styles.imageOverlay}>
                    {

                        this.state.isFavorite &amp;&amp; <Icon name='heart' style={{ fontSize: 50, color: 'red' }} />
                    }

                    {item.description &amp;&amp; <Text numberOfLines={1} style={styles.imageOverlayText}>{item.description}</Text>}
                </View>
            </View>
        </TouchableWithoutFeedback >);
    }
}

export default ImageItem;

Render first get the “item” from “props”. You may also use “TouchableOpacity” instead of “TouchableWithoutFeedback” to inform the user whether the item has been clicked or not by showing an animation. After setting props and state inside the “onPress” function, we will show our image within the “TouchableWithoutFeedback” using the “View” component. “Thumbnail” specifies images downloaded from the server, and the second “View” component adds a “heart” item and a description to the favorite image.

The only thing that is remained is the “style” for the “ImageItem” component. Here is what I wrote.

const styles = StyleSheet.create({

    imageThumbnail: {
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: 200,
        borderRadius: 0
    },

    imageOverlay: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'flex-end',
        alignItems: 'center',
        backgroundColor: 'rgba(0,0,0,0.1)'
    },

    imageOverlayText: {
        color: 'white',
        textAlign: 'center',
        padding: 4,
        width: '100%',
        textShadowColor: 'rgba(0, 0, 0, 0.75)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 10,
        borderRadius: 10,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',

    }
});

Note: Do not forget to import StyleSheet from react-native.

Back to the “Explore” tab, it’s time to define the “state” inside the “class component”:

state = {
        images: [],
        isLoading: true,
        isRefreshing: false,
        page: 1
    }

and the “componentDidMount” to load data from the first page:

componentDidMount() {
        this.loadData(1);
    }

On the other hand, if the user types something new, we need to get new data according to the new query. So:

componentDidUpdate(prevProps, prevState) {
        if (prevProps.query !== this.props.query) {
            this.loadData(1);
        }
    }

in which the “loadData” function in both of them is:

loadData = async (page) => {
        this.setState({
            isLoading: true
        });
        const query = this.props.query;
        this.props.setExploreLoader(true);

        const response = await fetch(`https://api.unsplash.com/search/photos?client_id=${accessKey}&amp;page=${page}&amp;query=${query ? query : 'wallpaper'}`);

        const data = await response.json();
        const newImages = data.results.map(i => ({
            id: i.id,
            url: i.urls.small,
            description: i.description,
            isFavorite: false
        }));

        this.setState(state => ({
            images: page === 1 ? newImages : [...state.images, ...newImages],
            page,
            isLoading: false,
            isRefreshing: false
        }));
        this.props.setExploreLoader(false);
    }

The “loadData“ function gets the query from the server after setting the state. Also, we have defined setExploreLoader function in order to show loading in the parent component, which will be used in the home component later on. Then, we need to call a fetch for a response and get data from it.

The map is applied to remove unnecessary data of images.

Also, the favorite list would not include an image unless the user clicks on it. So, “isFavorite” state is false for all the images at first.

Now, it’s time to set the new states in the “loadData” function. For the images, the new items should be displayed if we are on the first page; otherwise, both current items and new items should be displayed. “setExploreLoader” is false to hide loader from the home component.

Add Explore to the homepage

In this part, we will add this component to its parent component. So, open your homepage, and add the following function to the class component to pass state from child to the parent component:

setExploreLoader = (isExploreLoading) => {
        this.setState({
            isExploreLoading
        })
    }

The following changes should be added to the Explore tab inside the render, too, to show the loader animation in this tab bar, and also pass as a prop to the Explore tab

<Tab heading={<TabHeading>
        <Text>Explore</Text>
             {this.state.isExploreLoading &amp;&amp; <ActivityIndicator size='small' />}

             </TabHeading>}>
             <ExploreTab query={this.state.query} setExploreLoader={this.setExploreLoader} addToFavorites={this.addToFavorites} />
</Tab>

Do not forget to import “ActivityIndicator” in the heading lines:

import { ActivityIndicator } from "react-native";

and finally here is my designed style for “Explore” tab via importing StyleSheet from react-native.

const styles = StyleSheet.create({

    MainContainer: {
        justifyContent: 'center',
        flex: 1,
    },

});

  • Favorite Tab:

Using the “View” component again, we will start upgrading the favorite component inside the render.

render() {

        return (
            <View style={styles.MainContainer} >

                <FlatList
                    data={this.props.favorites}
                    renderItem={this.renderRow}
                    keyExtractor={(i) => i.id}
                    numColumns={2}
                    ListEmptyComponent={this.renderEmptyContainer()}

                />
            </View>
        );
    }

“FlatList” displays the items in which the props of favorites are passed to the “data”.

“renderRow” outside of the render gets an item and returns a “Thumbnail” as before:

renderRow = ({ item }) => {

        return <View style={{ flex: 1, flexDirection: 'column', margin: 1 }}>
            <Thumbnail style={styles.imageThumbnail} source={{ uri: item.url }} />

        </View >
    }

“ListEmptyComponent” shows the user a custom message if there is no data to display.

renderEmptyContainer = () => {
        return <View style={styles.emptyList} ><Text>The list is empty</Text></View>
}

and this is my style:

const styles = StyleSheet.create({

    MainContainer: {
        justifyContent: 'center',
        flex: 1,
    },

    imageThumbnail: {
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        height: 600,
        borderRadius: 0
    },
    emptyList: {
        marginTop: 100,
        justifyContent: 'center',
        alignItems: 'center'
    }

});

Connect Favorites to the homePage

Now we should pass the props from the homepage component to the favorite component. So, open your homepage component and take a look at the favorite state that we defined before, and pass it to the FavoritesTab using below code:

                        <FavoritesTab favorites={this.state.favorites} />

We should also pass “addToFavorites” function from the homepage to the “Explore” tab, and from the “Explore” tab to the “ImageItem” (“addToFavorites” was defined inside the “ImageItem” inside the “renderRow” function, and was passed to the explore tab, before).

“addToFavorites” function inside the homepage component gets item and callback:

addToFavorites = (item, cb) => {
        const favorites = Object.assign([], this.state.favorites);
        const index = favorites.findIndex(f => f.id === item.id);

        if (index === -1) {
            favorites.push(item);

        } else {
            favorites.splice(index, 1);

        }
        this.setState({
            favorites
        });

    }

const favorites assigns the favorites state to a variable, and the next const defines the index of the favorite picture. If the index is -1, it is not in the favorite array, and it should be added into it.

That’s it! Now go to the explore tab and click on some photos. You will find them in the favorite tab then.

Well done! Your wallpaper app is finished. Enjoy it. I hope that you have found it useful!

You may also be interested in other topics and series of programming. Here is my Youtube channel in case you are curious about developing your programming skills. Join us in the community of developers to make impressive progress.

Drag & drop feature with React Beautiful DND library + Video

If you ever think about making your web application more interactive or managing data in your app, you may find the drag & drop a useful feature.

Drag & drop is a common feature of modern web applications these days, making the web pages more interactive. There are a bunch of libraries available for programmers to implement this feature in the form of React components. Among them, the react-beautiful-DND is a useful library to make a react component draggable and droppable easily, working with simple javascript concepts. In this article, we will utilize this library to create our draggable component and droppable items. So, this article is yours if you are curious about how to apply the react-beautiful- DND library to create drag & drop functionality. Also, if you find a video tutorial more engaging way to learn, this Drag & Drop Tutorial for ReactJs video on YouTube is for you. You can watch this video at the end of this post!

Ok, Let’s jump to an upper level of programming by reading this article. Consider we have a component including different items such as the following picture, and we tend to implement drag & drop features to provide users with changing the items’ order.

ReactJs Drag and Drop Using React Beautiful DND library

We have an ‘App.js’ file, including a ‘div’ for the title in which the ‘UsersPage’ component is located. ‘App.js’ is just that much simple.

<div className="App">
      <div className='title'>React Beautiful DND</div>
      <UsersPage/>
    </div>

The next step is to create ‘UsersPage’ that everything happens inside it. In this project, users’ data are saved in an array including first name, last name, and avatar of each user (You can download the array of data from https://github.com/mdeveloper20/reactReminder/tree/react-beautiful-dnd). We import data in the ‘UsersPage’ component and save them as the ‘state’ in our class extends component.

Also, in ‘render’ we have the component of Users inside <h1> </h1> that renders the users’ index, name, last name, and avatar using ‘renderUsers’ function.

import React, { Component } from 'react';
import './users.css';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import {users} from './Data';

class UsersPage extends Component {

    state={users: users}

renderUsers = (item, index) => {
    return (
      <div>
        <div className="item">
          <div>{index + 1}</div>
          <div>
            <img src={item.avatar} alt="avatar" />
          </div>
          <div className="name">
            <div>{item.firstName}</div>
            <div>{item.lastName}</div>
          </div>
        </div>
      </div>
    );
  };

render() {
        
        return (
            <div className='container'>
                <div className='users'>
                    <h1>Users</h1>

                    <div>
                        {this.state.users.map(this.renderUsers)}
                    </div>
                </div>
                
            </div>
        );
    }
}

export default UsersPage;

Till now, we have an app that displays users’ data. Now we want to add the drag & drop feature that enables us to change the order of the displayed items. That might be exciting. So, install the library through either of the following codes:

yarn add react-beautiful-dnd

npm install react-beautiful-dnd --save

Then import the required elements from this package:

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

In which ‘DragDropContext’ is the container of the app, ‘Droppable’ is our list container, and each item enabling us to move it is our ‘draggable’ component. Therefore, ‘DragDropContext’ is the wrapper of the component working through the ‘onDragEnd’ function, that we add it to the render. The new render code is:

render() {
      
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <div className="container">
          <div className="users">
            <h1>Users</h1>
             
                <div>
                  {this.state.users.map(this.renderUsers)}
                </div>
          </div>
        </div>    
      </DragDropContext>
    );
  }

And the related function that gets the new position of the element and saves it in the ‘state’ is:

onDragEnd = (result) => {
    const { destination, source, reason } = result;
    // Not a thing to do...
    if (!destination || reason === "CANCEL") {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const users = Object.assign([], this.state.users);
    const droppedUser = this.state.users[source.index];

    users.splice(source.index, 1);
    users.splice(destination.index, 0, droppedUser);
    this.setState({
      users,
    });
  };

You may wonder how this function works?! Here is the detail of this function:

The constant ‘source’ refers to the index of the item that we tend to move it, and the constant ‘destination’ is the index of the target position.

If we choose an item without specifying a destination or cancel the process, nothing should happen. So, add the first ‘if condition’ to your function to prevent any problem. Also, the second ‘if condition’ does nothing if we drag an item and drop it on its previous place, which is obvious. Then use ‘Users’ to set the state, and take advantage of Javascript function ‘splice’ to change the order of the users. If you are a beginner and you need to know how ‘splice’ serves us in this way, you can watch this video.

Ok! It’s time to implement the droppable component. As we said before, the container of items is the droppable component. So, it should be added to the render as the following code, where the ‘map’ function maps the users. We may also use ‘droppableId’ in case we have several droppable components.

render() {
    return (
      <DragDropContext onDragEnd={this.onDragEnd}>
        <div className="container">
          <div className="users">
            <h1>Users</h1>

            <Droppable droppableId="dp1">
              {(provided) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                  {this.state.users.map(this.renderUsers)}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          </div>
        </div>
      </DragDropContext>
    );
  }

Note: Since HTML can not pass through the droppable component, we use a function in which the ‘provided’ argument is the input.

For the next step, we need to apply ‘draggable’ for every item on the list. Thus, we wrap ‘renderUsers’ function in the ‘draggable’ component, such as the below code.

renderUsers = (item, index) => {
    return (
      <Draggable key={index} draggableId={index + " "} index={index}>
        {(provided) => (
          <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
          >
            <div className="item">
              <div>{index + 1}</div>
              <div>
                <img src={item.avatar} alt="avatar" />
              </div>
              <div className="name">
                <div>{item.firstName}</div>
                <div>{item.lastName}</div>
              </div>
            </div>
          </div>
        )}
      </Draggable>
    );
  };

By the way! Don’t worry about the variables that pass through ‘ref’. It is the documentation, and we have to use them.

Good job! Drag an item and drop it to enjoy the result. Our app looks much interactive now, and if you have any problem with the codes, use this video and this Github link to address it.

How to build a drag and drop component in ReactJs using React Beautiful DND

Master CSS:  Learn how to build responsive layouts with CSS FlexBox

The Flexible Box Model, or flexbox for short, is a CSS3 layout model that provides a clean and straightforward way to arrange items inside a container. It’s great to use for the general layout of your website or app. It’s easy to learn, is supported in all modern browsers

CSS flexible box layout is based on the idea that we can give the container the ability to change the width/height of its items to best fill the available space according to the user’s device. The flexbox model completely responsive and mobile-friendly, and works well on all screen sizes.

Unlike the old block model, with flexbox, you don’t have to assign widths and use floats to arrange items on the page. Therefore, you don’t have to spend a lot of time calculating margins and paddings either. Flexbox takes care of all of this automatically. Furthermore, flexbox is direction-agnostic. The block model is vertically-biased, and the inline model is horizontally-biased. But flexbox works well for both.

Flexbox deals with layout one dimension at a time, which means it controls either rows or columns. This is in contrast to the two-dimensional CSS Grid layout, where you can work with rows and columns simultaneously. Flexbox is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

In this CSS flexbox tutorial, I will give you a detailed look into the inner workings of this module.

Terminology and Core Concepts

Before you can harness the real power of flexbox, you need a solid understanding of its basic concepts.

The most important concept to learn in flexbox involves the use of axes. The flexbox model is in fact based on two axes – a main axis and a cross axis – and they are perpendicular to each other. Depending on the values of the Flexbox properties, flex items will be laid out inside a flex container following either the main axis or the cross axis.

Here’s the basic flexbox terminology you need to learn:

  • main-axis: The main axis refers to the primary axis of a container, along which child items are laid out. To change the direction of the main-axis is determined by the flex-direction property.
  • main-start | main-end: These two properties show where item placement on the main-axis starts and where it ends.
  • main size: The main-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.
  • cross-axis: This is the axis that runs perpendicular to the main-axis. Therefore, if the main-axis is horizontal, the cross-axis will be vertical, and vice versa.  
  • cross-start | cross-end: These two properties show where item placement on the cross-axis starts and where it ends.
  • cross size: The cross-size of the container (i.e., width or height depending on the direction) is determined by the width or height of its largest item.

 The image below summarizes these concepts in a single diagram.

https://www.freecodecamp.org/news/content/images/2019/10/image-32.png

Flex Container

Learning flexbox is easy. To get started, you have to make a container and set its display property to flex. An area of the document whose layout is implemented using the flexbox model is known as a flex container. The direct children of that container are called flex items. The code below creates a container with three items, and all the flex properties are set to their default values.

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

Flex Lines

An imaginary line is used to group and align flex items inside their container. This is known as a flex line. You can think of flex lines as lines that run parallel to the main axis.

A flex container can consist of one or more lines. In a single-line flex container, all the items are laid out on a single line, even if the contents of the container overflow. On the other hand, a multi-line flex container separates its flex children across multiple lines. You can think of this like when text is broken onto a new line when there are too many characters to fit in one line.

Container-level properties

From here on, this CSS flexbox tutorial will be divided into two sections: container-level and item-level properties.

Properties that are applied at the container level deal with how items are placed in the container as well as their spacing, alignment, and how they’re justified. Here’s a list of the main flexbox properties you can apply at the container level:

flex-direction: row | row-reverse | column | column-reverse;

flex-wrap: nowrap | wrap | wrap-reverse;

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items: flex-start | flex-end | center | baseline | stretch;

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Next, I will explain how each property works in detail.

flex-direction

The flex-direction property defines the main axis. In other words, it specifies how flex items are placed in the flex container, and it has four possible values:

  • row (default)
  • row-reverse
  • column
  • column-reverse

If you set flex-direction to row or row-reverse, the main axis will run along the horizontal axis (i.e., from left to right). But if you set it to column or column-reverse, the main axis will run vertically (i.e., from top to bottom).  

As I mentioned earlier, the cross axis is perpendicular to the main axis. Therefore, if you set flex-direction to row or row-reverse, the cross axis goes from the top of the page to the bottom. On the other hand, if you set it to column or column-reverse, the cross axis will run along the rows.

flex-direction-illustration

flex-wrap

Using the flex-wrap property, you can control whether the flex container has one line or multiple. The order of stacking the lines on top of each other is determined by the direction of the cross axis.  The possible values are as follows:

  • nowrap (default): The flex items are laid out in a single line, and the flex container can overflow.
  • wrap: if there isn’t enough room for the flex items them on the first flex line, they will wrap onto additional flex lines.
  • wrap-reverse: Behaves in the same way as wrap but cross-start and cross-end are swapped.

justify-content

This property can be used to align flex items along the main axis of the current line of the flex container. This takes place once all the flexible lengths and auto margins have been resolved. This property helps distribute extra free space when either all the flex items on a line are inflexible or have reached their maximum possible size.

  • flex-start (default): Packs the flex items toward the beginning of the line.
  • flex-end: Packs the flex items toward the end of the line.
  • center: Packs the flex items toward the center of the line.
  • space-between: Evenly distributes flex items on the line.
  • space-around: Evenly distributes flex items on the line, with half-size spaces on either end.
justify-content-illustration

align-items

The align-items property is different from the justify-content property in that it aligns flex items on the cross-axis instead of aligning them on the main axis. Here are the values you can assign to this property.

  • flex-start: Packs the flex items toward the cross-start of the line.
  • flex-end: Packs the flex items toward the cross-end of the line.
  • center: Packs the flex items toward the center of the line
  • baseline: Aligns the flex items in a way that their baselines align.
  • stretch (default): Stretches the flex items from the cross-start to the cross-end; however, it conforms to the constraints of min-height/min-width/max-height/max-width.
align-items-illustration

align-content

With this property, a flex container’s lines are aligned within the flex container if there is extra space in the cross-axis. If the flex container is composed of a single line, this property has no effect. Here are the values you can assign to this property.

  • flex-start: Packs the lines toward the cross-start of the flex container.
  • flex-end: Packs the lines toward the cross-end of the flex container.
  • center: Packs the lines toward the center of the flex container.
  • space-between: Evenly distributes the lines are in the flex container
  • space-around: Evenly distributes the lines in the flex container, with half-size spaces on either end.
  • stretch (default): Stretches the lines to fill the remaining space.
align-content-illustration

Item-level properties

There are also some properties to control the individual items inside a container. You can target and manipulate the size of each item using these three properties:

flex-basis

The flex-basis property determines the initial main size of a flex item. It takes the same values as the width property. So, in addition to the default value of auto, you can use absolute values and percentages, but negative values are invalid. Flex-basis overrules any specified CSS width value, but if you set flex-basis to 0, it’ll expand to accommodate whatever content/padding is in it.

flex-grow

Using the flex-grow property, you can set the amount of the reaming space in the flex container that can be assigned to an item.  The property is also called the flex-grow factor. The property defaults to 0. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.

flex-shrink

You can use the flex-shrink property to set the shrink factor of a flex item. This property helps when the size of all flex items is larger than the flex container because it makes them shrink to fit according to flex-shrink.

The property defaults to 1. Its value can be smaller than 1 (e.g., 0.6), but it can’t be negative.

flexbox shorthand

More often than not, instead of seeing the flex-grow, flex-shrink, and flex-basis properties used individually, you’ll see them combined into the flex shorthand. This shorthand lets you set the three values at the same time in this order: flex-grow, flex-shrink, flex-basis.

So instead of writing:

.example {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}

You write:

.example {
	flex: 1 1 auto;
}

Summary

Flexbox is a powerful CSS3 module that allows you to format HTML easily. To use the module, you need to designate a container div and set its display property to flex.

These are the five main properties you can set at the container level, which you can use as a Flexbox cheat sheet:

  • flex-direction determines the items are placed next to each other in the container and defines the main-axis.
  • flex-wrap sets whether wrap to the next row
  • justify-content: aligns the items along the main-axis
  • align-item: aligns the items along the cross-axis
  • align-content:  only applies if there are multiple lines

You can also use flex-grow, flex-shrink, and flex-basis to manipulate the items inside the container.

There are many great CSS Flexbox tutorials that you can take to learn more about building responsive layouts in CSS. If you want to learn CSS Grid as well, I highly recommend ready my CSS Grid tutorial for beginner. Please share your thought about using CSS Grid vs FlexBox and which one do you prefer to use.

Remote working protects your programming career against Covid-19

Remote working is an aspect of modern work that every developer may face with or think about it every so often, and it is mandatory somehow in this Coronavirus pandemic.

Whether you are a front end programmer or a back end engineer, you can stay productive from anywhere you are. Don’t let your location and situation limit you; however, except for today’s Coronavirus era, remote working may not be a good fit for everyone.

What’s your opinion? Does remote working make you a more productive developer? How can you enrich your quarantine experience? What are the pros and cons of remote working?

In this article, we will address these questions from a remote developer perspective. It helps you experience work in quarantine as a life turning point, end in a more satisfying job style.

Remote Working:

Working at home, at first glance, may look perfect. Your office is next to you after getting out of bed, and you can start your work a few minutes after grabbing your morning coffee. You can dress as you like and eat at any time; although you can enjoy all of these, remote working is not the same as working from home. As a developer, you need to maintain your focus to keep on deep working, whether at home or office. It could be a constant distraction if you do not adhere to your discipline of remote working.

You may think about not going to the office the next day, take your laptop to the home, and set it on your table at the kitchen or on the couch to work at home, and will. You may create a different day among the typical days of work, by doing so, and your family members may forget about your work since you are at home. If you wish to have a prolific job as a remote developer, especially in this Corona Pandemic era, first of all, think about creating your environment, where you can minimize distractions.

Pay attention to the workspace lighting and temperature. Choose a place where you can benefit from natural light and fresh air if it is possible, otherwise avoid fluorescent light. Use the tools that you use in a regular office at your home office; an ergonomic chair, a stable internet connection, a second monitor, supplies, notepad, and maybe headset.

As the next step, you need to explain to your family members that working at home doesn’t mean you are available for them at any time.

Also, the flexibility of working hours seems a striking feature of remote working. Of course, you can work in any way which is suited to you, but keeping up with the schedule would be more complicated if it is more flexible. It’s ok if you are not an early bird. On the other hand, you are not supposed to work all day long since your office is always available. Just be wise about your timing to prevent getting behind your schedule. It is essential to get into a routine about the work hours per day when to start and finish the work when to have lunch, dress appropriately, and keep the breaks short and refreshing.

If you are a remote developer of a team, be in constant communication with your coworkers, considering cultures and time zones difference. A video chat on Monday can help you to coordinate your weekly activities with those of your team members. A brief chat at the weekends can close the week more productive and friendly. Do not center on company topics in all your conversations. Build up your relationships as you do in a real office during your chats.

Your workspace can be a bit more inspiring using small plants. Enjoy your home office to boost your productivity as a remote developer and forget all anxiety caused by the Coronavirus pandemic. You are both safe at home and productive at work now.

Pros and cons of working remotely

If this is your first experience of remote working resulted from the Covid19 quarantine, take it easy. Many top companies offer remote job with employees spread across the world, too; The Theorem is a software development company and a diverse team of 5 continents around the world that creates software solutions for enterprise organizations and startups. You can find current openings of the company on https://theorem.co/careers . Hazelcast is also a big data, cloud-based solutions, enterprise software platform with the carrier opportunities here on https://hazelcast.com/company/careers/ . This platform helps businesses to build fast applications. Measuring how busy a location is in real-time, Density is a data & analytics, hardware & software engineering company offering remote opportunities on https://www.density.io/careers , and many others like Bluebolt, NAVIS, and Diagram. Just be aware of the pros and cons to gain the most advantage of this forced remote working

Advantages

  • You can work as you like and whenever you like. That sounds great!
  • You don’t have to live in a city.
  • You can break 9 to 5 to your desired times instead of continuous 8 hours of working. You’ll have a flexible schedule to work when you are more productive, according to your body clock.
  • You have a private and quiet environment for deep working (if you eliminate all possible distractions of home).
  • No everyday commute, a perfect time-saving way in the modern and busy life.
  • You can save on transportation costs.
  • If you are interested in knowing people with the various cultural background, it provides you with the chance.

Disadvantages

  • If you have young kids, it may be hard for them to understand that parents aren’t supposed to play with them while they are at home.
  • You need to master your remote work and self-discipline to prevent failure in your job. Getting behind is the consequence of inadequate time and schedule management, whether you work independently or as a team member.
  • Finding career growth opportunities may become hard if you lose social connections.
  • Time zones difference can reduce the flexibility of your schedule in collaboration with other team members.
  • Your team may forget about you if you do not establish an efficient connection with them.
  • If you get stuck, it takes more time to ask for a solution.
  • You may not have access to software & services that the company has provided
  • No more happy hours with coworkers. You may miss the chance to find your best friends.

How to start remote working?

At first, invest time to raise your skills if you wish to reach to a well-paid remote job. Learn more to keep pace with the programming world and keep updated about new technologies. Take advantage of useful websites to improve your basic programming knowledge. There are a lot of valuable tutorials like “CSS Grid Tutorial for Beginners“, ready to push you forward. Put your time on building your sample sites, apps, and programs that introduce you to earn trust. Be honest, and do your best. 

Welcome to the world of remote working!

CSS Grid Tutorial for Beginners

If you’re a web developer, you already know the importance of a reliable responsive web layout that works across different browsers. There are several ways to control your webpage layout; you can use tables, the box model, or CSS Flexbox.

But, in this beginner-level CSS grid tutorial, I’m going to introduce the method I find most efficient: CSS Grid.

What is CSS Grid?

Working with the gird is pretty straightforward. Just like Flexbox, the grid is a value you can set for the CSS display property. Therefore, once you set display: grid on an element, the browser will render a block-level box. The element’s children, known as grid items, will behave differently from the normal block and inline elements.

The CSS grid layout

The two major elements of a CSS Grid are “wrappers” and “items.” You only need a few simple lines of code to set up your grid. With the following code you’ll get a wrapper with six items inside it:

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

Tip: You can force a grid container to behave like an inline-level box by setting display: inline-grid.

Columns and rows

To see the benefits of the grid, you need to start creating columns and rows. This is pretty simple to do:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}
 

The values you assign to grid-template-columns and grid-template-rows will define the number of columns and rows in your layout, respectively.

The above code will result in a basic grid with three equal-width columns and two equal-height rows:

Now that you have a grid, you should learn how to modify it. This is where you realize how simple CSS Grid will make your job easier when creating layouts.

Grid gap

The grid-gap property lets you set the distance between the items. It will allow you to add margins to each item. You can use grid-column-gap and grid-row-gap to set the size of the gap you want between the items. Using the code below, all the gaps to have the same size:

 wrapper { 
 display: grid;  
grid-template-columns: 10rem 10rem 10rem;
grid-gap: 1rem;}
 

Sizing

You already set the column and row sizes in grid-template-column and grid-template-row, but to resize any single item from the grid, you can use the span property to spread one item across the width of the column. You should be aware of how this will affect the other items’ placing. Here is an example to better demonstrate this:

.item5 {  grid-column: span 2;}

Here, item5 is set to span across two columns.

You can use the same method for rows by using the grid-row property and span.

Placement

If you don’t like the blank spaces between your items, you can simply solve the problem by using grid-auto-flow: dense. The grid will check if the items fit and try to fill the gaps with any item that fits. For example, if we span the fifth item across three columns, we can add a seventh item and the grid-auto-flow will fit them together:

.wrapper { 
display: grid;  grid-template-columns: repeat(3, 10rem);  
grid-gap: 1rem; 
grid-auto-flow: dense;}
.item5 {  grid-column: span 3;}

As you see, the number of rows has changed even though we had previously set it. This property automatically modifies the placement of columns and rows to fit the items.

You can also use grid-column-start and grid-column-end to resize the items manually. This is simpler than the first approach, but you need to understand how grid lines work before you can use it.

The number of column lines is the number of columns plus one because the first line starts before the first column and the last line is after the last one. This image can help you understand how it works:

Here, item1 is expanded from the first column line to the fourth, which is the span of three columns. This can be done using this code:

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

You can achieve the same result, using the following code:

.item1 {  grid-column: span 3;}

If you don’t want to use the grid-auto-flow, you can try to manipulate your items manually using the grid-column-start and grid-column-end properties. Here is an output of a grid fit together using this method. Try and figure out the code that was used to create this CSS grid layout, as an exercise.

Grid values and functions

Those were the basics of CSS grid for beginners but now it’s time to learn a few cool CSS grid tricks. Fortunately, the grid gives you a lot of flexibility. You can use other values for grid-template-columns to create more complex structures:

  • Using grid-template-columns: min-content creates the smallest column possible without causing an overflow.
  • Using grid-template-columns: max-content creates a column with the maximum space required to display its content without wrapping.

You can see how the two values work in the image below:

You can set the maximum space that a column is allowed to take using the fit-content() function. The value is passed as an argument of the function:

grid-template-columns: fit-content(200px)

It’s also possible to use the repeat() function to avoid typing out the same value(s) over and over again. For example, the first line of code below creates twelve columns, each of which is 150 pixels wide. On the other hand, the second example fills the container with as many 150px columns as will fit and leaving a gap at the end, if any space remains.

grid-template-columns: repeat(12, 150px);
grid-template-columns: repeat(auto-fill, 150px);

Bottom line

The CSS Grid is an excellent tool for creating responsive layouts. After reading this beginner’s guide, now you have all the basic information you need to start using CSS Grid. As you saw in this CSS grid for beginners, working with the grid layout is easier than you think! Go ahead and practice what you’ve learned by creating great layouts.