Failed to bind EAGLDrawable

loic-lopez commented 5 years ago

[x] Review the documentation: https://docs.viromedia.com/
[x] Search for existing issues: https://github.com/viromedia/viro
[x] Use the latest ViroReact release: https://docs.viromedia.com/docs/releases

Environment

Development OS: Mac
Device OS & Version: iOS 12.1.3
Version: "react-viro": "^2.13.0", and "react-native": "0.58.4"
Device(s): Apple phones

Description

Can't render an ARScene:

My pod file:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '9.3'

# The target name is most likely the name of your project.
target 'App' do

  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
      'Core',
      'CxxBridge', # Include this for RN >= 0.47
      'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
      'RCTText',
      'RCTNetwork',
      'RCTWebSocket'
  # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

  # Third party deps podspec link
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

  pod 'RNKeychain', :path => '../node_modules/react-native-keychain'

  pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

  pod 'RNSound', :path => '../node_modules/react-native-sound'

  pod 'ViroReact', :path => '../node_modules/react-viro/ios/'
  pod 'ViroKit_static_lib', :path => '../node_modules/react-viro/ios/dist/ViroRenderer/static_lib'
end

My React Native Code: ViroARSceneNavigator:

import React from "react"
import { ViewStyle } from "react-native"
import { ViroARSceneNavigator } from "react-viro"

import { Screen } from "@components"
import { AugmentedRealityScreen } from "@screens/augmented-reality-screen/augmented-reality-screen"
import { ReactViroConfig } from "@utils/react-viro-cfg"
import { NavigationScreenProps } from "react-navigation"

export interface AugmentedRealityNavigatorProps extends NavigationScreenProps<{}> {
}

const FULL: ViewStyle = {
  flex: 1
}

export class AugmentedRealityNavigator extends React.Component<AugmentedRealityNavigatorProps> {

  render(): React.ReactNode {
    const { navigation } = this.props

    return (
      <Screen style={FULL}>
        <ViroARSceneNavigator
          style={FULL}
          apiKey={ReactViroConfig.API_KEY}
          initialScene={{ scene: AugmentedRealityScreen }}
        />
      </Screen>
    )
  }
}

AugmentedRealityScreen:

import * as React from "react"
import { ViewStyle } from "react-native"
import { ViroARScene, ViroConstants, ViroText } from "react-viro"
import { NavigationScreenProps } from "react-navigation"
import { color } from "@theme"
import { observer } from "mobx-react/native"
import autobind from "autobind-decorator"
import { observable, action } from "mobx"

export interface AugmentedRealityScreenProps extends NavigationScreenProps<{}> {
}

const ROOT: ViewStyle = {
  backgroundColor: color.background
}

@observer
export class AugmentedRealityScreen extends React.Component<AugmentedRealityScreenProps, {}> {

  @observable private text: string = "Initializing AR..."

  @action.bound
  _onInitialized(state, reason) {
    if (state == ViroConstants.TRACKING_NORMAL) {
      this.text = "Hello World!"
    } else if (state == ViroConstants.TRACKING_NONE) {
      // Handle loss of tracking
    }
  }

  render() {
    const { text } = this

    return (
      <ViroARScene style={ROOT} onTrackingUpdated={this._onInitialized}>
        <ViroText text={text}
                  scale={[.5, .5, .5]}
                  position={[0, 0, -1]}
                  style={{
                    fontSize: 30,
                    color: "#ffffff",
                    textAlignVertical: "center",
                    textAlign: "center"
                  }}
        />
      </ViroARScene>
    )
  }
}

Results in:

Xcode log:

2019-02-12 12:59:38.196008-0500 App[545:35863] Failed to bind EAGLDrawable: <CAEAGLLayer: 0x282ad11a0> to GL_RENDERBUFFER 1
2019-02-12 12:59:38.196127-0500 App[545:35863] Failed to make complete framebuffer object 8cd6

loic-lopez commented 5 years ago

Solved by removing a <Screen> which is a wrapper of a <View>

<Screen style={FULL}>
</Screen>

Solution:

render(): React.ReactNode {

    return (
      <ViroARSceneNavigator
        style={FULL}
        apiKey={ReactViroConfig.API_KEY}
        initialScene={{ scene: AugmentedRealityScreen }}
      />
    )
  }

budlin2 commented 4 years ago

I'm getting the same error. My app.js looks like: ` const App = () =>

`

where View is imported from 'react-native' and Header is imported from 'react-native-elements'. I'm not sure what I'm doing wrong. I was under the impression that the ViroMedia component, 'ViroArSceneNavigator' would work fine alongside other react components from other libraries.

viromedia / viro