how does one use the `selectionState` prop of react-native's TextInput?

Question

I'm building a react-native app. I've got a <TextInput>, and when something occurs I wish to cause the <TextInput> to become focused. The only documented methods on <TextInput> instances are .isFocused() and .clear() -- neither seems like what I'm looking for. I obviously want .focus().

I've found this iOS-only selectedState prop that appears to offer what I'm looking for. The docs say:

iOS selectionState DocumentSelectionState

An instance of DocumentSelectionState, this is some state that is responsible for maintaining selection information for a document.

Some functionality that can be performed with this instance is:

• blur()
• focus()
• update()

You can reference DocumentSelectionState in vendor/document/selection/DocumentSelectionState.js

It's not clear to me how one would wield this prop, and I haven't found any examples online. The lengthy sample code posted on the doc page doesn't use it.

Can someone show me what this might look like? This is my best guess:

import React, {
    Component
} from 'react';
import {
    // the "DocumentSelectionState.js" file mentioned in the docs
    // lives inside react-native, so hopefully it's exported 
    DocumentSelectionState,
    TextInput,
    TouchableHighlight,
    View
} from 'react-native';
import Styles from './style';

export default class Scene extends Component {

    constructor(props) {
        super(props);

        // get my hands on "An instance of DocumentSelectionState"
        // which I can pass to the TextInput, and whose .focus()
        // method I can call
        this.text1DSS = new DocumentSelectionState();
    }

    render() {
        return (
            <View style={Styles.CONTAINER}>


                <TextInput style={Styles.TEXT_INPUT_1}
                    // provide my own instance of DocumentSelectionState
                    // to the TextInput instead of whatever is the
                    // default source
                    selectionState={this.text1DSS}
                />


                <TouchableHighlight style={Styles.BUTTON_FOR_FOCUSING_INPUT}
                    onPress={this.onPressButton}
                >
                    <View>
                        <Text>click me to focus textinput</Text>
                    </View>
                </TouchableHighlight>

            </View>
        );
    }

    onPressButton = (event) => {
        // whenever I want to, I can invoke .focus() on the DSS
        // that's linked to the TextInput
        this.text1DSS.focus();
    };

}

Unfortunately, that code won't run:

undefined is not a constructor (evaluating 'new _reactNative.DocumentSelectionState()')

I take this to mean that react-native doesn't export a DocumentSelectionState member (or at least my version doesn't: 0.23, which still documents the prop).

I haven't been able to figure out how to gain access to DocumentSelectionState within a vanilla RN setup, so I can't really test my theory.

Has anyone out there worked with this thing?

Answer 1

The only way I have been able to access the .focus() method is through the this.refs

Your code would look something like:

import React, { Component } from 'react';
import { TextInput, TouchableHighlight, View } from 'react-native';
import Styles from './style';

export default class Scene extends Component {


    render() {
         return (
            <View style={Styles.CONTAINER}>


                <TextInput 
                     style={Styles.TEXT_INPUT_1}
                     ref={'input'}
                />


                <TouchableHighlight style={Styles.BUTTON_FOR_FOCUSING_INPUT}
                    onPress={this.onPressButton}
                >
                    <View>
                        <Text>click me to focus textinput</Text>
                    </View>
                </TouchableHighlight>

            </View>
        );
    }

    onPressButton = (event) => {
        this.refs.input.focus()
    };

}

Hope that helps