DEV Community: Niraj Dhungana

Live Search in React js - Select with Mouse or Keyboard

Niraj Dhungana — Sun, 11 Sep 2022 16:55:36 +0000

Displaying the live search results to the user while they are typing in the search bar is a great user experience. But creating the live search field with all the features. Like, select with a mouse, move selections on key up down and hide the search bar on blur.

This is a little bit of a challenging task. So, let's try to go through all the challenges and create this awesome live search field. Where users can select the result with a mouse or by using the keyboard also the results will be hidden if we click outside.

The things we will cover

React & Tailwind Project Setup

To create this demo we are going to use obviously the React JS and Tailwind CSS for styling. If you want to you can use any other CSS framework or library. This logic will work for all of them.

If you don't know Tailwind CSS is a framework with a bunch of utility class names to style our HTML.

If you already have a project, you can directly add this logic to your existing project as well. But if you are starting from the ground like me run these commands to initialize a new project.

npx create-react-app live-search --template typescript
# or
npx create-react-app live-search // if you are using JavaScript

Once you run one of the commands, the project will be initialized. Now you can install Tailwind CSS. First, change the directory with cd live-search and run these commands.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then you have to go to your tailwind.config.js file and add these things inside your content.

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}",],
...

Then go to your index.css and replace all of the code with these three lines of code.

// index.css
// remove old CSS and add them
@tailwind base;
@tailwind components;
@tailwind utilities;

Creating a Search Bar

A search bar is just an input element. But we will add a little bit of style to it so that it looks a little bit nice. For that, let's create a file called SearchBar.tsx (or jsx) inside the src folder and add these codes.

// inside SearchBar.tsx
import React, { FC } from "react";

interface Props<T> {
  value?: string;
  notFound?: boolean;
  onChange?: React.ChangeEventHandler;
  results?: T[];
  renderItem: (item: T) => JSX.Element;
  onSelect?: (item: T) => void;
}

const SearchBar = <T extends object>({ }: Props<T>): JSX.Element => {
  return (
    {/* Search bar */}
    <input
      type="text"
      className="w-full p-2 text-lg rounded border-2 border-gray-500 outline-none"
      placeholder="Search here..."
    />
  );
};

I don't think I have to explain these class names. They are explaining themselves. But these interface Props might look a little scary. This is just a Typescript thing which I will explain when we need them. So, let's render this component inside our App.tsx

// inside App.tsx
const App = () => {
  return (
    <div className="max-w-3xl mx-auto mt-10">
      <SearchBar />
    </div>
  );
};

export default App;

Here I am using the fixed width for the div so that I can use this mx-auto to bring this div to the center of the webpage. If you try to run this code it will throw an error. Because renderItem is the required prop. Comment it out if you want to see the change.

Container to Render Search Results

Now we need a container to render our results. So for that, we will wrap our search input inside a div with class relative. And we will render a div below the input element with class absolute. With these classes, we will render the search container right below the input field.

// SearchBar.tsx

const SearchBar = <T extends object>({ }: Props<T>): JSX.Element => {
  return (
    <div className="relative">
      <input ...  />
     {/* Results Wrapper */}
      <div className="absolute mt-1 w-full p-2 bg-white shadow-lg rounded-bl rounded-br max-h-36 overflow-y-auto"></div>
    </div>
  );
};

With the help of other classes, like max-h-36 overflow-y-auto. It will create a container with a fixed height and show the scroll bar if the results are longer.

Creating a Fully Customizable Component

Now let's use the first props from inside the interface. As you see here we are using a little weird syntax for the interface and SearchBar components.

interface Props<T> { 
  results?: T[];
  renderItem: (item: T) => JSX.Element;
  onSelect?: (item: T) => void;
}

const SearchBar = <T extends object>({}:Props<T>) ...

This is because we want to make this search bar so customizable. So that, it can take, render and give the same data type back to our renderItem and onSelect methods. Now you don't need to worry about types anymore. Typescript will grab the type from results and distribute it to renderItem and onSelect.

Now finally see how we can render our results.

// inside SearchBar.tsx
const SearchBar = <T extends object>({ results = [], renderItem }: Props<T>): JSX.Element => {
  return (
    <div className="relative">
      {/* Search bar */}
      <input ... />
      {/* Results Wrapper */}
      <div className="...">
        {/* Results Lists Goes here */}
        <div className="space-y-2">
          {results.map((item, index) => {
            return (
              <div
                key={index}
                className="cursor-pointer hover:bg-black hover:bg-opacity-10 p-2"
              >
                {renderItem(item)}
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

Very first thing, don't forget to give your results prop a default value empty array []. It will prevent unwanted errors. Then we are using resutls.map to render our results. Where we have renderItem method to render results. We have to pass this method from App.tsx which we will see later.

Then we have a wrapper div for renderItem with classes, hover:bg-black hover:bg-opacity-10. It is very important to give the user feedback on results hover. These classes will add background-color of black with opacity: 0.1 on the result hover.

Ok, now let's try to pass some data to our SearchBar. Because we used that <T> generic type we can pass any type of data but inside an array.

const profiles = [
  { id: "1", name: "Allie Grater" },
  { id: "2", name: "Aida Bugg" },
  { id: "3", name: "Gabrielle" },
  { id: "4", name: "Grace" },
  { id: "5", name: "Hannah" },
  { id: "6", name: "Heather" },
  { id: "7", name: "John Doe" },
  { id: "8", name: "Anne Teak" },
  { id: "9", name: "Audie Yose" },
  { id: "10", name: "Addie Minstra" },
  { id: "11", name: "Anne Ortha" },
];
const App = () => {
  return (
    <div className="max-w-3xl mx-auto mt-10">
      <SearchBar results={profiles} renderItem={(item) => <p>{item.name}</p>} />
    </div>
  );
};

As I told you earlier you don't need to worry about the types for renderItem and onSelect. Here is the result if you hover over an item you will see its type. Cool right?

Now if you save your file and run the project with npm start. You will see something like this.

Conditionally Rendering Results

Currently, these results are always visible so, let's solve this issue. For that, we can simply add a state called showResults and display the results according to the value of this state.

// inside SearchBar.tsx
const SearchBar = ... {
  const [showResults, setShowResults] = useState(true);

  // To toggle the search results as result changes
  useEffect(() => {
    if (results.length > 0 && !showResults) setShowResults(true);

    if (results.length <= 0) setShowResults(false);
  }, [results]);

   return ...
}

The logic is pretty straightforward if there are results and the showResults state is false only then make it true. Otherwise, make it false. These logics will now hide and show our search results as the result changes its length.

But for that, we have to add the condition if showResults is true only then render the results.

const SearchBar = ... {
 ...
  return (
    <div className="relative">
      {/* Search bar */}
      <input ... />
      {/* Results Wrapper */}
      {showResults ? <div className="...">
        {/* Results Lists Goes here */}
        <div className="space-y-2">...</div>
      </div> : null}
    </div>
  );
};

Adding a Live Search Logic

Now let's write a little piece of code to add a fake search logic.

// SearchBar.tsx
const SearchBar = <T extends object>({onChange, ... }: Props<T>): JSX.Element => {
return (...
  <input
     onChange={onChange}
   />
...

// App.tsx

const profiles = [...]
const App = () => {
  const [results, setResults] = useState<{ id: string; name: string }[]>();

type changeHandler = React.ChangeEventHandler<HTMLInputElement>;
  const handleChange: changeHandler = (e) => {
    const { target } = e;
    if (!target.value.trim()) return setResults([]);

    const filteredValue = profiles.filter((profile) =>
      profile.name.toLowerCase().startsWith(target.value)
    );
    setResults(filteredValue);
  };

  return (
    <div className="max-w-3xl mx-auto mt-10">
      <SearchBar
        onChange={handleChange}
        results={results}
        renderItem={(item) => <p>{item.name}</p>}
      />
    </div>
  );
};

Even though this is too much code the logic is simple. First, we destructure the onChange inside SearchBar component and assigned it to the input element.

Then inside App.tsx we are handling the change event for SearchBar. So for the handleChange we are just using the array filter method to filter out the matching results.

If we found the results we will add them to the new state called results and if we have an empty input field we will reset those results to an empty array.

And at the end instead of the profiles, we will pass the results state to the results prop. If you do this you should see the search results only if you type out the correct profile names.

Inside the handleChange you can also fetch the data from the server. The only important thing is how will you add or reset your results state. Because if you forgot to reset the results state the results inside your live search container will be visible all the time.

Selecting Results on Key up-down

It's nice we have our search bar where we can search and render the results. But now we need to add a keyboard event to move our selection up and down.

const SearchBar = ... => {
const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
    const { key } = e;

    // move down
    if (key === "ArrowDown"){ }

    // move up
    if (key === "ArrowUp"){ }

   // hide search results
    if (key === "Escape"){ }

   // select the current item
    if (key === "Enter"){ }
};

return (
<div
      tabIndex={1}
      onKeyDown={handleKeyDown}
      className="relative outline-none"
    >
   <input ... />
   ...

We want to now listen to the keyDown event and we are doing that to the wrapping div inside SearchBar component. But we can not directly listen to the keyDown for divs. So we need to use the tabIndex prop. Also to avoid unwanted outlines on div focus (because we are using tabIndex there will be an outline) I am using the outline-none class.

Let's write down the keyboard logic one by one.

Handling the keyboard event is not that straightforward. Because while we are moving up or down we have to handle multiple things. Like displaying the correct UI, and scrolling in the right position if there are multiple results.

So for that first, we need a state called focusedIndex. As you can see the default value for this state is -1. Because later we will use this state to move our focus to the correct place. And we don't want to focus on anything at first. So -1 will work fine.

// inside SearchBar.tsx
const SearchBar = ... => {
  const [focusedIndex, setFocusedIndex] = useState(-1);

...

Now with the logic below it will update our focused index with the correct timing. Also if you notice I am not using -1 or +1 to update our value. Instead, we are using the modulo (%) operater.

This is a small formula that we can use to update our count only within the range according to the length of the results. So if you have results with the length 6 and if you press the down key then the nextCount will start from 0 and goes to 5. If you press up this will be the opposite starts from 5 and goes to 0.

Which is the exact value that we need to be inside the bound of the result array. If we go beyond the length we will get index bound exception.

  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
    let nextCount = 0;
    if (key === "ArrowDown") nextCount = (focusedIndex + 1) % results.length;

    if (key === "ArrowUp") nextCount = (focusedIndex + results.length - 1) % results.length;

    if (key === "Escape") setShowResults(false);

    if (key === "Enter") {
      e.preventDefault();
    }

    setFocusedIndex(nextCount);
  };

Also, there is one more thing happening. If we press the Escape key we will hide the search results. But we are not handling the Enter we will do that later.

Styling the Focused Item

Now according to the focusedIndex we need to style the result. For that, we have to take a reference of specific results and change the style.

// SearchBar.tsx
const SearchBar = ... => {
 const resultContainer = useRef<HTMLDivElement>(null);
 return (
 ...
 {results.map((item, index) => {
  return ( 
   <div
    ref={index === focusedIndex ? resultContainer : null}
    style={{ backgroundColor: index === focusedIndex ? "rgba(0,0,0,0.1)" : "" }}
    key={index}
    className="cursor-pointer hover:bg-black hover:bg-opacity-10 p-2"
    >
      {renderItem(item)}
    </div>
    );
})}

The main thing for this div is the ref and the style prop. What basically we are doing? If the index is equal to the focusedIndex we are assigning this div to the ref called resultContainer otherwise we are making it null. Why? You will understand it later.

Then we are changing the background color to black with an opacity of 10% if the index is equal to the focusedIndex.

Now with this logic, if you try to move up or down you will see the change but the results will stay in one place only. It will not scroll down or up as you update your index. To fix this use this logic.

// SearchBar.tsx
  useEffect(() => {
    if (!resultContainer.current) return;

    resultContainer.current.scrollIntoView({
      block: "center",
    });
  }, [focusedIndex]);

If there is resultContainer we will use scrollIntoView method to scroll in to the exact point and we will make the focused item in the center with the option block: center.

Now you should have something like this.

Selecting the Results

One of the important things for live search is selecting the result so let's see how we can do that.

// SearchBar.tsx
...
  const handleSelection = (selectedIndex: number) => {
    const selectedItem = results[selectedIndex];
    if (!selectedItem) resetSearchComplete();
    onSelect && onSelect(selectedItem);
    resetSearchComplete();
  };

  const resetSearchComplete = useCallback(() => {
    setFocusedIndex(-1);
    setShowResults(false);
  }, []);
...

We need to now handle two things for selection first select the correct thing and send it back to the App.tsx. Because this is the component where we are using it right now. Then we also need to reset the search results.

For that, inside handleSelection we are accepting selectedIndex and extracting the selected item from inside the results array. If there is nothing just return otherwise call the onSelect with the selected result. Make sure you are destructuring it from the props.

const SearchBar = ({ onSelect, ...}) =>

And then simply reset the states to their previous values. focusedIndex to -1 and showResults to false.

Now we need to add this handleSelection in two places. Inside Enter key press and on mouse down for the result item.

// SearchBar.tsx
// to select on enter
  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
   ...
    if (key === "Enter") {
      e.preventDefault();
      handleSelection(focusedIndex);
    }

    setFocusedIndex(nextCount);
  };


return  (
...
{results.map((item, index) => {
  return ( 
   <div
    onMouseDown={() => handleSelection(index)}
    ref={index === focusedIndex ? resultContainer : null}
    style={{ backgroundColor: index === focusedIndex ? "rgba(0,0,0,0.1)" : "" }}
    ...
    >
      {renderItem(item)}
    </div>
    );

With this now if you try to select with a mouse or keyboard you will select the correct item. If you want to see that add onSelect inside your SearchBar and log the result to the console.

// App.tsx
const App = () => {
  return (
    <div className="max-w-3xl mx-auto mt-10">
      <SearchBar
        ...
        onSelect={(item) => console.log(item)}
        />
    </div>
  );
}

Hiding Results onBlur

Now if you are thinking why onMouseDown why not onClick? Instead of giving you the answer, I will show you that.

Just add onBlur to your top wrapper div inside SearchBar component. And pass resetSearchComplete method to it.

// SearchBar.tsx
...
return (
    <div
      tabIndex={1}
      onKeyDown={handleKeyDown}
      onBlur={resetSearchComplete}
      className="relative outline-none"
    >
...

Now if you click outside the search results will be gone which is the perfect result we want. Also, you will see the selected results inside your console (if you select any). But now if you change that onMouseDown to onClick results will be gone from the screen but you will not get the selected item inside the console.

Hmmm, why is that? This is because before onClick the onBlur will be fired. So, handleSelection will be never called.

Updating the value inside the search bar

Everything looks fine here. The only thing that we need now is to display the selected profile name inside our search bar. So, create a state called defaultValue inside SearchBar.tsx. Then pass this value to the input element.

// SearchBar.tsx
const SearchBar = ... ({ value }) => {
  const [defaultValue, setDefaultValue] = useState("");
...
return ...
   <input
     ...
     value={defaultValue}
   />

If you remember we are also accepting a prop called value for our SearchBar component. So, if there is value prop available let's assign that to the defaultValue.

// SearchBar.tsx
  useEffect(() => {
    if (value) setDefaultValue(value);
  }, [value]);

Now if the value changes this useEffect hook will update the defaultValue to the value.

Let's do one more thing inside App.tsx. Add a state called selectedProfile and update the value inside onSelect. Then pass selectedProfile.name to the value prop.

// App.tsx
const App = () => {
  const [selectedProfile, setSelectedProfile] = useState<{ id: string; name: string }>();   
   return (
       ...
      <SearchBar
         ...
        onSelect={(item) => setSelectedProfile(item)}
        value={selectedProfile?.name}
      />

Now ladies and gentlemen you should see something like this.

But there is one big problem. Once you have selected the result you can not make any changes to the input field.

To solve this issue we have to handle the onChange event directly inside our SearchBar component.

// SearchBar.tsx

const SearchBar = ({ onChange }) => {
  ...
  type changeHandler = React.ChangeEventHandler<HTMLInputElement>;
  const handleChange: changeHandler = (e) => {
    setDefaultValue(e.target.value);
    onChange && onChange(e);
  };

return (
...
      {/* Search bar */}
      <input
        onChange={handleChange}
...

Here instead of passing onChange prop directly to the input element. Now we will pass handlChange and inside here we will update the defaultValue and then call the onChange prop. With this now you can update the value with onSelect and this SearchBar will automatically reset the value when the onChange occurs.

And I think this is more than enough for this project. You can see the final look and if you have anything to say at the bottom you will find my social media links.

How to Compress or Manipulate Images in React Native Expo

Niraj Dhungana — Wed, 01 Sep 2021 03:24:43 +0000

Nowadays smartphone cameras are a beast. A normal picture clicked with my smartphone becomes 4MB. And if I were just a normal user this would not be a topic of discussion but because I am a programmer it costs my cloud storage.

So, in this small post I will teach you guys how we can compress the Image size in React Native Expo.

For that you don’t need to do any special coding because expo has a cool npm package which we can use to decrease or compress image size.

Which Package to Use

Inside the expo we have an expo-image-manipulator which we can use to compress image size and also for other manipulations as well like flip, rotate, crop etc. If you want more information on it then you can go to this link.

You can also use it if you are using bare-react-native cli but for that you need to go some extra miles and unfortunately I am not covering that here. You can visit this link if you are using bare-react-native.

First we need to install: expo-image-manipulator. For that you can run this command.

expo install expo-image-manipulator

After installing it we need to import everything as ImageManipulator like below.

import * as ImageManipulator from 'expo-image-manipulator';

const file = await ImageManipulator.manipulateAsync(img.uri, [], { compress: 0.5 });

To manipulate images using expo-image-manipulator it provides the manipulateAsync method. Which is an asynchronous method. It takes three arguments. The actual image uri goes first, actions goes second and save options at the end.

await ImageManipulator.manipulateAsync(uri, actions, saveOptions)

What Kind of Images it Can Manipulate

It does not take the image files from outside. So make sure you are using URI from the local file system not from the remote api link. Means you can only use the image files which you read from the device storage.

Actions

Action is an array of objects representing manipulation options. We can pass multiple options as objects inside this array. Like we can resize, rotate, flip and crop.

Save Options

After manipulating the image we can also define some options and inside it we can specify the image quality and image format like png or jpg.

await ImageManipulator.
manipulateAsync(img.uri, [
{resize: {width: 200, height: 200}},
{rotare: 45},
{flip: ImageManipulator.FlipType.Vertical}
],
{compress: 0.5, format: ImageManipulator.SaveFormat.PNG});

Inside this little example as you can see the first thing that we are passing is image uri, and some action options to resize, rotate and flip the image. And at the end we are passing save options to compressing the image by 50% and converting the image to png format.

For more post like this you can check out this like.

React Native Multi Select on Long Press - Touchable Opacity.

Niraj Dhungana — Sun, 29 Aug 2021 13:11:11 +0000

Do you want to know how we can select or deselect multiple Items inside react-native. Then let’s see how we can do that using TouchableOpacity and onLongPress.

For this project I am using bare react-native cli but it also works with expo cli as well.

You can check out this same post on ndpniraj

Content we will be covering in this post.

Over view of the project
Initializing Project
Giving shape to our project
Creating a ListItem component
Adding all the logics
Deselect on second tap

Over View of the project

Before we write any code for our react native multi select project, let’s understand what we want and how we can achieve our goal.

The feature that we want to add inside our project is that.

If the user just taps on the list item we want to open or navigate to a different component.
If the user taps and holds the finger then we want to select that list item and enable the multiple selection option.
Also if the user taps outside or in an empty space we want to deselect all.

Initialize a Project

You can initialize your project using npx react-native init MultipleSelect command if you are using react-native-cli like me or you can use expo init or you can use the existing react native project where you want to add this multiple select option.

After initializing your project you can run it inside an emulator or inside a physical device and please don’t ask me how to do that because you are already a pro.

Giving Shape

To create this multiple selection option I will be using some fake data with fake names and contact numbers. If you also want to use that you can copy from the example below (last of the page).



...
const App = () => {
  return (
    <Pressable>
      <FlatList
        data={data}
        renderItem={({item}) =><Text>{item.name}</Text>}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};
...

Don’t worry bros and sis let me explain what is going on here. Here I am using the FlastList component to render our fake data and I hope you already know how it works. Like data, renderItem and all.

After that the new thing is that I am wrapping the FlatList component inside this new Pressable component. That is because we want to deselect all the selections if we tap outside of the list. It’s like Touchable components but it's a new thing inside react-native family.

Creating a ListItem component

Let’s create a beautiful component to render these list items and add some styles.



...
const ListItem = ({item, selected, onPress, onLongPress}) => (
  <>
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={styles.listItem}>
      <View style={{padding: 8}}>
        <Text style={{fontSize: 22, color: '#fff'}}>{item.name}</Text>
        <Text style={{color: '#989BA1'}}>{item.contact}</Text>
      </View>
      {selected && <View style={styles.overlay} />}
    </TouchableOpacity>
  </>
);

const App = () => {
  const handleOnPress = () => console.log('pressed');
  const handleLongPress = () => console.log('activete long press');

  return (
    <Pressable style={{flex: 1, padding: 15}}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <ListItem
            onPress={handleOnPress}
            onLongPress={handleLongPress}
            item={item}
          />
        )}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};
...

Here we have this beautiful ListItem component to render our list items and we are using TouchableOpacity so that we can do our secret tasks. Just joking, it is here to listen to user touch events.

As you can see clearly inside this ListItem component we are accepting an item, selected, onPress and onLongPress prop.

Item will be the actual item with data like name and contact which we will render inside here. Selected will be the condition which we are using to display an overlay on top of our list items.

This overlay is just a View component with position absolute, height and width 100% and color with half opacity. The rest of the other code is I think self explanatory.

Now our project looks like this.

Now we will add a state called selectedItems inside our project so that we can add the multi select options. Feel free to use any name you like.

After that we will attach onPress and onLongPress prop and because we want to know which list item is currently pressed so we will use the inline function and pass the current item like here in example.



...
 <FlatList
   data={data}
   renderItem={({item}) => (
     <ListItem
     onPress={() => handleOnPress(item)}
     onLongPress={() => handleLongPress(item)}
     selected={getSelected(item)}     
     item={item}
     />
  )}
...

Also you may have noticed that selected={getSelected(item)}. This is to find a render that overlay if the list items are selected.

Adding all the logics



...
const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleLongPress = contact => {
    selectItems(contact)
  };

  const handleOnPress = contact => {
    if (selectedItems.length) {
      return selectItems(contact)
    }

    // here you can add you code what do you want if user just do single tap
    console.log('pressed');
  };

  const getSelected = contact => selectedItems.includes(contact.id);

  const deSelectItems = () => setSelectedItems([]);

  const selectItems = (item) => {
    setSelectedItems([...selectedItems, item.id]);
  }
...

Here comes the actual magic guys inside this example we have everything to select multiple items inside our react native app.

First we have this selectedItems state and the default value is obviously an empty array because we don’t want to select anything at the beginning.

If you come to the end of this code block there we have a method called selectItems. Inside this method we are just accepting an item and storing that item’s id inside the selectedItems array.

Then we have handleLongPress and handleOnPress methods as well.

Inside handleLongPress we are just calling the selectItems method. So that is why we can remove this handleLongPress and directly use the selectItems method inside onLongPress prop. Which you will find inside the final code.

Inside handleOnPress we are checking if there are already some selected items then we are selecting more but if not then you can see that console log and the comment. You can do whatever you want.

Then we have another method getSelected inside this method we are just checking if the current item is already inside selectedItems or not. If yes then it will return true otherwise returns false.

Then we have the deSelectItems and inside this method we are just resetting the value of selectedItems state to an empty array. And we will attach this method to the Pressable components onPress prop.

Deselect on second tap

With these lines of code now it will select multiple items but if you try to deselect the selected one then it will do nothing. So for that we need to update our selectItems method. Like below.



 const selectItems = item => {
    if (selectedItems.includes(item.id)) {
      const newListItems = selectedItems.filter(listItem => listItem !== item.id);
      return setSelectedItems([...newListItems]);
    }
    setSelectedItems([...selectedItems, item.id]);
  };

Now here we have this updated selectItems method. Where we are first checking if the currently tapped item is already inside the selectedItems array or not.

If yes then we are removing it from the selectedItems list by using array filter method and returning the code execution. If not then we are adding that list item inside our selectedItems state.

Now we made our final project. Multi select using react-native. Now you can use this selectedItems state to render any other components if you want.

Like if you want to open any options, delete icons or anything that you want you can use if there is selectedItems.length then do this or that.

Ok this is it for this post. Here is the complete code.



import React, {useState} from 'react';
import {
  StyleSheet,
  FlatList,
  Pressable,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

const data = [
  {name: 'Rohan', contact: '1111111111', id: '1'},
  {name: 'Mohan', contact: '2222222222', id: '2'},
  {name: 'Sohan', contact: '3333333333', id: '3'},
  {name: 'Hohan', contact: '4444444444', id: '4'},
  {name: 'Dohan', contact: '5555555555', id: '5'},
  {name: 'Pohan', contact: '6666666666', id: '6'},
];

const ListItem = ({item, selected, onPress, onLongPress}) => (
  <>
    <TouchableOpacity
      onPress={onPress}
      onLongPress={onLongPress}
      style={styles.listItem}>
      <View style={{padding: 8}}>
        <Text style={{fontSize: 22, color: '#fff'}}>{item.name}</Text>
        <Text style={{color: '#989BA1'}}>{item.contact}</Text>
      </View>
      {selected && <View style={styles.overlay} />}
    </TouchableOpacity>
  </>
);

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);
  const handleOnPress = contact => {
    if (selectedItems.length) {
      return selectItems(contact);
    }

    // here you can add you code what do you want if user just do single tap
    console.log('pressed');
  };

  const getSelected = contact => selectedItems.includes(contact.id);

  const deSelectItems = () => setSelectedItems([]);

  const selectItems = item => {
    if (selectedItems.includes(item.id)) {
      const newListItems = selectedItems.filter(
        listItem => listItem !== item.id,
      );
      return setSelectedItems([...newListItems]);
    }
    setSelectedItems([...selectedItems, item.id]);
  };

  return (
    <Pressable onPress={deSelectItems} style={{flex: 1, padding: 15}}>
      <FlatList
        data={data}
        renderItem={({item}) => (
          <ListItem
            onPress={() => handleOnPress(item)}
            onLongPress={() => selectItems(item)}
            selected={getSelected(item)}
            item={item}
          />
        )}
        keyExtractor={item => item.id}
      />
    </Pressable>
  );
};

const styles = StyleSheet.create({
  container: {},
  listItem: {
    backgroundColor: '#252628',
    marginBottom: 10,
    borderRadius: 5,
    overflow: 'hidden',
  },
  overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(255,0,0,0.5)',
  },
});

export default App;

React Native How to Find-out Which Key is Being Pressed

Niraj Dhungana — Sat, 22 May 2021 06:23:59 +0000

Recently I was working on a React Native project and inside that project I wanted to track which key was being pressed. I didn't want to track every key press, but in particular I wanted to track "backspace".

If you go to React Native’s official documentation and search for TextInput then there are lots of props which we can use inside TextInput. But most of us don't care about those props. There are more than 40 to 50 props which we can use inside the TextInput component.

So, in this post I am sharing my experience with you on how I tracked which key is being pressed and which prop I used.

The prop to find out which key is being pressed

There is a prop called onKeyPress which we can use to track which key is being pressed inside the React Native TextInput component.

If you are already familiar with DOM manipulation using vanilla javascript. Then this prop works the same as key press events. The only difference is, inside DOM we would get key code but here you will get the exact key value as string.

How it works

You can simply use onKeyPress prop like onChangeText prop inside TextInput component. It's a callback function like we can pass inside onChangeText prop.

But inside this callback you will get an object. From that object we can destructure nativeEvent and inside that nativeEvent object we will get key information.

Let’s see that in action.

<TextInput onKeyPress={ ({nativeEvent}) => console.log(nativeEvent.key) />