Here’s a React component.
import { useTranslation } from 'react-i18next';

import { DataTable, useTheme } from 'react-native-paper';

import { HorizontalScale, VerticalScale } from '@internals/Components/Scaler';

import React, { useContext, FunctionComponent, memo, useMemo, useState, useEffect } from 'react';

import { Animated, ScrollView, StyleSheet, Text, View } from 'react-native';

import { Icon, ActivityIndicator } from 'react-native-paper';

import { useAnimate } from '@internals/hooks/useAnimate';

export interface RechercheInformationsTableProps {

    isLoading?: boolean;

    dataColumns: string[];

    dataColumnOptions?: {

        key: string; // element of dataColumns

        label: string;

        numeric?: boolean;

        width?: number;

    }[];

    dataRows: {

        [key: string]: string | number;

    }[];

    searchFilter: string;

}

const filterItems = (items: any[], searchFilter: string) => {

    if (!searchFilter || searchFilter.trim() === '') {

        return items;

    }

    const lowerCaseSearchFilter = searchFilter.toLowerCase();

    return items.filter(item =>

        Object.values(item).some(value =>

            String(value).toLowerCase().includes(lowerCaseSearchFilter)

        )

    );

};

const RechercheInformationsTable: FunctionComponent<RechercheInformationsTableProps> = props => {

    const theme = useTheme();

    const { t } = useTranslation();

    const { animatedValue, forceStart } = useAnimate(0, 1, 400, 0);

    const [page, setPage] = useState(0);

    const [numberOfItemsPerPageList] = useState([50, 100, 200]);

    const [itemsPerPage, onItemsPerPageChange] = useState(numberOfItemsPerPageList[0]);

    const from = page * itemsPerPage;

    const to = Math.min((page + 1) * itemsPerPage, props.dataRows.length);

    const {

        isLoading = false,

        ...rest

    } = props;

    const items = useMemo(() => {

        const startTime = performance.now();

        // forceStart();

        const filtered = filterItems(props.dataRows, props.searchFilter);

        const endTime = performance.now();

        console.log(`Filtering took ${endTime - startTime} milliseconds`);

        return filtered;

    }, [props.dataRows, props.searchFilter]);

    const styles = useMemo(

        () =>

            StyleSheet.create({

                containerVerticalInfo: {

                    display: "flex",

                    flexDirection: 'row',

                    // padding: 12,

                    height: '100%',

                },

                loadingOverlay: {

                    position: 'absolute',

                    width: '100%',

                    height: '100%',

                    alignItems: 'center',

                    justifyContent: 'center',

                },

                infoElementNumerical: {

                    flex: 1,

                    flexDirection: 'column',

                    justifyContent: 'space-between',

                    borderColor: theme.colors.primary,

                    alignItems: 'center',

                },

                infoLabelNumerical: {

                    marginTop: 8,

                    fontSize: 12,

                },

                infoValueContainer: {

                    flexDirection: 'row',

                    alignItems: 'baseline',

                    alignSelf: 'center',

                    gap: 6,

                },

                separatorLine: {

                    alignSelf: 'stretch',

                    borderBottomColor: theme.colors.secondary,

                    borderBottomWidth: StyleSheet.hairlineWidth,

                    opacity: 0.3,

                },

                loadingText: {

                    fontSize: 16,

                    textAlign: 'center',

                    marginTop: VerticalScale(2),

                    color: theme.colors.secondary,

                    opacity: 1,

                },

            }),

        [theme],

    );

    useEffect(() => {

        setPage(0);

    }, [itemsPerPage]);

    return (

        <Animated.View style={{ opacity: animatedValue }}>

            {isLoading ? (

                <View style={styles.loadingOverlay}>

                    <ActivityIndicator color={theme.colors.primary} />

                    <Text style={styles.loadingText}>{t('BLERetrievingData')}</Text>

                </View>

            ) : null}

            <View style={[styles.containerVerticalInfo, { opacity: isLoading ? 0.05 : 1 }]}>

                <DataTable style={{ display: "flex" }}>

                    {/* <ScrollView horizontal contentContainerStyle={{ flexDirection: 'column' }}> */}

                    <DataTable.Header>

                        {props.dataColumns.map((column, index) => {

                            const columnOption = props.dataColumnOptions?.find(opt => opt.key === column);

                            const titleStyle = columnOption?.width ? {

                                width: columnOption?.width,

                            } : {};

                            return (

                                <DataTable.Title

                                    key={index}

                                    numeric={columnOption?.numeric}

                                    style={titleStyle}

                                >

                                    {columnOption?.label || column}

                                </DataTable.Title>

                            );

                        })}

                    </DataTable.Header>

                    <ScrollView style={{ flex: 1, }}>

                        {items.slice(from, to).map((row, index) => (

                            <DataTable.Row key={index}>

                                {props.dataColumns.map((column, colIndex) => {

                                    const columnOption = props.dataColumnOptions?.find(opt => opt.key === column);

                                    return (

                                        <DataTable.Cell

                                            key={colIndex}

                                            numeric={columnOption?.numeric}

                                            style={{ width: columnOption?.width }}

                                        >

                                            {row[column]}

                                        </DataTable.Cell>

                                    );

                                })}

                            </DataTable.Row>

                        ))}

                    </ScrollView>

                    <DataTable.Pagination

                        page={page}

                        numberOfPages={Math.ceil(items.length / itemsPerPage)}

                        onPageChange={(page) => setPage(page)}

                        label={`${from + 1} à ${Math.min(to, items.length)} sur ${items.length}`}

                        numberOfItemsPerPageList={numberOfItemsPerPageList}

                        numberOfItemsPerPage={itemsPerPage}

                        onItemsPerPageChange={onItemsPerPageChange}

                        // showFastPaginationControls

                        selectPageDropdownLabel={''}

                    />

                </DataTable>

            </View>

        </Animated.View>

    );

};

export default memo(RechercheInformationsTable);


Is it possible to change this component such that when I am searching something (searchFilter), the part of the string that matched is highlighted with the theme.colors.primary color in the data tables? Please only answer with the parts of the code that you have changed.