Function HighlightedText

components/HighlightedText.tsx:21–165

({
  text,
  query,
  numberOfLines,
  style,
  highlightStyle,
  bounceAnim: externalBounceAnim,
  caseSensitive = false,
  highlightOnlyFirstMatch = false,
})

}

const HighlightedText: React.FC<HighlightedTextProps> = ({
  text,
  query,
  numberOfLines,
  style,
  highlightStyle,
  bounceAnim: externalBounceAnim,
  caseSensitive = false,
  highlightOnlyFirstMatch = false,
}) => {
  const internalBounceAnim = useBounceAnimation(query);
  const bounceAnim = externalBounceAnim || internalBounceAnim;
  const [queryKey, setQueryKey] = useState<string>('');

  useEffect(() => {
    setQueryKey(query);
  }, [query]);

  const baseTextStyle = useMemo(() => {
    if (!style) return {};

    if (Array.isArray(style)) {
      return style.reduce((acc, curr) => ({ ...acc, ...curr }), {});
    }

    return style;
  }, [style]);

  const highlightedStyle = useMemo(
    () => ({
      ...styles.highlight,
      ...(highlightStyle || {}),
      fontSize: baseTextStyle.fontSize,
      fontFamily: baseTextStyle.fontFamily,
      fontWeight: baseTextStyle.fontWeight || '600',
      lineHeight: baseTextStyle.lineHeight,
      letterSpacing: baseTextStyle.letterSpacing,
      transform: Platform.OS === 'ios' ? [{ scale: bounceAnim }] : undefined,
    }),
    [bounceAnim, highlightStyle, baseTextStyle],
  );

  // Create a style for non-highlighted text parts that ensures it looks the same as original text
  const nonHighlightedStyle = useMemo(
    () => ({
      ...baseTextStyle, // Copy all original text properties
    }),
    [baseTextStyle],
  );

  const renderTextPart = useCallback(
    (part: TextPart, index: number) => {
      if (part.isMatch) {
        return (
          <Animated.View
            key={`highlight-container-${index}-${queryKey}`}
            style={[styles.highlightContainer, { transform: [{ scale: bounceAnim }] }]}
          >