downshift: [react-native] Button props - Cannot read property activeElement of undefined

TREVOR!!! I miss you already buddy!

This is great. I don’t think you’re doing anything wrong. If you could dig a little further to see what’s going on then we can get that error fixed.

As for an example, I’m not very into the react native world, but I think that a snack.expo.io link would be sweet 😃

Copied the axios example (http://downshift.netlify.com/?selectedKind=Examples&selectedStory=axios&full=0&addons=1&stories=1&panelRight=0), and found the port over to React Native to be pretty easy, but was surprised that any dropdown item I click (or anywhere I click) triggers this ActiveElement error.

Not sure what I’m doing wrong, but happy to add my basic example to the docs, because I don’t see any simple starter for a basic working setup with RN. Guessing it has to do with the ref like you mentioned above, but as far as I can tell, I’m doing everything the suggested way.

import React, { Component } from 'react';
import { TextInput, View, Text, Image } from 'react-native';

import axios from 'axios';
import Downshift from 'downshift';

const CustomInput = TextInput;
const CustomResult = View;

const RootView = ({ innerRef, ...rest }) => <View ref={innerRef} {...rest} />;

class AxiosAutocomplete extends Component {
  this.state = { items: [] };

  fetchRepository = axios.get().then(this.setState({ items }))

  render() {
    return (
      <Downshift
        render={({
          getInputProps,
          getItemProps,
          isOpen,
          getRootProps,
        }) => (
          <RootView {...getRootProps({ refKey: 'innerRef' })}>
            <CustomInput
              {...getInputProps({
                onChange: (value) => {
                  this.fetchRepository(value);
                },
              })}
            />
            {isOpen && (
              <View>
                {this.state.items.map((item, index) => (
                  <CustomResult key={index} {...getItemProps({ item })}>
                      {item}
                  </CustomResult>
                ))}
              </View>
            )}
          </RootView>
        )}
      />
    );
  }
}

Get it, Cool. To summarize and make sure I understand - I’ll apply a ref as in getRootProps for the input both on web and native, but for now will only use it (in order to refocus) when: button_handleClick called, we are in native environment, and a ref exist.

Let me know if you think or meant something different. Hope to make it by the weekend, Thanks for the help, I’m really enjoying using Downshift with react-native.