fix(compat): upgrade React Native example and its lifecycles (#2304)

examples/react-native/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

examples/react-native/.gitignore

@@ -1,3 +1,17 @@
-node_modules/
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# expo
 .expo/
-npm-debug.*
+
+# dependencies
+/node_modules
+
+# misc
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/react-native/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}

examples/react-native/README.md

@@ -1,25 +1,19 @@
-This examples shows how to use `react-instantsearch` along with `react-native`.
+This example shows how to use React InstantSearch along with React Native.
 
-It was created using `create-react-native-app`.
+## Get started
 
-## Clone the example
-
-```
-curl https://codeload.github.com/algolia/react-instantsearch/tar.gz/master | tar -xz --strip=2 react-instantsearch-master/examples/react-native
-```
-
-## Start the example
+To run this project locally, install the dependencies and run the local server:
 
 ```sh
 yarn install --no-lockfile
 
-yarn start //to see the app on your phone using the expo client
+yarn start // to see the app on your phone using the Expo client
 
-yarn run ios //to see the app running on the ios simulator
+yarn run ios // to see the app running on the ios simulator
 
-yarn run android //to see the app running on the android emulator
+yarn run android // to see the app running on the android emulator
 ```
 
-Read more about `react-instantsearch` [in our documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/).
+Read more about React InstantSearch [in our documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/).
 
-Read more about `react-native` and how to run projects in [their documentation](https://facebook.github.io/react-native/docs/getting-started.html).
+Read more about React Native and how to run projects in [their documentation](https://facebook.github.io/react-native/docs/getting-started.html).

examples/react-native/app.json

@@ -1,6 +1,6 @@
 {
   "expo": {
-    "sdkVersion": "25.0.0",
+    "sdkVersion": "32.0.0",
     "name": "React InstantSearch for React Native",
     "description": "Showcase the Algolia Search Experience inside a React Native application. \n\n => Code can be found at https://github.com/algolia/react-instantsearch/tree/master/examples/react-native \n\n => See React InstantSearch documentation website at https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/",
     "slug": "algolia-react-instantsearch",

examples/react-native/babel.config.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

examples/react-native/package.json

@@ -1,39 +1,44 @@
 {
   "name": "example-react-native",
   "version": "1.0.0",
-  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
   "private": true,
-  "license": "MIT",
+  "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "react-native-scripts start",
     "build": "echo \"Error: no build specified\" && exit 0",
-    "eject": "react-native-scripts eject",
-    "android": "react-native-scripts android",
-    "ios": "react-native-scripts ios",
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject",
     "test": "jest"
   },
-  "devDependencies": {
-    "babel-preset-react-native": "4.0.1",
-    "jest": "21.2.1",
-    "jest-expo": "24.0.0",
-    "react-native-scripts": "1.14.1",
-    "react-test-renderer": "16.8.6"
-  },
   "dependencies": {
     "@ptomasroos/react-native-multi-slider": "1.0.0",
     "algoliasearch": "3.32.1",
-    "expo": "25.1.2",
+    "expo": "32.0.6",
     "lodash": "4.17.11",
-    "prop-types": "15.6.0",
+    "prop-types": "15.7.2",
     "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-instantsearch": "5.7.0",
-    "react-native": "0.52.0",
+    "react-instantsearch-native": "5.7.0",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
     "react-native-modal-dropdown": "0.6.2",
     "react-native-router-flux": "4.0.6",
     "react-native-star-rating": "1.1.0",
     "react-native-vector-icons": "6.5.0"
   },
+  "devDependencies": {
+    "babel-preset-expo": "5.0.0",
+    "eslint": "5.7.0",
+    "eslint-config-algolia": "13.2.3",
+    "eslint-config-prettier": "3.6.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-prettier": "3.0.1",
+    "eslint-plugin-react": "7.11.1",
+    "expo-cli": "2.14.0",
+    "jest": "24.7.1",
+    "jest-expo": "32.0.0",
+    "prettier": "1.16.4",
+    "react-test-renderer": "16.8.6"
+  },
   "jest": {
     "preset": "jest-expo",
     "transformIgnorePatterns": [

examples/react-native/src/Categories.js

@@ -11,15 +11,15 @@ import {
   Keyboard,
 } from 'react-native';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch } from 'react-instantsearch/native';
+import Icon from 'react-native-vector-icons/FontAwesome';
 import {
+  InstantSearch,
   connectMenu,
   connectRefinementList,
   connectSearchBox,
   connectRange,
-} from 'react-instantsearch/connectors';
+} from 'react-instantsearch-native';
 import Stats from './components/Stats';
-import Icon from 'react-native-vector-icons/FontAwesome';
 import Highlight from './components/Highlight';
 import Spinner from './components/Spinner';
 
@@ -65,18 +65,21 @@ const styles = StyleSheet.create({
 
 class Filters extends Component {
   static displayName = 'React Native example';
+
   constructor(props) {
     super(props);
     this.onSearchStateChange = this.onSearchStateChange.bind(this);
     this.state = {
       searchState: props.searchState,
     };
   }
+
   onSearchStateChange(nextState) {
     const searchState = { ...this.state.searchState, ...nextState };
     this.setState({ searchState });
     this.props.onSearchStateChange(searchState);
   }
+
   render() {
     return (
       <View style={styles.mainContainer}>
@@ -116,9 +119,11 @@ class Menu extends Component {
       query: '',
     };
   }
+
   saveQuery(text) {
     this.setState({ query: text });
   }
+
   render() {
     const ds = new ListView.DataSource({
       rowHasChanged: (r1, r2) => r1 !== r2,
@@ -133,6 +138,7 @@ class Menu extends Component {
         keyboardShouldPersistTaps={'always'}
       />
     ) : null;
+
     return (
       <View style={styles.searchBoxContainer}>
         <View style={{ flexDirection: 'row' }}>
@@ -163,6 +169,7 @@ class Menu extends Component {
     ) : (
       <Icon name="circle-thin" color="#000" />
     );
+
     const label = this.props.isFromSearch ? (
       <Highlight
         attribute="label"
@@ -172,6 +179,7 @@ class Menu extends Component {
     ) : (
       refinement.label
     );
+
     return (
       <TouchableHighlight
         onPress={() => {

examples/react-native/src/Filters.js

@@ -10,14 +10,14 @@ import {
   Keyboard,
 } from 'react-native';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch } from 'react-instantsearch/native';
 import {
+  InstantSearch,
   connectCurrentRefinements,
   connectMenu,
   connectRange,
   connectRefinementList,
   connectSearchBox,
-} from 'react-instantsearch/connectors';
+} from 'react-instantsearch-native';
 import Icon from 'react-native-vector-icons/FontAwesome';
 
 const searchClient = algoliasearch(

examples/react-native/src/Home.js

@@ -13,8 +13,8 @@ import {
   Dimensions,
 } from 'react-native';
 import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch } from 'react-instantsearch/native';
 import {
+  InstantSearch,
   connectSearchBox,
   connectInfiniteHits,
   connectRefinementList,
@@ -23,14 +23,14 @@ import {
   connectSortBy,
   connectRange,
   connectCurrentRefinements,
-} from 'react-instantsearch/connectors';
-import Highlight from './components/Highlight';
-import Spinner from './components/Spinner';
+} from 'react-instantsearch-native';
 import RatingMenu from 'react-native-star-rating';
 import ModalDropdown from 'react-native-modal-dropdown';
 import IosIcon from 'react-native-vector-icons/Ionicons';
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
 import { Actions } from 'react-native-router-flux';
+import Highlight from './components/Highlight';
+import Spinner from './components/Spinner';
 
 const searchClient = algoliasearch(
   'latency',