Search code examples
react-nativeexpoalgolia

Text strings must be rendered within a <Text> component. Using Algolia React Native

I just started using Algolia with React Native and Expo and I would like to integrate it in my mobile App.

import { SafeAreaView, StyleSheet, View, Text } from 'react-native'
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox, InfiniteHits } from "react-instantsearch-dom";
import { I18nContext } from '../../translation';
import TitleHolder from '../../Components/TitleHolder_noback';
import BottomBar from '../../Components/bottom_bar';

const Search = props => {
    const { translate } = useContext(I18nContext);
    const searchClient = algoliasearch('XXXXXXXXX', 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
    const Hit = ({ hit }) =>
        <View>
            <Text>{hit.rep_first_name}</Text>
            <Text>{hit.rep_last_name}</Text>
        </View>;

    return (
        <Fragment>

            <SafeAreaView style={{ flex: 0, backgroundColor: '#009CF3' }} />
            <SafeAreaView style={styles.container}>
                <TitleHolder title={translate("all_reps_title")} />
                <View>
                    <InstantSearch searchClient={searchClient} indexName='rep_lookup'>
                        <SearchBox searchAsYouType={false} translations={{ placeholder: 'Rechercher un parlementaire' }} /> {/* use a translate here */}
                        <InfiniteHits hitComponent={Hit} />
                    </InstantSearch>
                </View>
                <BottomBar />
            </SafeAreaView>
            <SafeAreaView style={{ flex: 0, backgroundColor: 'white' }} />
        </Fragment>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
});

export default Search;

I have this error :

enter image description here

If someone have any ideas ? I'm sure that my component and BottomBar works great.

Solution

  • I read more and more the documentation of Algolia and I just can't use the Algolia Widget with react Native and Expo, I have to use custom widget like connectSearchBox

    enter image description here

    https://www.algolia.com/doc/guides/building-search-ui/going-further/native/react/