React-native-navigation: [iOS] Navigation enhancements (e.g. search, refresh controls)

[sejr]

Issue Description

As far as I am able to see, there is no support for either of these features (search, refresh) which were added with large titles in iOS 11. In reality, the large title implementation on react-native-navigation still comes off as very hacky and (at least for me) unusable. Some things I am thinking about:

• Behavior of drawUnderNavBar is "conceptually" correct, but that isn't really good enough. For example, if you use RN's FlatList along with rnn, the first item or so will usually be hidden behind the navbar. In order to really look correct, we need to add the appropriate amount of padding to the top of the first element (or the FlatList itself). This isn't really a largeTitles issue but becomes more prevalent when they are used.

• The animation of scrolling between large titles and regular titles needs some work. It seems like this is a JavaScript hack and not an actual NavigationController with prefersLargeTitles set to true -- is that correct? Regardless, I would want to investigate and see how we can improve this.

• As the title of this issue says, I would love to see support for native search and refresh controls added to the navbar. We could simply bind events for when the refresh control is fired and when the search input changes; perhaps provide a 'default' search results container that appears when searching begins.

I am really liking this library so far -- thank you all for your hard work. I would really love to help resolve some of these issues myself, so I'd be interested in hearing from you all what the best approach would be.

Thanks!

Steps to Reproduce / Code Snippets / Screenshots

Create a react-native-navigation application and try to use the large titles on iOS.

---

Environment

• React Native Navigation version: @latest
• React Native version: Latest (w/ create-react-native-app)
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone X device

[sejr]

An example of an object, navigationOptions, that could be passed to a Screen component:

static navigationOptions: {
  refreshControl: {
    color: 'red', // Defaults to gray
    accessibilityLabel: 'Pull to refresh',
    onRefresh: () => { setTimeout(() => { alert('Refresh is done!') },  2000 }
  },
  searchControl: {
    placeholder: 'Search this app', // Defaults to 'Search'
    resultsScreen: SomeScreenClass // Props updated as results change?
  },
}

[sejr]

Welp...I was using the wrong version of RNN. But I don't think the refresh control is implemented in v2, and would still make a good addition.

[guyca]

Hey Sam, Is the refresh controller provided by RN not good enough?

[bdrobinson]

@guyca I may be incorrect, but I think what @sejr is after is for the refresh controller to appear inside the nav bar itself, as demonstrated here. This isn't possible with RNN V1 or V2 is it?