React Native Algolia Instant Search & SearchBox - reactjs

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;