rescript-react-native / rescript-react-navigation

ReScript bindings for React Navigation
MIT License
74 stars 28 forks source link

Add route params to Drawer screen component props #26

Closed DCKT closed 4 years ago

DCKT commented 4 years ago

Hello,

It looks like you can access to params from a drawer too

idkjs commented 4 years ago

Hi @DCKT! Do you have an example that you are running this against that I can look at?

DCKT commented 4 years ago

Hello @idkjs

I can't link you the repo but here is some code :

I have a generic view to display pdf file

module AuthenticatedDrawer = {
  module M = {
    type params = {
      url: string,
      filename: string,
    };
  };
  include Drawer.Make(M);
};

The declaration of my navigator :

<Navigator
      drawerWidth={() => 280.}
      drawerContent={props => <DrawerContent navigation=props##navigation />}>
      <Screen name="Deliveries" component=DeliveriesStack.make />
      <Screen name="PdfViewer" component=PdfViewerScreen.make />
</Navigator>;

The PdfViewerScreen :

[@react.component]
let make =
    (
      ~navigation,
      ~route:
         ReactNavigation.Core.route(Navigators.AuthenticatedDrawer.M.params),
    ) => {
  let url = route.params->Option.map(p => p.url)->Option.getWithDefault("");
  let filename =
    route.params->Option.map(p => p.filename)->Option.getWithDefault("");

  <>
    <Paper.Appbar.Header dark=true>
      <Paper.Appbar.BackAction
        onPress={Navigators.RootStack.Navigation.goBack(navigation)}
      />
      <Paper.Appbar.Content title={filename->React.string} />
    </Paper.Appbar.Header>
    <ReactNativeViewPdf
      fadeInDuration=250.0
      style=styles##root
      resource=url
      resourceType=`url
      onError={_err => {
        [%log.error "onError viewPDF"; ("error", _err)];
        ();
      }}
    />
  </>;
};
MoOx commented 4 years ago

I landed all separate relevant commit into master. Try to make separate PR next time :D