How To Write React Native Component Binding?

1

I am using ReScript React Native and I want to use this:

I how to write normal bindings (like interoping with library APIs), but I have no idea how I would write a binding for a React component. How would I do that? I’m not asking to be spoonfed the correct code. I would just like some type of example or guide. Thanks.

2

Like this:

@react.component @module("react-native-dropdown-picker")
external make: ( 
  ~firstProp: ReactEvent.Mouse.t => unit=?,
  ~secondProp: string=?,
  ~thirdProp: int=?,
) => React.element = "default"
1 Like
3

Thanks, but how would it know the tag? In the docs, it says to use <DropDownPicker>, but I don’t know how ReScript would know that.

4

Also, when I try to build it with the deps, it errors. I installed it using the npm install command.

Error: /home/user/projects/rescript-app/TestApp/node_modules/react-native-dropdown-picker/bsconfig.json: No such file or directory```
5

In this case, it is a default export and hence needs no qualified name. You just put this binding in a file named DropDownPicker.res and use it anywhere else.

let renderPicker = () => <DropDownPicker />

If you want to bind something from a library with named components, you do it like so:

// ExampleNpmLibrary.res 
module ExampleLibraryComponent = {
  @react.component @module("example-npm-library")
  external make: ( 
    ~firstProp: ReactEvent.Mouse.t => unit=?,
    ~secondProp: string=?,
    ~thirdProp: int=?,
  ) => React.element = "ExampleLibraryComponent"
}

module OtherExampleLibraryComponent = {
  @react.component @module("example-npm-library")
  external make: ( 
    ~firstProp: ReactEvent.Mouse.t => unit=?,
    ~secondProp: string=?,
    ~thirdProp: int=?,
  ) => React.element = "OtherExampleLibraryComponent"
}

and then use them like that:

let render = () => <>
  <ExampleNpmLibrary.ExampleLibraryComponent secondProp="abc" />
  <ExampleNpmLibrary.OtherExampleLibraryComponent secondProp="abc" />
</>

or more readable

open ExampleNpmLibrary

let render = () => <>
  <ExampleLibraryComponent secondProp="abc" />
  <OtherExampleLibraryComponent secondProp="abc" />
</>

Not sure what is going on with your build, though.

1 Like
6

Ok, I got it to work. How do I modify state values?

In the dropdown picker, I have to change open to true, but I don’t know how I would do that using Rescript. It seems like they used setState.

7

There are some examples here:

1 Like