npm package that serves as a bridge between React Native and Google's Blockly UNPKG version.

General Overview

This library bridges Google's Blockly visual programming framework with React Native by wrapping a WebView component. Some of the characteristics of the package are:

• Block Management: Define custom blocks with configurable properties (type, messages, colors, tooltips, connections)
• Toolbox Configuration: Create dynamic toolboxes with organized block categories and accessibility controls
• Workspace Customization: Configure workspace behavior including scrolling, trash can, and visual settings
• HTML Generation: Automatically transpile block definitions and configurations into executable HTML/JavaScript
• Validation System: Built-in validation to ensure block-toolbox consistency and prevent runtime errors
• WebView Integration: Seamless embedding of Blockly workspace within React Native components using react-native-webview

[!IMPORTANT] Beause we are using the UNPKG version, somethings may not work the way the npm version of Blockly does, as stated by Google here.

Installation

use npm or yarn to install the package:

npm install react-native-blockly

Usage

Here is a simple example of how to use the library:

import BlocklyView, { Blockly, BlocklyViewConfig } from 'react-native-blockly'

const blockly = new Blockly();
const config = new BlocklyViewConfig();

blockly.createBlock({
  type: 'helloWorld',
  message0: 'Hello World',
  output: null,
  colour: 230,
  tooltip: 'Command to say hello',
  helpUrl: '',
  code: 'return "Hello World!"'
});

config.setToolbox({
  kind: 'flyoutToolbox',
  contents: [
    {
      kind: 'block',
      type: 'helloWorld'
    }
  ]
});

function onMessage(data: string) {
  console.log('Message from Blockly:', data); // on this case, data would be "Hello World!"
}

export default function App() {
  return (
    <BlocklyView Blockly={blockly} Config={config} onMessage={onMessage} />
  );
}

To see more examples, check the examples directory.

Running the Example App

To run the example, first, clone the repo:

git https://github.com/AlanSilvaaa/react-native-blockly

Then, navigate to the project folder and install the dependencies. This project uses yarn, so run:

yarn install

Finally, just execute this command from the root of the project:

yarn run example android

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Author

@AlanSilvaaa

Made with create-react-native-library