Skip to content

Tag: reactjs

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