We need to set -warn-error in the bucklescript flags. Additionally we might consider adding @A which turns on all warnings and makes them errors.

In React Native it's a common practice to do style={{ marginTop: 'auto'}} so in a flex view an element will "eat" all the remaining space but we can't do this in StyleRe directly with the marginTop as it expects a float.
I think that for now we could do Style.(style [stringStyle("marginTop", "auto")]).

If you guys agree on this I can sent the PR for this.

OK, this is far fetched but I imagine that we could somehow integrate our on boarding experience with Expo Snack or live preview akin React Native tutorial. It would be awesome if people could simply try this out live. What irks me about getting started guides nowadays is that they usually start with

1. go download this
2. go install that
3. when you have a problem (AND YOU'RE DEFINITELY GOING TO HAVE ONE) browse issues in our repo

Ideally the sections in the on boarding guide would consist of interactive snippets. An awesome twist would be if we could somehow integrate merlin like functionality so that after a user hovers a symbol (module, function, type) a tooltip appears with a reference to it in the documentation.

Currently some of our APIs use suffix based convention (e.g. diffClampPct and diffClamp) . Others use polymorphic variants. e.g. here:

  let interpolate:
    t =>
    inputRange::list float =>
    outputRange::[< | `float (list float) | `string (list string)] =>
    ...

It would be great to somehow standardise the naming convention and probably write it down somewhere.

I have created a react native app skeleton with create-react-native-app and followed the instructions of the bs-react-native Readme to set up the reason toolchain.
When I execute yarn watch for the first time the compilation of 2 components fails with:

FAILED: src/components/viewRe.cmi
[...]
File "/Users/kliron/Projects/my_app/node_modules/bs-react-native/src/components/viewRe.rei", line 44, characters 4-75:
Error: The type constructor ReasonReact.component expects 3 argument(s),
but is here applied to 2 argument(s)

I get the same error for modalRe.rei

In the second bullet of the Update Guide, node_modules/bs-react-native/update_scripts/styles_v1_to_v2 should be changed to node_modules/bs-react-native/upgrade_scripts/styles_v1_to_v2. The former path is invalid.

Style.combine doesn't work. It simply leaves an empty object.

There are multiple functions which convert between JS objects and records in the codebase. Thanks to the new feature they can be removed.

WIP

Hi,

I was going through the tutorial provided on the repo's front page,
The react-native part works fine for my source files, however, when it comes to creating the bucklescript specific files, the yarn run watch (and build) fail with the error message that the bsconfig.json has invalid format. I have tried copying the source provided as is too, however, same error.

Is bsb workflow supported on Windows ?
I am attaching the snip of bsconfig and cmd output for quick reference below ( please correct me if you would rather prefer that I post it to stack overflow)

What is the recommended navigation strategy when using bs-react-native?

The JS code generated by Pct(100.) is actually working in react-native projects, but not when used in a browser, via react-native-web (browsers don't like the "100.%").
We should adjust this behavior (as discussed on Discord with @wokalski)

Same pros/cons will work for both.

https://yarnpkg.com/lang/en/docs/yarn-lock/#toc-check-into-source-control

https://yarnpkg.com/blog/2016/11/24/lockfiles-for-all/

I would go for yarn as it's the think we find the most in the entire fb/react ecosystem.

Hi,

It seems like the README assumes that the person already has a react native project.

Is this the case? If so, that should be made explicit.

(Sorry if I am misunderstanding the directions or missed the relevant section of the README).

Apologies for opening an issue for a question, but either I've misunderstood how to do things (likely) or this can be resolved with a PR 🙃

How come there's no public interface for Props? Specifically: I have a function that uses PanResponder.panHandlers and thus returns the Props.touchResponderHandlers type. It works fine, but it seems like I can't define a signature for the module in which said function lives without access to this type: is there a reason why it's not exposed and/or a way in which I can define the signature without having direct access to the type?

Does bs-react-native still target react-native ^0.46? What about reason-react 0.2.4?

After the update to 0.5.0 I was able to update reason-react to ^0.3.0 with no issues, but I get peerDependencies warnings from npm now about my react-native and reason-react versions.

(I updated reason-react-native-scripts anyways, but warned in README that you will get a peerDependencies warning)

One example would be ImageRe.Image.imageSource. Every component which would support images would need this type. This also doesn't only affect the RN core components but also third party components.
I ran in a similar issue as I ported react-native-vector-icons since there you create a component which extends Text, so you would need to copy all the stuff from TextRe to bind it properly.

WIP

I got this error:

Unable to resolve reason-react/lib/js/src/reasonReact.js" from ".//lib/js/re/app.js"

Which I worked around by changing:

var ReasonReact = require("reason-react/lib/js/src/reasonReact.js");

Into

var ReasonReact = require("reason-react/lib/js/src/ReasonReact.js");

I guess I'll fix this with make by running a sed command over all generated files, it'd be better if this was solved correctly though.

There's TypesRN.insets type but it's not used consistently in the codebase. ScrollView and WebView use their own contentInsets types.

Developing an OSS project is not too sustainable without some kind of Continuous Integration. I'm not sure how to approach it because FFI by definition is hard to test. Maybe some integration tests using the UI Explorer app?

Hello,

I'm using a WebView in this line
<WebView source=(WebView.source(~uri=url, ())) startInLoadingState=true />
and I got an RN yellow box saying there's a failed prop type, it expected a boolean but got a number. I'm assuming ReasonML just placed a 1 instead of true in this compilation result.

https://github.com/reasonml-community/bs-react-native/blob/master/src/components/webView.re#L121

Also, when trying to replace the ReasonML, true with Js.true_, the compiler says it expects a bool and not a Js.boolean. After reading some code in bs-react-native, I can foresee this bool-JS.boolean translation being a problem in a lot of the props-mapping that's done here.

The prop ends up working as expected, because 1 is truthy in JS, but if booleans were properly converted that would reduce a lot of friction for those new to writing bs-react-native projects.

Thanks for taking the time to acknowledge this issue!

-- Juwan

When contributors show up, probably mostly from the JS community they are going to need some advice.

1. References to langauge manual (and probably RWO)
2. References to Buckelscript manual
3. Where to start (we probably will need something like good first issue)
4. Naming conventions
5. Development workflow (from my contributing experience this is particularly important to address)
6. Where to document stuff

The APIs are getting more and more different from the JS version. It'd be great to have some format of documentation. What are the best options? ocamldoc?

cc @chenglou @jordwalke

I'm working on building a set of universal components using react-native-web. The RNW components' APIs are nearly identical to their react-native counterparts, but there are a few cases where they accept additional web-only props. For instance: many of them support an accessibilityRole, which helps inform the library which DOM node to use under the covers and provides aria-role.

What are your thoughts on adding support for these RNW props here so that we can use these bindings for universal components? If you're open to the idea, I'd be happy to help contribute the needed updates.

Thanks!

WIP

Not sure if this is bs-react-native issue or bucklescript core (or perhaps ReasonReact) issue; starting here first.

Three times today I ran through the "Getting Started" script from the README file.

Each time I ended up getting the following error in Expo after creating the basic app.re and editing, at step 7, ./App.js (in my case it's App.js that is created by create-react-native-app; the README instructions as written currently are to edit index.ios.js / index.android.js, which I don't think the vanilla create-react-native-app creates, but I digress) to use the Bucklescript generated app.js in /lib/js/re/app.js.

The error after was
(in Expo): Unable to resolve module 'reason-react/lib/js/src/reasonReact.js' from '<...path to my app>/lib/js/re/app.js': Module does not exist in the module map

For a bit I thought this error might have something to do with issue #82 in part as I'm seeing Duplicated package: reason-react in my builds.

That said, while looking through still more I noticed that the naming in ./node_modules/reason-react/lib/js/src/ReasonReact.js -- i.e., capital "R".

As context, here's what BuckleScript generated from re/app.re into the top of /lib/js/re/app.js:

var Curry       = require("bs-platform/lib/js/curry.js");
var TextRe      = require("bs-react-native/lib/js/src/components/textRe.js");
var StyleRe     = require("bs-react-native/lib/js/src/styleRe.js");
var ReactNative = require("bs-react-native/lib/js/src/reactNative.js");
var ReasonReact = require("reason-react/lib/js/src/reasonReact.js");

I checked the other files referenced in these require statements and they are all named in the file system with their first letter as lower case (e.g., reactNative.js) - i.e., camel case.

Sure enough by either renaming the ReasonReact file itself to reasonReact.js ("ReasonReact.js" --> "reasonReact.js") or manually editing the Bucklescript generated require statements the opposite way, ("reasonReact.js" -> "ReasonReact.js"), it works -- my app displays and works correctly in Expo and I am off and running.

Any idea where this inconsistency of naming could be coming from? For now I'm just manually editing the generated file after each BS compile but that's a pain.

As context, I'm on node v8.9.1 (npm v5.5.1), though had same problem with node 6.11.4.

OCaml version is 4.02.3.

Bucklescript 2.1.0

I've included some photos including from my package.json.

Opening an issue as I did this 3x, very vanilla, no going off the reservation and right to the script on the README, and ended up in the same exact spot each time.

We should cut a proper release.
Here is my list of things which should be done before:

• Fix TabBarIOS and TabBarIOSItem. That's my fault, I was sloppy at the review. TabBarIOSItem should ne a submodule of TabBarIOS. Also both actually extend the props of View but this wasn't considered.
• add a .npmignore
• go trough the package.json and see whether all fields are properly set

Now that Bucklescript supports themes / templates, we should pitch one for React Native :)

It looks like hot module reloading doesn't work currently.

See discussion in the PR #10

Still not completely happy with the current approach, but better as the initial one. This issue is here to remind us on revisiting the API.

From our (mine and @wokalski) its not sufficient to just write the bindings and you are done. We need a proper test enviroment. Therefore I would propose to integrate https://github.com/saschatimme/reason-ui-explorer in our repo.

Now that namespaces landed, we should enable it :)

margin and width (as example) support float and some strings or other values (eg: percentage are supported by yoga engine for width/height).
I am still new to reason but would like to improve the situation. Any pointers on where to start?

In the documentation of react-native, onEndReached is of type (info: {distanceFromEnd: number}) => void but in flatList.rei and sectionList.rei the type is {. "distanceFromEnd": float}.

Shouldn't it be {. "distanceFromEnd": float} => unit instead ?

Here is a repo that isolates the problem: https://github.com/gilbert/rn-reason-bug

I'm attempting to animate a css top value. In my code I have something like the following:

let logoStyle = (offset) => Style.style([
  Style.top( Animated(offset) )
]);

However, this causes a very strange runtime error:

TypeError: Attempted to assign to readonly property.
...
node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js:279:9 in stopTracking
...

The Style.top is definitely causing it; if you replace it with Style.top( Pt(200.0) ) instead, then everything is ok (but no animation, obviously).

Is top not able to be animated? Thanks.

Shouldn't reason-react be specified as a peer dependency instead of dependency of this project.

We've encountered bugs in our project where multiple projects where depending on bs-json and when pattern matching on errors that the project throws when decoding errors occur.

Seems as though SectionList is passed a Js.t {. section: section 'a }, though in javascript we're passed Js.t {. section: jsSection 'a }.

This means that accessing the key of a section is undefined:

renderSectionHeader=(
  fun js => {
    /* js.section is an object so `key` is accessed by: */
    let sec = js##section;
    let key = sec##key; /* but this is a type error; sec is of type section 'a in reason */
  }
)

It seems to me that in WebView.rei, we should change option(t) to Js.nullable(t)

~onNavigationStateChange: {
  .
  "url": option(string),
  "title": option(string),
  "loading": option(bool),
  "canGoBack": option(bool),
  "canGoForward": option(bool)
} => unit

to

~onNavigationStateChange: {
  .
  "url": Js.nullable(string),
  "title": Js.nullable(string),
  "loading": Js.nullable(bool),
  "canGoBack": Js.nullable(bool),
  "canGoForward": Js.nullable(bool)
} => unit

Indeed no conversion is done in WebView.re

WIP

Should these two yield equivalent styles?

Style.(flatten([|style([backgroundColor("blue")]), style([fontSize(Float(32.))])|]))

and

Style.(combine(style([backgroundColor("blue")]), style([fontSize(Float(32.))])))

The second one loses fontSize.

Animated is pretty hard to type correctly because it uses mad dynamic js. The problem with it is that in the current version of bindings event is a completely generic function and you don't get any assist from the compiler when working with it. It's a problematic one because event returns a function which takes varargs. What we should be looking at when solving this issue is not necessarily resembling the existing Animated API but rather making it work in the context of these bindings.

Is Easing bindings being worked on by anyone? If not, I'd be willing to contribute if you point me in the right direction.

Style.combine behaves differently than Style.concat. I didn't investigate it yet but it looks like it doesn't combine the styles at all.

I think this is the library where it issue is, but using this with react-native-web results in a lot of react warnings. I'm assuming its because there may be some defaults being passed to the underlying View implementation that warns on react-native-web?

Here is a gist: https://gist.github.com/desmond-dsouza/5bfb5f6f1d17fcd65bb7f54b8dccabbe#file-gistfile1-txt-L68
Line 68 uses [%bs.raw to correctly access

s##section##key

on a Js runtime object s (representing a section as passed to the renderSectionHeader callback) that looks like:

s = {"section":  {"data": ..., "key": "Section A"} }

However, the bindings (not sure where specifically) lead Reason to type-error on:

s##section##key

and instead insist on:

(s##section).key

which of course is undefined on that run-time value.

I'm always getting this no matter what I do
re/root.re

My re/types/Router.re

external router : ReasonReact.reactClass = "Router" [@@bs.module "react-native-router-flux"];

let make _ children =>
  ReasonReact.wrapJsForReason reactClass::router props::(Js.Obj.empty()) children;

my re/root.re

open ReactNative;

let component = ReasonReact.statelessComponent "Root";

let make _ _children => {
  ...component,
  render: fun _self => {
    <Router>
      <Stack name="root">
        <Scene name="login" title="Login" component=Login.jsComponent />
      </Stack>
    </Router>
  }
};

/* Export it */
let default = ReasonReact.wrapReasonForJs ::component (fun _props => make () [||]);

my package.json

{
	"name": "ZaWarudo",
	"version": "0.0.1",
	"private": true,
	"scripts": {
		"build": "bsb -make-world -clean-world",
		"watch": "bsb -make-world -clean-world -w",
		"start": "node node_modules/react-native/local-cli/cli.js start",
		"test": "jest"
	},
	"dependencies": {
		"apollo-client": "^1.9.2",
		"bs-platform": "^1.9.1",
		"bs-react-native": "^0.2.0",
		"formik": "^0.8.9",
		"graphql-tag": "^2.4.2",
		"immutable": "^3.8.1",
		"lodash": "^4.17.4",
		"prop-types": "^15.5.10",
		"react": "16.0.0-alpha.12",
		"react-native": "^0.48.2",
		"react-native-datepicker": "^1.6.0",
		"react-native-i18n": "^2.0.6",
		"react-native-router-flux": "^4.0.0-beta.21",
		"react-native-slider": "^0.11.0",
		"reason-react": "^0.2.3",
		"recompose": "^0.25.0",
		"redux": "^3.7.2",
		"redux-offline": "^2.0.0",
		"styled-components": "^2.1.2",
		"styled-native-polished": "^2.1.0",
		"yup": "^0.22.0"
	},
	"devDependencies": {
		"babel-jest": "^21.0.2",
		"babel-preset-react-native": "^3.0.2",
		"flow-bin": "^0.54.1",
		"jest": "^21.0.2",
		"react-test-renderer": "16.0.0-alpha.12"
	},
	"jest": {
		"preset": "react-native"
	}
}

I'm really a starter on this, so maybe is something really silly I'm missing tho I already looked thousands of examples and they are just like mine

Currently the RNTester app is not tested, since I'm not sure how to setup everything.

Would be appreciated if someone with a little bit travis-ci foo could help out :)

Every nontrivial apps needs to handle navigation somehow. We need to pick one of the libraries available and ideally PR a bsconfig & typings to it. I'm rooting for react-navigation not because it's ideal but because I think they are likely to accept a .bsconfig contribution and it uses Flow.