react-native-gles

A <GLESView> component for React Native.

Tested on react-native >= 0.60.0, may work on older versions.

Getting started

Using npm:

npm install --save react-native-gles

or using yarn:

yarn add react-native-gles

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-gles ➜ ios and add RNGLESView.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNGLESView.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.akshetpandey.rnglesview.RNGLESViewPackage; to the imports at the top of the file
• Add new RNGLESViewPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-gles'
   project(':react-native-gles').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gles/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile project(':react-native-gles')
   

Configure your React Native Application

iOS:

1. In XCode, in the project navigator, click on your project to open project settings, Build Phases ➜ Link Binary With Libraries
2. Click on + and add GLKit.framework
3. In Build Settings, Modify C++ Language Dialect and make sure its at least C++14 [-std=c++14]

On Android

Android is a bit more complicated than iOS. You will have to setup NDK and a CMake based compile system to compile your c++ code. On the other hand, if you are planning to use this library there is a high chance that those are already setup. In which case jump to the next part.

Using this library with ndk-build is possible but not documented.

Setting up NDK and CMake

1. Make sure you have an up-to-date Android NDK (needed to compile the Native C++ code) and that it's properly configured in ANDROID_NDK env or in android/local.properties file (e.g. ndk.dir=/usr/local/share/android-ndk).

2. In android/app/build.gradle make the following additions:

   android {
   	.
   	.
   	.
   	defaultConfig {
   		.
   		.
   		.
   		externalNativeBuild {
               cmake {
   	            arguments "-DANDROID_ARM_NEON=TRUE", "-DANDROID_TOOLCHAIN=clang", "-DANDROID_STL=c++_shared"
       	    }
   		}
   	}
   
   	externalNativeBuild {
   		cmake {
   			path "src/main/cpp/CMakeLists.txt"
   			version "3.10.2"
   		}
   	}
   	.
   	.
   	.
   }
   

3. Create android/app/src/main/cpp/CMakeLists.txt with content

   # For more information about using CMake with Android Studio, read the
   # documentation: https://d.android.com/studio/projects/add-native-code.html
   
   # Sets the minimum version of CMake required to build the native library.
   
   cmake_minimum_required(VERSION 3.10.2)
   
   # Set compiler flags
   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++14 -fPIC")
   
   set(repoROOT_DIR ../../../../..)
   set(rnglesDIR ${repoROOT_DIR}/node_modules/react-native-gles)
   
   # Add source files to be compliled here
   # Path is relative to this CMakeLists.txt file
   set(SOURCE_FILES
   		jniHelper.cpp
   		)
   
   # Specifies a path to native header files.
   # Path is relative to this CMakeLists.txt file
   include_directories(${repoROOT_DIR}/cpp/)
   
   include_directories(${rnglesDIR}/cpp/)
   
   add_subdirectory(${rnglesDIR}/android/src/main/cpp ../../../rnglesviewNativeBuildDir)
   
   # Creates and names a library, sets it as either STATIC
   # or SHARED, and provides the relative paths to its source code.
   # You can define multiple libraries, and CMake builds them for you.
   # Gradle automatically packages shared libraries with your APK.
   add_library(
   		# Specifies the name of the library.
   		YOUR_LIBRARY_NAME
   
   		# Sets the library as a shared library.
   		SHARED
   
   		# Provides a relative path to your source file(s).
   		${SOURCE_FILES}
   		$<TARGET_OBJECTS:rnglesviewNativeObject>)
   
   # Searches for a specified prebuilt library and stores the path as a
   # variable. Because CMake includes system libraries in the search path by
   # default, you only need to specify the name of the public NDK library
   # you want to add. CMake verifies that the library exists before
   # completing its build.
   find_library( # Sets the name of the path variable.
   		glesv2-lib
   
   		# Specifies the name of the NDK library that
   		# you want CMake to locate.
   		GLESv2)
   
   # Specifies libraries CMake should link to your target library. You
   # can link multiple libraries, such as libraries you define in this
   # build script, prebuilt third-party libraries, or system libraries.
   
   target_link_libraries( # Specifies the target library.
   		YOUR_LIBRARY_NAME
   
   		# Links the target library to the GLESv2 library
   		# included in the NDK.
   		${glesv2-lib})
   

4. Create android/app/src/main/cpp/jniHelper.cpp with content. This is empty but helps Android Studio behave correctly

   #include <jni.h>
   

5. Then in your main activity's class add

   import com.facebook.soloader.SoLoader;
   
   public class MainActivity extends ReactActivity {
   	static {
   		SoLoader.loadLibrary("YOUR_LIBRARY_NAME");
   	}
   	.
   	.
   	.
   }
   

You already have NDK + CMake setup

1. Find your CMakeLists.txt file
2. Before your add_library lines, include the RNGLESView project by adding

   set(repoROOT_DIR ../../../../..)
   add_subdirectory(${repoROOT_DIR}/node_modules/react-native-gles/android/src/main/cpp ../../../rnglesviewNativeBuildDir)
   

3. In your add_library command, modify it to include $<TARGET_OBJECTS:rnglesviewNativeObject>, for example

   add_library(
   		YOUR_LIBRARY_NAME
   		SHARED
   		${SOURCE_FILES}
   		$<TARGET_OBJECTS:rnglesviewNativeObject>)
   

4. Append the following in the appropriate place if it doesn't already exists.

   find_library(glesv2-lib GLESv2)
   

5. In your target_link_libraries command. Add ${glesv2-lib}. So it looks something like

   target_link_libraries(
   		YOUR_LIBRARY_NAME
   		.
   		.
   		.
   		${glesv2-lib})
   

6. Make sure you are compiling in >= C++14. If you are unsure this may help

   set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++14")
   

Look at example/android/app/src/main/cpp for an example setup

Usage

Unlike a lot of react native libraries there are two parts here. First create a rendering code in C++, then use that code in JS

// cpp/RedColorScene.hpp
#pragma once

#include "GLESView.hpp"

class RedColorScene : public GLESView {
public:
    RedColorScene() noexcept;
    bool update(double timestamp);
    void draw();
private:
	float _red;
};

// cpp/RedColorScene.cpp
#include "RedColorScene.hpp"
#include "GLESViewFactory.hpp"

// This is important!!!
REGISTER_SCENE(RedColorScene)

RedColorScene::RedColorScene() noexcept : _red(0.f) { }

bool RedColorScene::update(double timestamp) {
	_red += 0.01f;
	if (_red >= 1.f) {
		_red = 0.f;
	}
	return true;
}

void RedColorScene::draw() {
  glClearColor(_red, 0.f, 0.f, 1.f);
  glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
}

Then make sure that these libraries are included in the compilation target for the iOS and Android Projects

For iOS:

• In XCode, right-click on the project and select Add files to "your_project_name", then add the cpp folder

For Android:

• In the CMakeLists.txt file, modify the source list to include RedColorScene.cpp, for ex. set(SOURCE_FILES . . . PATH_TO_REPO_ROOT/cpp/RedColorScene.cpp )

Then finally in JS, you can create a GLES view that will render using your rendering code

import GLESView from 'react-native-gles';

// Within your render function

<GLESView sceneName={'RedColorScene'} />;

// You can also pass in all props that <View /> accepts and they should just work.

A more through example is available in the example folder.