draftbit / reason-expo Goto Github PK

View Code? Open in Web Editor NEW

143.0 6.0 23.0 3 MB

ReasonML bindings for Expo

Home Page: https://docs.expo.io/

OCaml 1.07% JavaScript 0.62% Reason 96.93% C++ 1.38%

expo reasonml reason react-native react javascript ocaml mobile ios android

reason-expo's Introduction

reason-expo

ReasonML bindings for Expo

Versioning

This library doesn't follow conventional semver. The version scheme is shown below, and you should track this library accordingly.

<ExpoVersion>.<Major>.<Minor/Patch>

Getting started

Use the Expo CLI to bootstrap a project with the ReasonExpo template.

expo init <PROJECT_NAME> --template expo-template-reason

Already have an existing Expo Project? Go into your project root & then install the requirements:

yarn add bs-platform --dev
yarn add reason-react reason-react-native reason-expo

Next, create a file named bsconfig.json at the same level at your package.json with the following content:

{
  "name": "my-reason-expo-app",
  "reason": {
    "react-jsx": 3
  },
  "bsc-flags": ["-bs-super-errors"],
  "bs-dependencies": ["reason-react", "reason-react-native", "reason-expo"],
  "sources": [
    {
      "dir": "src"
    }
  ],
  "suffix": ".bs.js",
  "refmt": 3,
  "package-specs": {
    "module": "es6",
    "in-source": true
  }
}

Next, add these scripts to your package.json:

  "build-reason": "bsb -make-world",
  "watch-reason": "bsb -make-world -w",
  "build-reason-clean": "bsb -clean-world -make-world",

Finally, make a folder named src and start writing your ReasonML code in there. yarn build-reason will compile the ReasonML code in that folder for you to import and use in your Expo app's JS/TS code.

Contributing

Fork this repo, clone it onto your machine, install run yarn in the root directory. Start the compiler and Expo test app with yarn dev in the root directory, and start hacking away at the files in packages/reason-expo and packages/test!

Credit: This project is based on the work started in bs-expo.

reason-expo's People

Contributors

Stargazers

Watchers

reason-expo's Issues

Returning Values from Expo.Constants are undefined.

In App.re,deviceId and deviceName always come back undefined. Is there some set up that I have to do?

open ReactNative;
open Expo;
let styles =
  Style.(
    StyleSheet.create({
      "container":
        style(
          ~flex=1.,
          ~justifyContent=`center,
          ~alignItems=`center,
          ~backgroundColor="#F5FCFF",
          (),
        ),
      "instructions": style(~textAlign=`center, ~color="#ffffff", ()),
    })
  );

[@react.component]
let app = () => {
  let deviceId = Constants.deviceId;
  let deviceName = Constants.deviceName;

  <View style=styles##container>
    <LinearGradient
      colors=[|"#DD4B39", "#C62C19"|]
      start=[|0.0, 0.0|]
      _end=[|1.0, 1.0|]
      style=Style.(style(~padding=dp(12.), ~borderRadius=12., ()))>
      <Text style=styles##instructions>
        {React.string("To get started, edit App.re")}
      </Text>
      <Text style=styles##instructions>
        {React.string("DeviceId is " ++ deviceId)}
      </Text>
      <Text style=styles##instructions>
        {React.string("DeviceName is " ++ deviceName)}
      </Text>
    </LinearGradient>
  </View>;
};

let default = app;

jsx3 support

Hi! Do you have plans to add bindings for jsx3?

Submit reason-expo to redex

I found bs-expo when searching for "expo" on redex.

it'd be great to list reason-expo there as well, especially since bs-expo is unmaintained.

You are the fkin' man 🔥

Hey @FiberJW,

The only issue I have is that I haven't been able to express how amazing of a person you are.

Keep it up 🔥

SVG support?

I've tried a couple of times to figure out how to create the necessary typedefs to support Expo.Svg to no avail (I'm a bit of a noob, both to Reason, Expo, and app development in general). Any chance there are plans to cover this API?

Quite a lot of mandatory props for Camera-component

I am using v33.1.0 of this library, created with expo init <PROJECT_NAME> --template expo-template-reason.

When creating a Camera-component, it seems that you have to provide all props except for barCodeScannerSettings and style, this makes it 14 mandatory props, and for most of them I want default. Here is a minimal implementation of an app using camera component:

open BsReactNative;

let component = ReasonReact.statelessComponent("App");

let make = _children => {
  ...component,
  didMount: _self => {
    ReasonExpo.Permissions.askAsync(ReasonExpo.Permissions.Camera)
    |> Js.Promise.then_(value => {
         Js.log(value);
         Js.Promise.resolve(value);
       });
    ();
  },
  render: _self =>
    <ReasonExpo.Camera
      onFacesDetected={_val => Js.log("face detection fired")}
      faceDetectionMode=ReasonExpo.Camera.Accurate
      faceDetectionLandmarks=ReasonExpo.Camera.None
      faceDetectionClassifications=ReasonExpo.Camera.None
      onMountError={error => Js.log({j|"error $error"|j})}
      flashMode=ReasonExpo.Camera.Off
      autoFocus=ReasonExpo.Camera.On
      zoom=0.
      whiteBalance=ReasonExpo.Camera.Auto
      focusDepth=0.
      ratio="16:9"
      onCameraReady=Js.log
      type_=ReasonExpo.Camera.Back
      onBarCodeScanned={value => {
        let data = value##data;
        //let valueType = value##_type; // Does not work: This expression has type {. data: string, type: string} It has no method _type

        Js.log({j|barcode $data |j});
      }}
      style=StyleSheet.absoluteFillObject>
      <Text> {React.string("This is a cameratest")} </Text>
    </ReasonExpo.Camera>,
};

let default = ReasonReact.wrapReasonForJs(~component, _jsProps => make([||]));

... and that seems like a lot to just get the camera up and running with basic properties.

If I remove any of the props in the camera-component, e.g. flashMode, I get an error like:

Error: This expression has type
         (~flashMode: ReasonExpo.Camera.flashMode) =>
         ReasonReact.component(ReasonReact.stateless,
                                ReasonReact.noRetainedProps,
                                ReasonReact.actionless)
       but an expression was expected of type
         ReasonReact.component('a, 'b, 'c) =
           ReasonReact.componentSpec('a, 'a, 'b, 'b, 'c)

I understand that it may be easier to have the component in this way, to be able to use it without sending in optionals all the time, but it is quite a lot of work to take a stand to all of those props if you're just interested in basic camera functionality.

Is the intentention that it should be used in this way, or am I missing something?

Document Video module usage

How are we suppose to set the source parameter to the Video module?
Same question for the volume one.

Migrate from monorepo

There are really no benefits from using monorepo for reason-expo as it's just a single set of bindings. Flattening out project structure and removing template/test (at least for now) would improve readability a lot.

Consider updating use of LinearGradient

Priority: Low

Issue: With the latest version of expo-cli, using ReasonExpo.LinearGradient returns this warning.

Running application on iPhone X.
The following APIs have moved to separate packages and importing them from the "expo" package is deprecated: LinearGradient.

1. Add correct versions of these packages to your project using:

   expo install expo-linear-gradient

   If "install" is not recognized as an expo command, update your expo-cli installation.

2. Change your imports so they use specific packages instead of the "expo" package:

 - import { LinearGradient } from 'expo' -> import { LinearGradient } from 'expo-linear-gradient'

Solution:
Consider using another component or create bindings to use expo-linear-gradient directly to handle warning.

Audio Example

I'm trying to use the audio module, but when I use Audio.Sound.createAsync I'm not sure how I can playAsync the source, I tried:

open Expo

let play = (~url: string) => {
  Expo.Audio.Sound.createAsync(`URI(url))
  |> Js.Promise.then_(sound => sound##playAsync());
};

I tried to see how it works here: https://github.com/fxfactorial/bs-expo/blob/master/test-app/re/App.re#L30 but I when I try to call playAsync I get:

  26 │ let play = url => {
  27 │   Audio.Sound.createAsync(`URI(url))
  28 │   |> Js.Promise.then_(sound => sound##playAsync());
  29 │ };
  30 │ [@react.component]
  
  This value seems to need to be wrapped in a function that takes extra
  arguments of type: 'a, 'a => unit, bool
  
  Here's the original error message
  This has type:
    Js.Promise.t(Js.t(({.. playAsync: (unit => Js.Promise.t('b)) [@bs.meth]}
                       as 'a))) =>
    Js.Promise.t('b)
  But somewhere wanted:
    (('c, 'c => unit, bool) => Js.Promise.t(Expo.Audio.Sound.t)) => 'd
  
  The incompatible parts:
    Js.Promise.t(Js.t('a)) (defined as Js.Promise.t(Js.t('a)))
    vs
    ('c, 'c => unit, bool) => Js.Promise.t(Expo.Audio.Sound.t)

any idea what am I doing wrong?