update demo-react-movie-app-with-algolia,

03_source/mobile/src/pages/DemoReactMovieAppWithAlgolia/components/CustomSearchbox.tsx

@@ -0,0 +1,18 @@
+import { IonSearchbar } from '@ionic/react';
+import { searchCircleOutline } from 'ionicons/icons';
+import { connectSearchBox } from 'react-instantsearch-core';
+
+const CustomSearchBox = ({ currentRefinement, refine }): React.JSX.Element => (
+  <IonSearchbar
+    animated={true}
+    onIonCancel={() => refine('')}
+    value={currentRefinement}
+    onIonChange={(event) => refine(event.currentTarget.value)}
+    onKeyUp={(event) => refine(event.currentTarget.value)}
+    placeholder="Try 'Avengers'"
+    icon={searchCircleOutline}
+    slot="end"
+  />
+);
+
+export default connectSearchBox(CustomSearchBox);