React Native Algolia Instant Search & SearchBox

Question

When following the Algolia docs (https://www.algolia.com/doc/api-reference/widgets/react/) to setup a simple search of the Alogila index with the following code

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {Text, View, StyleSheet, Button, TextInput} from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, Index, SearchBox, Hits } from 'react-instantsearch-dom';


const searchClient = algoliasearch(
    '**********', //app ID
    '************************' //app key
);

class MyApp extends Component {
    constructor(props){
        super(props);

    }

    render(){
        return (
            <View style={{
                flex: 1,
                alignItems: "center",
                flexDirection: "column",
                paddingTop: 20
              }}>
            <InstantSearch
                searchClient={searchClient}
                indexName="dev_INVENTORY">
                    <SearchBox/>
            </InstantSearch>
            </View>
    )}

};

const styles = StyleSheet.create({});

export default MyApp;

I get the error 'Invariant Violation: View config not found for name input. Make sure to start component names with a capital letter.

This error is located at in input (created by Searchbox)....'

When I remove the SearchBox code the app functions fine but as soon as I add it i come across the error, but clearly all the elements are capitalized correctly (unless i've made a ridiculous silly oversight!?) I wondered if the error was related to this persons issue; Using Algolia react-instantsearch with react-native but i dont think it is.

If anyone has any suggestions just so I can get started with searching Algolia that would be ace as I'm a bit stuck!

Answer 1

The issue is that you're trying to use some widgets from react-instantsearch-dom which are not compatible with React Native.

For React Native you'll need to use the connectors instead of the widgets: https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/#using-connectors-instead-of-widgets

In your case it should give you something like:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TextInput } from 'react-native';
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, connectSearchBox } from 'react-instantsearch-native';

const searchClient = algoliasearch(
  '**********', // app ID
  '************************' // app key
);

class SearchBox extends Component {
  render() {
    return (
      <View>
        <TextInput
          onChangeText={text => this.props.refine(text)}
          value={this.props.currentRefinement}
          placeholder={'Search a product...'}
          clearButtonMode={'always'}
          spellCheck={false}
          autoCorrect={false}
          autoCapitalize={'none'}
        />
      </View>
    );
  }
}

SearchBox.propTypes = {
  refine: PropTypes.func.isRequired,
  currentRefinement: PropTypes.string,
};

const ConnectedSearchBox = connectSearchBox(SearchBox);

class MyApp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          flexDirection: 'column',
          paddingTop: 20,
        }}
      >
        <InstantSearch searchClient={searchClient} indexName="dev_INVENTORY">
          <ConnectedSearchBox />
        </InstantSearch>
      </View>
    );
  }
}

const styles = StyleSheet.create({});

export default MyApp;