Expo-2d-context can only draw text to one GLView. Any other GLView shows block letters

I have a component where I need multiple GLViews using expo-2d-context to manipulate them like an HTML canvas. Everything works fine except for drawing text. Calling await ctx.initializeText() only seems to work correctly on the first GLView.

The example below results in this:

Here’s a reproducible example (NOTE: this cannot run in an expo snack because of the asynchronous calls to onContextCreate. However, I’ve set up a snack here that you could download and run).

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { GLView } from 'expo';
import Constants from 'expo-constants';
import Expo2DContext from 'expo-2d-context';

export default class App extends React.Component {
  _onGLContextCreate = async (gl, text, color) => {
    var ctx = new Expo2DContext(gl);
    await ctx.initializeText();

    ctx.fillStyle = color;
    ctx.fillRect(0, 0, ctx.width, ctx.height);

    ctx.fillStyle = "white";
    ctx.font = "italic 72pt sans-serif";
    ctx.fillText("Hey Galaxy", 10, 100);

    ctx.flush();
  }

  render() {
    return (
      <View style={styles.container}>
        <GLView
          style={{ flex: 1, height: 200, width: '100%' }}
          onContextCreate={(gl) => { this._onGLContextCreate(gl, "View 1", "#333399") }}
        />

        <GLView
          style={{ flex: 1, height: 200, width: '100%' }}
          onContextCreate={(gl) => { this._onGLContextCreate(gl, "View 2", "#993333") }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#333333',
    padding: 8,
  }
});

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.