search in list full src.js

/*
search in list

sample search result item
sample data
basic page structure with searchinput,flatlist
search functionality in post title
adding if conditions
lowercase
search functionality in post description same as post title
optimization
*/

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

const list_post = [
  {
    id: '1',
    description:
      'JavaScript is a single-threaded, non-blocking, and asynchronous programming language. This means that it has only one execution thread, but it can handle asynchronous operations efficiently without blocking the execution of the entire program. This is achieved through a mechanism called the event loop.',
    title:
      'JavaScript s Single-Threaded Bliss: Because Who Needs Multithreading Anyway',
  },
  {
    id: '2',
    description:
      'In our working time, sometimes we need to create some simple, light, quick components to render to any technology stacks. For example we build a screen loader component before js bundle back to expect users waiting',
    title: 'Light weight (5k) JS framework to create Web Components',
  },
  {
    id: '3',
    description:
      'Today i will be showing the easiest way to send push notifications to yourself using Cronus Monitoring and Alerting.We ll be using the npm package cronus-alert to send an alert for an event. We’ll then receive this alert on our mobile device by using the Cronus Mobile App.',
    title: 'The easiest way to send mobile push notifications for developers',
  },
  {
    id: '4',
    description:
      'In the vast landscape of frontend development, navigating the intricacies of state management can often feel like deciphering a complex narrative. Enter Redux, a steadfast storyteller in our coding adventures, unraveling the tale of centralised state management. ',
    title: 'Navigating the React Redux toolkit as a Frontend developer',
  },
  {
    id: '5',
    description:
      'In the world we live in today, data is like the puzzle pieces that fit together to reveal the bigger picture of success for businesses. Its the key ingredient, the secret sauce that companies use to make informed decisions and navigate the complexities of the digital era. Now, imagine you re in Hyderabad, a bustling city known for its tech scene, where the demand for skilled individuals in the field of data engineering is soaring high.',
    title: 'Starting the Data Journey: Learning Azure Data Engineering',
  },
];

var searchText2 = '';
export default function App() {
  const [listPost2, setListPost2] = useState([]);
  const [searchText, setSearchText] = useState('');

  const SearchResultSampleComp = () => {
    return (
      <Text>
        This is left side{' '}
        <Text style={{ backgroundColor: '#FFC04C' }}>searchKeyword</Text>
        <Text> and this is right side</Text>
      </Text>
    );
  };

  
  const renderItem = ({ item }) => {
    return (
      <View style={styles.postItem}>
        <Text numberOfLines={2} style={styles.title}>
          {item.title}
        </Text>
        <Text numberOfLines={4} style={styles.desc}>
          {item.description}
        </Text>
      </View>
    );  
  };
  

  const renderItem2 = ({ item }) => {
    if (!searchText || searchText.trim().length < 1) {
      return (
        <View style={styles.postItem}>
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        </View>
      );
    }

    const indx = item.title.toLowerCase().indexOf(searchText.toLowerCase());
    const indx2 = item.description
      .toLowerCase()
      .indexOf(searchText.toLowerCase());
    const length = searchText.length;

    if (indx < 0 && indx2 < 0) return null;

    return (
      <View style={styles.postItem}>
        {indx < 0 ? (
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
        ) : (
          <Text numberOfLines={2} style={styles.title}>
            {item.title.substr(0, indx)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.title.substr(indx, length)}
            </Text>
            <Text>{item.title.substr(indx + length)}</Text>
          </Text>
        )}
        {indx2 < 0 ? (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        ) : (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description.substr(0, indx2)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.description.substr(indx2, length)}
            </Text>
            <Text>{item.description.substr(indx2 + length)}</Text>
          </Text>
        )}
      </View>
    );
  };

  const renderItem3 = ({ item }) => {
    if (!searchText || searchText.trim().length < 1) {
      return (
        <View style={styles.postItem}>
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        </View>
      );
    }

    const indx = item.title2.indexOf(searchText2);
    const indx2 = item.description2.indexOf(searchText2);
    const length = searchText2.length;

    if (indx < 0 && indx2 < 0) return null;

    return (
      <View style={styles.postItem}>
        {indx < 0 ? (
          <Text numberOfLines={2} style={styles.title}>
            {item.title}
          </Text>
        ) : (
          <Text numberOfLines={2} style={styles.title}>
            {item.title.substr(0, indx)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.title.substr(indx, length)}
            </Text>
            <Text>{item.title.substr(indx + length)}</Text>
          </Text>
        )}
        {indx2 < 0 ? (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description}
          </Text>
        ) : (
          <Text numberOfLines={4} style={styles.desc}>
            {item.description.substr(0, indx2)}
            <Text style={{ backgroundColor: '#FFC04C' }}>
              {item.description.substr(indx2, length)}
            </Text>
            <Text>{item.description.substr(indx2 + length)}</Text>
          </Text>
        )}
      </View>
    );
  };

  useEffect(() => {
    const arr = list_post.map((ele) => ({
      ...ele,
      title2: ele.title.toLowerCase(),
      description2: ele.description.toLowerCase(),
    }));
    setListPost2(arr);
  }, []);

  return (
    <View style={styles.container}>
      {/* <SearchResultSampleComp /> */}
      <TextInput
        style={styles.searchInput}
        placeholder={'Search'}
        value={searchText}
        onChangeText={(txt) => {
          searchText2 = txt.toLowerCase();
          setSearchText(txt);
        }}
      />
      <FlatList
        data={listPost2}
        renderItem={renderItem3}
        keyExtractor={(item, index) => '_listItem_' + index}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eeffff',
    //  alignItems: 'center',
    //  justifyContent: 'center',
    paddingVertical: 10,
    paddingHorizontal: 3,
  },
  searchInput: {
    alignSelf: 'center',
    width: '80%',
    borderWidth: 0.5,
    borderColor: 'grey',
    marginBottom: 10,
    paddingVertical: 7,
    paddingHorizontal: 5,
    borderRadius: 5,
  },
  desc: {
    fontSize: 14,
    color: '#303030',
  },
  title: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 16,
    marginBottom: 3,
  },
  postItem: {
    marginTop: 5,
  },
});