[Blur & Focus] Support relinquishing focus from multiple views via container

[ide]

If you have two text inputs in a container view, calling container.blur() could make both of the text inputs try to resign their first responder status. In UIKit this is built-in as -[UIView endEditing:animated]. This way you can just blur the root view if you want the keyboard to go away.

[vjeux]

I'm not sure I understand. You can do .blur() on Text ref right now. Do you want to do blur() on an arbitrary View?

[ide]

Yeah, it blurs any descendant that has focus. The descendant could be a TextInput but could also be any other kind of input element that can become the first responder.

[vjeux]

You can actually call blur() on a View today. See NativeMethodMixin::blur. Can you tell me if it's doing what you want?

[brentvatne]

ping @ide

[ide]

Confirmed that this.refs.parentView.blur does not blur its child views. Where this would be handy is in the navigator stack where a scene will lose focus without being unmounted, and you want to make sure to blur all of its text fields. So instead of

this.refs.textInput1.blur();
this.refs.textInput2.blur();
this.refs.textInput3.blur();

you want to write

this.refs.container.blur();

[brentvatne]

This does seem like it would be useful! Another issue came up (referenced above) where this would solve the problem. cc @ide @vjeux

[dhrrgn]

@brentvatne I came up with a simple solution for this internally where I wrote a component that essentially just extends UIView and blurs all of the subviews on touch. Here is the guts of it:

@implementation KBCloserView

- (void)didMoveToSuperview
{
    self.userInteractionEnabled = TRUE;
    [super didMoveToSuperview];
}

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    for (UIView *subview in self.subviews) {
        [subview endEditing:YES];
    }
}

@end

So I just convert my container View's to <KBCloserView> components, and 💥 tap anywhere in the view to close the keyboard.

I share this because I think adding a closeKeyboardOnPress type property to the RN View component, which just does the above, would be simple and solve this problem entirely without having to go through the effort of changing how blur works (I personally like that it only blurs the specific input).

[brentvatne]

Nice on @dhrrgn! Seems simple enough. Might be worth putting into a library on npm until a solution is integrated into core

[dhrrgn]

@brentvatne I will do that tomorrow...right after I figure out how to create an Xcode project people can just add to their's (bit of an Xcode "noob") haha. (Side note: it would be awesome if their was a "Creating Distributable Native Components" section of the docs for this sort of thing).

[brentvatne]

@dhrrgn - I have something about that on my blog: Packaging a React Native component, I hesitated to add it to the docs because it seemed like a temporary solution, but we haven't worked out a better one yet (aside from react-native new-library from within a React Native project, in order to create a skeleton bridge module component - you could do this and just change it up accordingly rather than create a new project from scratch as I mention in my blog post)

[dhrrgn]

@brentvatne Awesome, thanks.