hanzi-writer Can i run for React Native?

Hi all, Can i run it for React Native?

Sep 12 '19 03:09 gshoanganh

It should be possible - you'll need to run HanziWriter in a webview, but that should be supported in React Native.

Sep 12 '19 08:09 chanind

It should be possible - you'll need to run HanziWriter in a webview, but that should be supported in React Native.

so, I can understand: the first, we need create a website (includes: HanziWriter) next, I create ReactNative have WebView (url: website at step 1)

Sep 17 '19 06:09 gshoanganh

import React, { Component } from 'react';
import { WebView } from 'react-native';

const html = `
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
        <div id="test-app">Hello world!</div>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <style>body {display: flex; font-size: 2em; justify-content: center; align-items: center;}</style>
        <script type="text/javascript">
            $(document).ready(function() {
                $('#test-app').text('Test done!');
            });
        </script>
    </body>
    </html>
`

export default class App extends Component {
    render() {
        return (
            <WebView
                source={{html, baseUrl: 'web/'}}
                style={{flex: 1}}
                mixedContentMode='always'
            />
        );
    }
}

Sep 17 '19 07:09 gshoanganh

Yes, something like that! Except with HanziWriter instead of jQuery

Sep 18 '19 08:09 chanind

Did you success in running the library in React Native? I'm stuck here, can't get my javascript running. Screen Shot 2020-03-09 at 7 16 30 PM

Mar 09 '20 12:03 EagleVee

You can also run it in React Native Web as well (I am testing this as we speak), but need to leave it out of the webview (so you'd want to have a hanziwriter.native.js and a hanziwriter.web.js component file, with one using a webview and the other not).

I may at some point create a React Native fork as I have need for it in a commercial project.

Apr 29 '20 17:04 haveamission

Hello Everyone

May 19 '20 02:05 kingtiger0923

Is there anyone that completed it in a nativescript?

May 19 '20 02:05 kingtiger0923

I've got a toy example working, like this:

const INJECTED_JAVASCRIPT = `
HanziWriter.create('character-target-div', '我', {
    showCharacter: false,
});
writer.quiz();
`;

const html = `
        <div id="character-target-div"></div>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hanzi-writer.min.js"></script>
`

<WebView originWhiteList={['*']} source={{ html: html }}
    mixedContentMode='always'
    style={{
       flex: 0,
       width: 500,
       height: 500,
        }}
    injectedJavaScript={INJECTED_JAVASCRIPT}
/>

May 23 '20 18:05 haveamission

hanzi-writer hanzi-writer copied to clipboard

Can i run for React Native?

hanzi-writer
hanzi-writer copied to clipboard