Document method to call on refs
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)} />
</>;
};
@cknitt mentioned focus exists in TextInput: https://github.com/reasonml-community/bs-react-native/blob/41d03e6f6eaf1f460eb45ebdd6fa9165853796fb/reason-react-native/src/components/TextInput.re#L276
So what would be the correct solution here?
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,