rnc-archive / react-native-webgl

DEPRECATED: use expo-gl – Implements WebGL for react-native
295 stars 73 forks source link

RNWebGL context creation failed #96

Closed rajtejani closed 4 years ago

rajtejani commented 5 years ago

I'm building image editing app with instagram like filters and for that i used

package.json :-

   "react": "16.8.3",
    "react-native": "0.59.2",
    "gl-react": "^3.17.2",
    "gl-react-image": "^3.1.1",
    "gl-react-native": "^3.17.2",
   "react-native-webgl": "^0.8.0",

I added this package and link react-native-webgl. after that i got build error so thats why i made changes in Application.mk file inside node_modules/react-native-webgl/android/src/main/jni which are following

APP_BUILD_SCRIPT := Android.mk

APP_ABI := armeabi-v7a x86
APP_PLATFORM := android-16 // <<<<< HERE

APP_MK_DIR := $(dir $(lastword $(MAKEFILE_LIST)))

NDK_MODULE_PATH:=.$(HOST_DIRSEP)$(THIRD_PARTY_NDK_DIR)

APP_STL :=  c++_shared .  // <<<<<<<<<< HERE
APP_CPPFLAGS := -std=c++11 -fexceptions -pthread

# Make sure every shared lib includes a .note.gnu.build-id header
APP_LDFLAGS := -Wl,--build-id
APP_LDFLAGS += -llog
APP_LDFLAGS += -lGLESv2
APP_LDFLAGS += -pthread
APP_LDFLAGS += -ljnigraphics

# NDK_TOOLCHAIN_VERSION := 4.9    // <<<<<<<< HERE

in app/build.gradle

android{
 ....
packagingOptions {
       pickFirst '**/libc++_shared.so'
   }
}

After that i got successful build.

then i write my code inside these file Filter.js


import {Surface} from "gl-react-native";

import { Brannan, Valencia} from "./filters"; // these are from https://github.com/beqaweb/gl-react-native-filters
import  GLImage from "gl-react-image";
export type FilterName = "brannan" | "valencia";
type FilterProps = {
    uri: string,
    aspectRatio: number,
    name: FilterName,
    onDraw?: () => mixed
};

export default class Filter extends React.PureComponent<FilterProps> {

    render(): React.Node {
        const img = this.props.navigation.getParam("imgId");
        const {style, uri, aspectRatio, name, onDraw} = this.props;
        const source = { img };
        return (
            <Surface style={{ width: 500, height: 500 }}>
                <Brannan on={name === "brannan"}>
                    <Valencia on={name === "valencia"}>
                    <GLImage {...{source, aspectRatio, onDraw}} />
                </Valencia>
                </Brannan>
            </Surface>
        );
    }
}```

and got following error
rajtejani commented 5 years ago

Screenshot_1567165497

bunyaminmrcn commented 5 years ago

I did same things. Opens app and listing examples. No success, same error. Same result on android studio debug

error