Document method to call on refs

[cem2ran]

Bringing this over from Discord as requested by @MoOx. I'm basically not sure if this is the right way to use refs and if the external I've defined in the following example should be exposed in the repo:

open ReactNative;
open ReactNavigation;

// TODO: add to TextInput?
external elementToObj: TextInput.element => Js.t({..}) = "%identity";

[@react.component]
let make = (~navigation: Navigation.t) => {
  open Navigation;
  let (text, onChangeText) = React.useState(() => "Home");
  let ref = React.useRef(Js.Nullable.null);

  React.useEffect0(() => {
    let intervalId =
      Js.Global.setTimeout(
        () =>
          switch (ref->React.Ref.current->Js.Nullable.toOption) {
          | Some(_ref) => _ref->elementToObj##focus()
          | None => ()
          },
        5000,
      );
    Some(() => Js.Global.clearTimeout(intervalId));
  });

  <>
    <TouchableOpacity
      onPress={_ => navigation->Navigation.navigate("PrivacyPolicy")}>
      <Text> {React.string(text)} </Text>
    </TouchableOpacity>
    <TextInput ref onChangeText={text => onChangeText(_ => text)} />
  </>;
};

[cem2ran]

@cknitt mentioned focus exists in TextInput: https://github.com/reasonml-community/bs-react-native/blob/41d03e6f6eaf1f460eb45ebdd6fa9165853796fb/reason-react-native/src/components/TextInput.re#L276

[renanmav]

So what would be the correct solution here?

[MoOx]

We should definitely document most common method to use via ref in the doc.

@cem2ran can you confirm that focus can be done via something like

        textInputRef
        ->React.Ref.current
        ->Js.Nullable.toOption
        ->Option.map(textInput =>
            textInput->TextInput.focus()
          )
        ->ignore,