Instantsearch + react-native

Hi!

I´m fiddling around with rn and the fantastic instantsearch and was wondering on how to put the connectHierarchicalMenu, connectRefinementList in an offscreen area /drawer that opens on click (e.g. a button that reads ‘Filter’). Any ideas on how to do that? I´m a bit stuck here.

Thank you!

2 Likes

Hey,

I haven’t written any react-native yet, but I think you could have a syntax like this in React in the browser. I should check how much difference there is between react-native and React.

class Panel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      expanded: false,
    };
  }

  toggleExpanded() {
    this.setState(prevState => ({
      expanded: !prevState.expanded,
    }));
  }

  render() {
    const { expanded } = this.state;
    return (
      <div>
        <button onClick={this.toggleExpanded.bind(this)}>filters</button>
        {expanded &&
          <div>
            {/*put your filters here*/}
          </div>}
      </div>
    );
  }
}

Then you can style your filters to take up all space needed.

1 Like

Hi! Thx! I´ll give it a try!

Hi,
I´ve put several connectors in a modal. This modal is visible/invisible depending on ‘filterExpanded’

   render() {

    const { filterExpanded } = this.state;
 
    return (

      <View>
          <InstantSearch
            appId="idhere"
            apiKey="apiKeyhere"
            indexName='indexNamhere'
            onSearchStateChange = { (searchState)=> console.info(searchState) }
          >
            <ConnectedSearchBox openDrawer = { this.props.openDrawer }/>

            <TouchableOpacity onPress = { () => this.toggleModal()  }>
              <Text> Toggle Filter Visibility </Text>
            </TouchableOpacity>

            <Modal
                animationType={"slide"}
                transparent={false}
                visible={filterExpanded}
                onRequestClose={() => {alert("Modal has been closed.")}}
                >
                <View>

                    <ConnectedCurrentRefinements />

                    <ConnectedFilterModal attributes = {['categories.level0']} />

                    <ConnectedSizes attributeName = "size_tid"  />

                    <ConnectedPriceRange attributeName="price" items={[
                        {end: 10, label: '<$10'},
                        {start: 10, end: 100, label: '$10-$100'},
                        {start: 100, end: 500, label: '$100-$500'},
                        {start: 500, label: '>$500'},
                      ]} />
                    <ConnectedStats toggleVisibility = { this.toggleModal.bind(this) } />

                </View>
            </Modal>

            <ConnectedHits/> 

          </InstantSearch>
      </View>
      );
  }

The Problem:
-I open the modal, refine the search state, then i close the modal (InstantSearch re-renders) and the previously refined search state is gone. Maybe this is due to the nested structure (connectors within modal)?

Could you propose a workaround for this?

Thank you!

Hi, thanks a lot for very detailed explanation. This has been raised multiple times by multiple people already, for example @alexandre.meunier. I don’t think we have yet a GitHub issue about it. Anyone willing to open it? So that we can then iterate on this. Thanks!

3 Likes

Hi there,
I have the same issue described by @maytrics.
I am opening a github issue for it. I prefer the dialog approach to the expand approach presented by @haroen.
Thanks.

BR
Alex

1 Like

Hi there,
I got answer to my question on github.
Use virtual widgets. This will ensure that when the refinementlist in the modal is closed the state will not be reset.
Virtual widgets will maintain the state without displaying any item on the screen.

Thanks.

BR
Alex

1 Like