-
Notifications
You must be signed in to change notification settings - Fork 386
React Native & Menu facet #121
Comments
It doesn't look horrifically different to https://github.com/algolia/react-instantsearch/blob/master/stories/Menu.stories.js |
ok so |
ok, current progress... Instead of class EventsFilter extends Component {
render() {
console.log(this);
return (<Text>EventsFilter</Text>);
}
}
const ConnectedEventsFilter = connectRefinementList(EventsFilter); Pro points:
Con points:
I feel like I am missing something here (or, more accurately, several pages from the documentation are missing! ;) ). I quite literally stumbled on this approach by finding this issue: Problem is, they are doing this: // Modal Content
import CurrentRefinements from './currentrefinements';
import CategoryFilter from './categoryfilter';
import SizeFilter from './sizefilter';
import ApplyFilter from './applyfilter';
// Pass Components to Algolia Connectors
const ConnectedHits = connectInfiniteHits(Hits);
const ConnectedCurrentRefinements = connectCurrentRefinements(CurrentRefinements);
const ConnectedCategoryFilter = connectHierarchicalMenu(CategoryFilter);
const ConnectedSizeFilter = connectRefinementList(SizeFilter);
const ConnectedApplyFilter= connectStats(ApplyFilter); But I have no idea what is in IF this is the approach to take, what is the point of all those components and widgets?! |
Seems to indicate that something is using non-react elements (https://stackoverflow.com/a/38238220/224707)... It looks like using one of the provided components does not use React Native elements... So does this mean we cannot use the provided widgets? |
Ok so THIS lets me render a facet out using Native Base CheckBox's...
But my problem now is trying to get it into a Drawer...
However, this throws errors due to the If I invert those wrappers (so Drawer is inside the InstantSearch), then the Drawer is not rendered properly. |
HI @njt1982, Thank you for all this feedback. Actually we do not provide react native widgets yet, so you can only use connectors. It means that you need to implement your own Here are some guides:
We are currently working on a getting started guide dedicated to React Native. It's not ready yet, but you can find the an in progress example of a complete react native application here to see those concepts in action: https://github.com/algolia/react-instantsearch/tree/docs/improve-react-native-example/packages/react-instantsearch/examples/react-native |
Thanks @mthuret - the way I got around the nesting problem (at 1.30am last night!) was to add this to one of my elements inside InstantSearch
This is a custom component like this:
I'm 99.9% sure this is a hack and not the "React Way". But it works ;) Or at least seems to so far... I'm intrigued by the multiple InstantSearch wrappers approach and syncing the state between them, although tbh I think that feels like just as much of a hack solution as passing the context out of a nested stack and into a different sub-stack via properties and wrapper 😆 (and I mean "hack" in terms of "not a nice solution" as opposed to anything offensive). I VERY nearly got the Drawer working inside the InstantSearch. The problem was the Hits section. If I manually rendered a List with some ListItems and Text (to fake some results), it all worked fine, but as soon as I put those fake results (or real results) inside a connected Hit component, they just wouldn't render and the Drawer stopped functioning properly. |
You should definitely not pass any context as props as its internal and can be changed but use another In the example I gave you you'll find how we sync the I'm not sure to get what happen when using the |
No errors, no - but it just didn't render the hits (a white area). I think it WAS rendering them somewhere, but the layout was all wrong. And the draw came in from the side as a 10px high bar and there was no grey overlay (or underlay?!). If I removed the hits, it all rendered fine (but obviously without any result set!). I messed around with all the flex stuff for hours, no luck. I'll have a look at your examples. Thanks. |
Let me know how it goes. If you're still stuck maybe sharing a repo with the issue could be easier :) |
@mthuret Thank you for the tips! Passing the searchState around has simplified things a lot. Fewer wrappers ;) Hopefully, if anyone else hits this issue before it's been documented properly, they'll find this thread ;) However, I'm still not 100% sold on having to configure an InstantSearch in multiple places. It seems to mean "duplicating" settings like |
You can have a configuration file with those in order to not repeat them everywhere :) |
@mthuret the issue I have now is that I can search in the SearchBox and I can refine from my Drawer (and these refinements apply to the Hits)... However the query from the SearchBox is not being passed to the Refinements. I can see it's being propagated via state.searchState to the Drawer, am I also meant to pass that state into the connectedRefinementList's? |
@njt1982: I'm pretty sure you miss the virtual SearchBox under the |
I'm closing this, feel free to reopen it @njt1982 if you still have issues. |
I'm trying to implement the
Menu
(https://community.algolia.com/react-instantsearch/widgets/Menu.html) on my app but getting a JS error about the element type being invalid (got undefined, likely forgot to export your component).This all works fine if I remote
Menu
.I'm clearly doing something wrong, but I cannot find any documentation about using a Menu facet/filter on react native. They all seem to import from the "dom" side of things, which doesn't work on native (or at least doesn't seem to). Ideally this Menu will eventually live under the
FacetSidebar
view.Any ideas?
The text was updated successfully, but these errors were encountered: