react-native-runescape-text v3.3.3

react-native-runescape-text

Convert text to a text GIF image with RuneScape chat effects.

Refer to this wikiHow guide on How to Write Text Effects on RuneScape.

Getting started

npm install react-native-runescape-text

Examples

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {GCanvasView} from '@flyskywhy/react-native-gcanvas';
import getRuneScapeText from 'react-native-runescape-text';

export default class WebglCubeMaps extends Component {
  constructor(props) {
    super(props);
    this.canvas = null;
    this.state = {
      debugInfo: 'hello world',
      hasOc1: false,
    };
  }

  takePicture = () => {
    const options = {
      scale: 1,
      fps: 10,
      motion: 'scroll',
    };
    const {width, height, extension, buffer} = getRuneScapeText(this.state.debugInfo, options);

    console.warn(width, height, extension);
    console.warn(buffer);
  };

  render() {
    return (
      <View style={styles.container}>
        {Platform.OS !== 'web' && (
          <GCanvasView
            style={{
              width: 1000, // 1000 should enough for offscreen canvas usage
              height: 1000,
              position: 'absolute',
              left: 1000, // 1000 should enough to not display on screen means offscreen canvas :P
              top: 0,
              zIndex: -100, // -100 should enough to not bother onscreen canvas
            }}
            offscreenCanvas={true}
            onCanvasCreate={(canvas) => this.setState({hasOc1: true})}
            devicePixelRatio={1} // should not 1 < devicePixelRatio < 2 as float to avoid pixel offset flaw when GetImageData with PixelsSampler in @flyskywhy/react-native-gcanvas/core/src/support/GLUtil.cpp
            isGestureResponsible={false}
          />
        )}
        {Platform.OS === 'web' || this.state.hasOc1 && (
          <TouchableOpacity onPress={this.takePicture}>
            <Text style={styles.welcome}>Click me console.warn()</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    marginVertical: 20,
  },
});

Syntax

getRuneScapeText(string, [options], [wordWrapOptions]);

Parameters

Options

WordWrapOptions

Property information can be found here. The defaults chosen by this module are listed below:

Return value

The return value is an Object with the following properties:

Install custom Font

Ref to custom fonts in README.md of @flyskywhy/react-native-gcanvas to install custom fonts and registerFont() if on Android, e.g. install from src/assets/runescape_uf.ttf and

if (Platform.OS === 'android') {
  registerFont(`${RNFS.ExternalDirectoryPath}/fonts/runescape_uf.ttf`);
}

then options.font = 'runescape_uf' before run getRuneScapeText().

Consider react-native-font-picker, and here is the result of Font Picker to fillText on @flyskywhy/react-native-gcanvas.

Exceptions