Partent calls child ref

app.re

open ReactNative;

open Style;

type state = {
  expression: option string,
  keyboardRef: option ReasonReact.reactRef
};

let updateExpression (changeEvent: Keyboard.changeEvent) self =>
  ReasonReact.Update {...self.ReasonReact.state, expression: Some changeEvent.tex};

let updateRef ref_ self =>
  ReasonReact.SilentUpdate {...self.ReasonReact.state, keyboardRef: Js.Null.to_opt ref_};

let moveCursor id self =>
  switch self.ReasonReact.state.keyboardRef {
  | Some keyboardRef => Keyboard.go_to ::id ref::keyboardRef
  | None => ()
  };

let component = ReasonReact.statefulComponent "App";

let make () _ => {
  ...component,
  initialState: fun () => {expression: None, keyboardRef: None},
  render: fun self =>
    <View style=(style [backgroundColor "white", flex 1., marginTop 20.])>
      <View style=(style [flex 1.])>
        (
          switch self.state.expression {
          | Some expression => <Katex expression onPress=(self.handle moveCursor) />
          | None => <Text> (ReasonReact.stringToElement "Enter something") </Text>
          }
        )
      </View>
      <Keyboard ref=(self.update updateRef) onChange=(self.update updateExpression) />
    </View>
};

let jsPropsToReason _jsProps => make () [||];

let reactClass = ReasonReact.wrapReasonForJs ::component jsPropsToReason;

keyboard.re

open ReactNative;

type key = Core_input.key;

let layout m =>
  Core_input.(
    [|
      (Del, Prev, Next, Number 0, Plus),
      (Del, Number 7, Number 8, Number 9, Minus),
      (Vector m, Number 4, Number 5, Number 6, Mult),
      (Vector m, Number 1, Number 2, Number 3, Div),
      (LBrace, RBrace, Number 0, Dot, Equals)
    |]
  );

let styles =
  StyleSheet.create
    Style.(
      {
        "wrapper": style [height 216., widthPct 100., backgroundColor "#eee"],
        "row": style [flexDirection `row, alignItems `center, height (216. /. 5.)],
        "key": style [flex 1., flexBasis 0.]
      }
    );

let keyToElement (key: key) => {
  let s value => <Text style=Style.(style [textAlign `center]) value />;
  switch key {
  | Del => s "Del"
  | Prev => s "<-"
  | Next => s "->"
  /*| Matrix => s "M"*/
  | Vector m => s ("V" ^ string_of_int m)
  | LBrace => s "("
  | RBrace => s ")"
  | Mult => s {j|•|j}
  | Div => s "/"
  | Plus => s "+"
  | Minus => s "-"
  | Dot => s "."
  | Number n => s (string_of_int n)
  | Equals => s "="
  }
};

let key onPress key =>
  <View style=styles##key>
    <TouchableOpacity onPress=(fun () => onPress key)>
      <View
        style=Style.(
                style [widthPct 100., heightPct 100., justifyContent `center, alignItems `center]
              )>
        (keyToElement key)
      </View>
    </TouchableOpacity>
  </View>;

type changeEvent = {tex: string};

type state = {
  rows: int,
  input: Core_input.input
};

let renderRow onPress index (a, b, c, d, e) =>
  <View key={j|row $(index)|j} style=styles##row>
    (key onPress a)
    (key onPress b)
    (key onPress c)
    (key onPress d)
    (key onPress e)
  </View>;

let handleKeyPress key self => {
  let new_input = Core_input.enter key self.ReasonReact.state.input;
  ReasonReact.Update {...self.ReasonReact.state, input: new_input}
};

let input_go_to id self => {
  let new_input = Core_input.go_to ::id self.ReasonReact.state.input;
  ReasonReact.Update {...self.ReasonReact.state, input: new_input}
};

let go_to id::(id: int) ref::(ref: ReasonReact.reactRef) => {
  let jsObj = ReasonReact.refToJsObj ref;
  let self: ReasonReact.self state ReasonReact.noRetainedProps = jsObj##self ();
  let cb = self.ReasonReact.update input_go_to;
  cb id
};

let component = ReasonReact.statefulComponent "Keyboard";

let make onChange::(onChange: changeEvent => unit) _children => {
  ...component,
  initialState: fun () => {rows: 3, input: Core_input.empty ()},
  didUpdate: fun {oldSelf, newSelf} =>
    if (oldSelf.state.input !== newSelf.state.input) {
      onChange {tex: Core_input.to_tex newSelf.state.input}
    },
  render: fun {state, update} =>
    <View style=styles##wrapper>
      (
        Array.mapi (renderRow (update handleKeyPress)) (layout state.rows) |> ReasonReact.arrayToElement
      )
    </View>
};