feat(react-native): update getting-started and migrate query-suggestions (#476)

Author: dhayab

react-instantsearch-native/getting-started/.expo-shared/assets.json

@@ -1,14 +1,26 @@
+# Dependencies
 node_modules/
+
+# Expo
 .expo/
 dist/
-npm-debug.*
+web-build/
+
+# Native
+*.orig.*
 *.jks
 *.p8
 *.p12
 *.key
 *.mobileprovision
-*.orig.*
-web-build/
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
 
 # macOS
 .DS_Store

react-instantsearch-native/getting-started/.gitignore

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

react-instantsearch-native/getting-started/.prettierrc

@@ -1,8 +1,15 @@
 import React, { useRef, useState } from 'react';
-import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';
+import {
+  FlatList,
+  Platform,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch } from 'react-instantsearch';
+import { Configure, InstantSearch } from 'react-instantsearch-core';
 
 import { InfiniteHits } from './src/InfiniteHits';
 import { SearchBox } from './src/SearchBox';
@@ -28,10 +35,11 @@ export default function App() {
       <StatusBar style="light" />
       <View style={styles.container}>
         <InstantSearch searchClient={searchClient} indexName="instant_search">
+          <Configure highlightPreTag="<mark>" highlightPostTag="</mark>" />
           <SearchBox onChange={scrollToTop} />
           <Filters
             isModalOpen={isModalOpen}
-            onToggleModal={() => setModalOpen((isOpen) => !isOpen)}
+            onToggleModal={() => setModalOpen(!isModalOpen)}
             onChange={scrollToTop}
           />
           <InfiniteHits ref={listRef} hitComponent={Hit} />
@@ -57,6 +65,8 @@ const styles = StyleSheet.create({
   safe: {
     flex: 1,
     backgroundColor: '#252b33',
+    // @ts-ignore 100vh is valid but not recognized by react-native
+    height: Platform.OS === 'web' ? '100vh' : '100%',
   },
   container: {
     flex: 1,

react-instantsearch-native/getting-started/App.tsx

@@ -1,7 +1,13 @@
-# ais-ecommerce-demo-app
+# react-instantsearch-native-getting-started
 
 _This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
 
+## Clone the example
+
+```sh
+curl https://codeload.github.com/algolia/doc-code-samples/tar.gz/master | tar -xz --strip=2 doc-code-samples-master/react-instantsearch-native/getting-started
+```
+
 ## Get started
 
 To run this project locally, install the dependencies and run the local server:

react-instantsearch-native/getting-started/README.md

@@ -1,18 +1,16 @@
 {
   "expo": {
-    "name": "ais-ecommerce-demo-app",
-    "slug": "ais-ecommerce-demo-app",
+    "name": "react-instantsearch-native-getting-started",
+    "slug": "react-instantsearch-native-getting-started",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "updates": {
-      "fallbackToCacheTimeout": 0
-    },
     "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true

react-instantsearch-native/getting-started/app.json

@@ -1,31 +1,28 @@
 {
-  "name": "ais-ecommerce-demo-app",
+  "name": "react-instantsearch-native-getting-started",
   "version": "1.0.0",
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
-    "web": "expo start --web",
-    "eject": "expo eject"
+    "web": "expo start --web"
   },
   "dependencies": {
-    "algoliasearch": "4.12.1",
-    "expo": "~44.0.0",
-    "expo-status-bar": "~1.2.0",
-    "instantsearch.js": "4.55.0",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-instantsearch-core": "7.0.0",
-    "react-native": "0.64.3",
-    "react-native-web": "0.17.1"
+    "algoliasearch": "4.14.3",
+    "expo": "~49.0.11",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-instantsearch-core": "7.1.0",
+    "react-native": "0.72.4",
+    "react-native-web": "~0.19.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "~0.64.12",
-    "expo-cli": "5.1.1",
-    "typescript": "~4.3.5"
+    "@babel/core": "^7.20.0",
+    "@expo/webpack-config": "^19.0.0",
+    "@types/react": "^18.0.5",
+    "typescript": "5.1.3"
   }
 }

react-instantsearch-native/getting-started/package.json

@@ -12,7 +12,7 @@ import {
   useClearRefinements,
   useCurrentRefinements,
   useRefinementList,
-} from 'react-instantsearch';
+} from 'react-instantsearch-core';
 
 type FiltersProps = {
   isModalOpen: boolean;

react-instantsearch-native/getting-started/src/Filters.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleProp, StyleSheet, Text, TextStyle } from 'react-native';
 import { Hit as AlgoliaHit } from '@algolia/client-search';
 import {
   getHighlightedParts,
@@ -9,27 +9,28 @@ import {
 type HighlightPartProps = {
   children: React.ReactNode;
   isHighlighted: boolean;
+  style: StyleProp<TextStyle>;
 };
 
-function HighlightPart({ children, isHighlighted }: HighlightPartProps) {
-  return (
-    <Text style={isHighlighted ? styles.highlighted : styles.nonHighlighted}>
-      {children}
-    </Text>
-  );
+function HighlightPart({ children, style }: HighlightPartProps) {
+  return <Text style={style}>{children}</Text>;
 }
 
 type HighlightProps<THit> = {
   hit: THit;
   attribute: keyof THit | string[];
   className?: string;
   separator?: string;
+  highlightedStyle?: StyleProp<TextStyle>;
+  nonHighlightedStyle?: StyleProp<TextStyle>;
 };
 
 export function Highlight<THit extends AlgoliaHit<Record<string, unknown>>>({
   hit,
   attribute,
   separator = ', ',
+  highlightedStyle = styles.highlighted,
+  nonHighlightedStyle = styles.nonHighlighted,
 }: HighlightProps<THit>) {
   const { value: attributeValue = '' } =
     getPropertyByPath(hit._highlightResult, attribute as string) || {};
@@ -47,6 +48,11 @@ export function Highlight<THit extends AlgoliaHit<Record<string, unknown>>>({
                 <HighlightPart
                   key={subPartIndex}
                   isHighlighted={subPart.isHighlighted}
+                  style={
+                    subPart.isHighlighted
+                      ? highlightedStyle
+                      : nonHighlightedStyle
+                  }
                 >
                   {subPart.value}
                 </HighlightPart>
@@ -58,7 +64,11 @@ export function Highlight<THit extends AlgoliaHit<Record<string, unknown>>>({
         }
 
         return (
-          <HighlightPart key={partIndex} isHighlighted={part.isHighlighted}>
+          <HighlightPart
+            key={partIndex}
+            isHighlighted={part.isHighlighted}
+            style={part.isHighlighted ? highlightedStyle : nonHighlightedStyle}
+          >
             {part.value}
           </HighlightPart>
         );

react-instantsearch-native/getting-started/src/Highlight.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef } from 'react';
 import { StyleSheet, View, FlatList } from 'react-native';
 import { Hit as AlgoliaHit } from '@algolia/client-search';
-import { useInfiniteHits, UseInfiniteHitsProps } from 'react-instantsearch';
+import {
+  useInfiniteHits,
+  UseInfiniteHitsProps,
+} from 'react-instantsearch-core';
 
 type InfiniteHitsProps<THit> = UseInfiniteHitsProps & {
   hitComponent: (props: { hit: THit }) => JSX.Element;
@@ -12,7 +15,10 @@ export const InfiniteHits = forwardRef(
     { hitComponent: Hit, ...props }: InfiniteHitsProps<THit>,
     ref: React.ForwardedRef<FlatList<THit>>
   ) => {
-    const { hits, isLastPage, showMore } = useInfiniteHits(props);
+    const { hits, isLastPage, showMore } = useInfiniteHits({
+      ...props,
+      escapeHTML: false,
+    });
 
     return (
       <FlatList
@@ -46,7 +52,8 @@ const styles = StyleSheet.create({
 });
 
 declare module 'react' {
-  function forwardRef<T, P = {}>(
-    render: (props: P, ref: React.Ref<T>) => React.ReactElement | null
-  ): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
+  // eslint-disable-next-line no-shadow
+  function forwardRef<TRef, TProps = unknown>(
+    render: (props: TProps, ref: React.Ref<TRef>) => React.ReactElement | null
+  ): (props: TProps & React.RefAttributes<TRef>) => React.ReactElement | null;
 }

react-instantsearch-native/getting-started/src/InfiniteHits.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { StyleSheet, View, TextInput } from 'react-native';
-import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch';
+import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch-core';
 
 type SearchBoxProps = UseSearchBoxProps & {
   onChange: (newValue: string) => void;
@@ -38,7 +38,8 @@ export function SearchBox({ onChange, ...props }: SearchBoxProps) {
         autoCapitalize="none"
         autoCorrect={false}
         spellCheck={false}
-        autoCompleteType="off"
+        autoComplete="off"
+        placeholder="Search for products..."
       />
     </View>
   );