feat(react-native): Add ability to filter story list from React-Native

[estevaolucas]

Issue: N/A

What I did

1. Add the feature of filtering the story list from React-Native.
2. Wrap storybook view with KeyboardAvoidingView to make the story list present the whole list while the filter bar is open. (Basically doing this PR fix(react-native): prevent the Navigation bar to stay underneath the keyboard #4710, but adding an option, shouldDisableKeyboardAvoidingView, to disable this KeyboardAvoidingView, preventing the problem with nested KeyboardAvoidingView)
3. Remove KeyboardAvoidingView from OnDeviceUI/addons/wrapper.js. Looks like it's not working, as expected, and know with KeyboardAvoidingView as Storybook wrapper, it's no longer needed;
4. Close keyboard when moves from story list or addons view to the preview.

How to test

• Is this testable with Jest or Chromatic screenshots? N
• Does this need a new example in the kitchen sink apps? N
• Does this need an update to the documentation? Y

If your answer is yes to any of these, please make sure to include it in your PR.

[codecov]

Codecov Report

Merging #4806 into next will decrease coverage by 0.08%.
The diff coverage is 0%.

@@            Coverage Diff             @@
##             next    #4806      +/-   ##
==========================================
- Coverage   35.53%   35.45%   -0.09%     
==========================================
  Files         560      560              
  Lines        6829     6845      +16     
  Branches      916      919       +3     
==========================================
  Hits         2427     2427              
- Misses       3921     3934      +13     
- Partials      481      484       +3

Impacted Files	Coverage Δ
app/react-native/src/preview/index.js	0% <ø> (ø)	⬆️
...-native/src/preview/components/OnDeviceUI/index.js	0% <0%> (ø)	⬆️
...tive/src/preview/components/StoryListView/index.js	0% <0%> (ø)	⬆️
...rc/preview/components/OnDeviceUI/addons/wrapper.js	0% <0%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3b45a59...d0d0eba. Read the comment docs.

[Gongreg]

Hey @elucaswork, great job!. Did you test it with android? Both landscape and portrait? Does switching between them with keyboard open works correctly? :)

This is a great new feature. Moving forward we want to try to do a POC of displaying story list as webview, maybe that would allow us to reuse the code from the web part. It would also give us an option for collapsable story list.

[Gongreg]

Maybe lets not use fragment yet? They are only added in React 16.2. It will break backwards compatibility.

[estevaolucas]

oh, sure. done._

[Gongreg]

Since you've been contributing a lot lately, I've added you @elucaswork to the Storybook team! Welcome :)

[estevaolucas]

Hey @elucaswork, great job!. Did you test it with android? Both landscape and portrait? Does switching between them with keyboard open works correctly? :)

Thanks!.
Yep, tested it on both Android and iOS with landscape and portrait mode. Working fine for me.

This is a great new feature. Moving forward we want to try to do a POC of displaying story list as webview, maybe that would allow us to reuse the code from the web part. It would also give us an option for collapsable story list.

i see. let me know if I can help, somehow.

Since you've been contributing a lot lately, I've added you @elucaswork to the Storybook team! Welcome :)

awesome 🎉

[Gongreg]

Lets see how it will do :)

Regarding webview for story list we have to wait till @ndelangen finishes working on refactoring of it so we could use it too.

The idea would be to create a mini bundle with code necessary to run the sidebar, then load it in a page and use postmessages to communicate between webview and react native part.

[Gongreg]

#3905 is the issue about it.