PureScript + React Native

やりたいこと

PureScriptで作ったコンポーネントをTypeScriptで書かれてるReact Nativeのコードから使う。

やったこと

PureScript

PureScriptでボタンを表示するコンポーネントは↓のように書ける。 適当なプロジェクトでこういうコードを書いて spago bundle-module --to 適当なパス/index.js --watch とかするとJavaScriptに変換されたコードが出来上がる。

module Main where

import Prelude
import React.Basic (JSX)
import React.Basic.Native (button) as RN
import React.Basic.Native.Events (capture_)

type Props
  = { title :: String }

button :: Props -> JSX
button { title } = RN.button { onPress: capture_ $ pure unit, title }

TypeScript

↓のように spago bundle-module したものをimportするとTypeScriptから使える。

import React from 'react';
import Main from 'spago build-moduleしたファイル';

function App() {
  return <Main.button title="タイトル" />;
}

毎回 Main.button とか書くのを避けたかったら↓のように書ける。

import React from 'react';
import Main from 'spago build-moduleしたファイル';

const B = Main.button;

function App() {
  return <B title="タイトル" />;
}