Use Algolia Recommend with React Native

Algolia Recommend React is compatible with React Native. The Recommend library’s pre-built, web-based UI components aren’t compatible with React Native by default, but you can customize them or use Recommend React Hooks with React Native core components or any third-party React Native component library.

This guide shows how to use Recommend React components or hooks to render recommendation carousels in your React Native application.

Before you begin

This guide requires:

You to have an understanding of React and React Native
An existing React Native app using React 16.8.0 or later. If you don’t already have an app, set one up.

Install the Algolia dependencies

Install @algolia/recommend and @algolia/recommend-react:

Copy

1
2
3
npm install @algolia/recommend @algolia/recommend-react
# or
yarn add @algolia/recommend @algolia/recommend-react

To add Algolia Recommend React to your app:

Initialize the Recommend client
Provide an Algolia index to connect to your Algolia app.
Add Algolia Recommend to your app either by using Recommend React Components or by using Recommend React Hooks.

To use a Recommend React component with React Native, you must customize (overwrite) the default implementation of three main render functions: itemComponent, children, and view.

Then, you can add the customized Recommend React Component in your React Native app, as shown in the example below:

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// ...
import { SafeAreaView, StatusBar, View } from 'react-native';
import recommend from "@algolia/recommend";
import { RelatedProducts } from '@algolia/recommend-react';

import { ProductView } from './ProductView';
import { ChildrenView } from './ChildrenView';
import { HorizontalSliderView } from './HorizontalSliderView';

// initialize recommend client 
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = "recommend_index"
// ...

export default function App({ item }) {
  return (
    <SafeAreaView style={styles.safe}>
      <StatusBar style="light" />
      <View style={styles.container}>

        // ...
        
        <RelatedProducts
          recommendClient={recommendClient}
          indexName={indexName}
          itemComponent={ProductView}
          maxRecommendations={5}
          view={HorizontalSliderView}
          objectIDs={[item.objectID]}
          children={ChildrenView}
        />

        // ...

      </View>
    </SafeAreaView>
  );
}

// ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Image, StyleSheet, Text, View } from 'react-native';

export default function ProductView({ item }) {
  const { objectID, image, name, price } = item;

  return (
    <View key={objectID} style={styles.container}>
      <Image
        style={{
          borderRadius: 25,
        }}
        contentFit="cover"
        source={image}
      />
      <View>
        <Text
          style={styles.productName}
          numberOfLines={1}
        >
          {name}
        </Text>
        <Text
          style={styles.productPrice}
          numberOfLines={1}
        >
          $ {price}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    marginBottom: '0.75rem'
  },
  productName: {
    color: '#424040',
    fontSize: '0.875rem',
    lineHeight: '1.25rem',
  },
  productPrice: {
    color: '#424040',
    fontSize: '0.875rem',
    lineHeight: '1.25rem',
    fontWeight: 600
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from 'react';
import { View } from 'react-native';

export const ChildrenView = (props) => {
  if (props.recommendations.length === 0) {
    return null;
  }

  return (
    // overwrite html elements used by the default implementation 
    // with react native elements
    <View>
      <props.View />
    </View>
  );
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { ScrollView, StyleSheet, View } from 'react-native';

export const HorizontalSliderView = (props) => {
  return (
    <View style={styles.container}>
      <ScrollView
        showsHorizontalScrollIndicator={false}
        horizontal
        style={styles.scrollContainer}>
        {props.items.map((item) => (
          <View key={item.objectID}>
            <props.itemComponent item={item} />
          </View>
        ))}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    maxHeight: '24rem',
  },
  scrollContainer: {
    flex: 1,
    gap: '1rem',
    flexDirection: 'row',
  },
});

You can add styles with the React Native StyleSheet API.

Recommend React provides React Hooks for each Recommend model. You can use them together with your custom components, as shown in the example below:

Copy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// ...
import { SafeAreaView, StatusBar, View } from 'react-native';
import recommend from "@algolia/recommend";
import { useRelatedProducts } from '@algolia/recommend-react';

// initialize recommend client 
const recommendClient = recommend('YourApplicationID', 'YourSearchOnlyAPIKey');
const indexName = "recommend_index"
// ...

export default function App({ item }) {

  // ...
  const { recommendations } = useRelatedProducts({
    recommendClient,
    indexName,
    objectIDs: [item.objectID],
  });

  return (
    <SafeAreaView>
      <StatusBar style="light" />
      <View style={styles.container}>

        // ...
        
        {recommendations.length > 0 && (
          <ScrollView
            showsHorizontalScrollIndicator={false}
            horizontal
            style={styles.scrollContainer}>
            {recommendations.map((item) => (
              <ProductView item={item} />
            ))}
          </ScrollView>
        )}

        // ...

      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    maxHeight: '24rem',
  },
  scrollContainer: {
    flex: 1,
    gap: '1rem',
    flexDirection: 'row',
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { Image, StyleSheet, Text, View } from 'react-native';

export default function ProductView({ item }) {
  const { objectID, image, name, price } = item;

  return (
    <View key={objectID} style={styles.container}>
      <Image
        style={{
          borderRadius: 25,
        }}
        contentFit="cover"
        source={image}
      />
      <View>
        <Text
          style={styles.productName}
          numberOfLines={1}
        >
          {name}
        </Text>
        <Text
          style={styles.productPrice}
          numberOfLines={1}
        >
          $ {price}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    marginBottom: '0.75rem'
  },
  productName: {
    color: '#424040',
    fontSize: '0.875rem',
    lineHeight: '1.25rem',
  },
  productPrice: {
    color: '#424040',
    fontSize: '0.875rem',
    lineHeight: '1.25rem',
    fontWeight: 600
  }
});

You can add styles with the React Native StyleSheet API.

Next steps

You now have a good starting point to create an even more dynamic experience with Algolia Recommend React and React Native. You can improve this app by:

Using a different component library like Lottie React Native or React Native Elements.
Checking the API reference to discover more Recommend React Hooks and components.
Integrating with React InstantSearch

Overview

Recommend with React meta-frameworks

Did you find this page helpful?

Use Algolia Recommend with React Native

On this page

Before you begin

Install the Algolia dependencies

Next steps

On this page

Use Algolia Recommend with React Native

On this page

Before you begin

Install the Algolia dependencies

Add Algolia Recommend React to your app

Using Recommend React components

Using Recommend React Hooks

Next steps

On this page