Jasonelle and React.js

React.js uses virtualdom technology which is a little difficult to modify in custom.js since it depends on the rendering engine. So these are a few tips to work well with React apps and Jasonelle.

Calling the $media.camera action

We will make a simple app that shows the camera with the press of a button.

This is the App.js inside a barebones React.js application created using https://create-react-app.dev/

We will be using our local ip http://192.168.0.10:3000 to host the React.js app.

App.js

import React, {useEffect, useState} from 'react';

import './App.css';


// A reference set in App component
let setPhotoJasonette = null;

// You can use this function to update an image
// or upload it to your server
const savePhoto = (base64Image) => {
  setPhotoJasonette(base64Image);

  // $agent.response() is needed to continue the success flow in Jasonette
  window.$agent.response();
};

// Expose savePhoto to Jasonette
window.savePhoto = savePhoto;

// Will call the $agent trigger to camera.show action in app.json
const showCamera = () => {
    console.log("Show Camera");
    window.$agent.trigger("camera.show");
};

// React component
function App() {

  const [photo, setPhoto] = useState(null);

  
  // Set the reference so Jasonette can update the photo with the hook
  setPhotoJasonette = setPhoto;

  useEffect(() => {
    if (photo) {
      // Photo was updated.
      console.log("Photo Loaded");
      console.log(photo);
    }
  }, [photo]);

  return (
    <div className="App">
      <header className="App-header">
        <button
          className="App-link"
          onClick={showCamera}
        >
          Open Camera
        </button>
      </header>
    </div>
  );
}

export default App;

app.json

{
    "$jason": {
        "head": {
            "actions": {
                "camera.show": {
                    "type": "$media.camera",
                    "options": {
                        "type": "photo",
                        "quality": "high"
                    },
                    "success": {
                        "type": "$agent.request",
                        "options": {
                            "id": "$webcontainer",
                            "method": "window.savePhoto",
                            "params": ["{{$jason.data_uri}}"]
                        }
                    }
                }
            }
        },
        "body": {
            "background": {
                "type": "html",
                "url": "http://192.168.0.10:3000",
                "style": {
                    "background": "#ffffff",
                    "progress" : "rgba(0,0,0,0)"
                },
                "action": {
                    "type": "$default"
                }
            }
        }
    }
}

Tips

Try to avoid React rendering when triggering a Jasonette Action. For example using <a> tags for triggering an Action. Since the rendering flow of React can conflict with the loading of actions in Jasonette (normally this happends in Android).

Prefer using a button instead.