react-native-blockly

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:
``bash
npm install react-native-blockly
`

Usage

Here is a simple example of how to use the library:
`tsx
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 (

);
}
`

To see more examples, check the examples directory.

Running the Example App

To run the example, first, clone the repo:
`bash
git https://github.com/AlanSilvaaa/react-native-blockly
`

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

Finally, just execute this command from the root of the project:
`bash
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