hi.js

import React, { PureComponent } from 'react';

// Import styles
import GeneralStyles from '../styles/GeneralStyles';
import FormElements from '../styles/FormElements';
import SearchScreenStyles from '../styles/SearchScreenStyles';

// Importing components
import CustomIcon from '../components/CustomIcon';
import SearchInput from '../components/SearchInput'

// Importing algolia search things
import { InstantSearch } from 'react-instantsearch/native';

class SearchScreen extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {}
  }
  render() {

    return (
      <View style={SearchScreenStyles.SearchScreenContainer}>
        <View style={SearchScreenStyles.SearchScreenStatusBarFaker}>
          {/* React's SafeAreaView wasn't working, so had to hack around */}
        </View>
        <View style={SearchScreenStyles.SearchScreenTitleBar}>
          <View style={SearchScreenStyles.SearchBarContainer}>
            <CustomIcon name='zoom-2' size={16} color='#8E8E93' />
            <InstantSearch
              appId="M9T8RXT6UZ"
              apiKey="33539d02eb1b72f1fe1707637aacc426"
              indexName="Venue"
            >
              <SearchInput ref='MainSearch' />
            </InstantSearch>
          </View>
          <Button
            onPress={() => this.props.navigation.goBack() && this.refs.MainSearch.blur()}
            title='Cancel'
          />
        </View>
        <View>
          <InstantSearch
            appId="M9T8RXT6UZ"
            apiKey="33539d02eb1b72f1fe1707637aacc426"
            indexName="Venue"
          >
            <Text>
              Congrats 🎉! Your application is now connected to Algolia!
            </Text>
          </InstantSearch>
        </View>
      </View>
    )
  }
}

export default SearchScreen;

hi1.js

import React, { PureComponent } from 'react';
import { TextInput } from 'react-native';

// Import styles
import SearchScreenStyles from '../styles/SearchScreenStyles';

// Importing algolia search things
import { InstantSearch } from 'react-instantsearch/native';
import { connectSearchBox } from 'react-instantsearch/connectors'

class SearchBox extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {}
  }
  componentDidMount() {
    // Because of a bug in RN you need to settimout on this (jah, on kyll bullshit)
    this.focusTimeout = setTimout(() => {
      this.refs.input.focus()
    }, 1)
  }
  componentWillUnmount() {
    clearTimeout(this.focusTimeout);
  }
  render() {
    const { refine } = this.props;
    return (
      <TextInput
        ref="input"
        style={SearchScreenStyles.SearchBarInput}
        onChangeText={text => refine(text)}
        value={currentRefinement}
        placeholder={'Where to next, Captain?'}
        clearButtonMode="always"
        spellCheck={false}
        autoCorrect={false}
        autoCapitalize="none"
      />
    );
  }
}

export default connectSearchBox()(SearchBox);