Conversion functions defined at bottom causes React Native issues

[arnarthor]

I have this code

[@genType]
type config = {tabBarOptions}
and tabBarOptions = {
  activeTintColor: color,
  inactiveTintColor: color,
}
and color = [ | `tomato | `gray];

type t;

[@genType]
type routes = {
  [@genType.as "Friends"]
  friends: ReasonReact.reactClass,
};
[@genType.import "react-navigation"] [@bs.module "./Navigation.gen.js"]
external createBottomTabNavigator: (routes, config) => t = "";

let createBottomTabNavigator = createBottomTabNavigator;

[@genType.import "react-navigation"] [@bs.module "./Navigation.gen.js"]
external createAppContainer:
  t =>
  ReasonReact.component(
    ReasonReact.stateless,
    ReasonReact.noRetainedProps,
    ReasonReact.actionless,
  ) =
  "";

[@genType]
let component =
  createBottomTabNavigator(
    {friends: Friends.jsComponent},
    {
      tabBarOptions: {
        activeTintColor: `tomato,
        inactiveTintColor: `gray,
      },
    },
  )
  ->createAppContainer;

Which produces

/* Untyped file generated by genType. */

import {createBottomTabNavigator as createBottomTabNavigatorNotChecked} from 'react-navigation';

import {createAppContainer as createAppContainerNotChecked} from 'react-navigation';

// In case of type error, check the type of 'createBottomTabNavigator' in 'Navigation.re' and 'react-navigation'.
export const createBottomTabNavigatorTypeChecked = createBottomTabNavigatorNotChecked;

// Export 'createBottomTabNavigator' early to allow circular import from the '.bs.js' file.
export const createBottomTabNavigator = function _(Arg1, Arg2) { const result = createBottomTabNavigatorTypeChecked({Friends:Arg1[0]}, {tabBarOptions:{activeTintColor:$$toJS479407683[Arg2[0][0]], inactiveTintColor:$$toJS479407683[Arg2[0][1]]}}); return result };

// In case of type error, check the type of 'createAppContainer' in 'Navigation.re' and 'react-navigation'.
export const createAppContainerTypeChecked = createAppContainerNotChecked;

// Export 'createAppContainer' early to allow circular import from the '.bs.js' file.
export const createAppContainer = createAppContainerTypeChecked;

const NavigationBS = require('./Navigation.bs');

const $$toJS479407683 = {"322339018": "tomato", "-999567389": "gray"};

export const component = NavigationBS.component;

Which causes this error

Moving the line const $$toJS479407683 = {"322339018": "tomato", "-999567389": "gray"}; above the usage of it fixes the error.

This is a really specific case since it only happens in React Native and not in web but it was still unexpected.

[cristianoc]

Any thought on how it would happen only in React Native?
For technical reasons imports have to be circular (from/to the .bs.js file) and it looks like each tool has a different interpretation of the semantics.

[cristianoc]

Btw the declaration after use is not intentional and will be fixed. When I’m back in a week.

[arnarthor]

The circular dependencies are actually not a problem in React Native, only the decleration after use so getting that fixed should fix the issue. React Native only gives a warning about the circular deps so that's fine.

But I do believe that the metro bundler is stricter in a lot of cases than it's web counter parts. I have no idea why though, but some standard node things like symlinks and package hoisting (or even just requiring files outside of the project root) will break React Native for some reason.