Mobile version of Gutenberg - native iOS and Android
Switch branches/tags
Nothing to show
Clone or download
etoledom Merge pull request #195 from wordpress-mobile/try/WPiOS-integration
Changes to integrate Gutenberg-Mobile into the WPiOS App
Latest commit 9464e8c Nov 8, 2018
Failed to load latest commit information.
.travis Add option for Travis to run tests with GB as parent Sep 19, 2018
.vscode Add configuration for React Native extension Aug 21, 2018
__mocks__ Slot/Fill pattern with Toolbar (#199) Nov 7, 2018
android Match wpandroid's Android API levels Oct 29, 2018
gutenberg @ 996f0fe Update to GB master Nov 8, 2018
images Added VSCode section to README Aug 23, 2018
ios iOS Bridge: Refactor `Gutenberg` class init. Nov 7, 2018
jest Fix lint warnings Oct 29, 2018
react-native-aztec @ ca533ae Updating Aztec reference to current master Nov 8, 2018
react-native-gutenberg-bridge Merge branch 'master' into try/WPiOS-integration Nov 8, 2018
src Merge branch 'master' into try/WPiOS-integration Nov 8, 2018
symlinked-packages-in-parent/@wordpress Slot/Fill pattern with Toolbar (#199) Nov 7, 2018
symlinked-packages/@wordpress Slot/Fill pattern with Toolbar (#199) Nov 7, 2018
.eslintignore Update the inside-gb setup to use symlinks for Jest Sep 23, 2018
.eslintrc Add flowtype plugin to the linter Apr 11, 2018
.flowconfig symlinked-packages as extra packages dir for Flow Sep 23, 2018
.gitignore Updating react-native-aztec and WordPress-iOS submodule references Oct 17, 2018
.gitmodules Removed WordPress-iOS from submodules Oct 19, 2018
.prettierignore Ignore the GB tree for Prettier Apr 4, 2018
.travis.yml Third Travis build with flow+prettier Mar 27, 2018
.watchmanconfig ⭐ First commit: project initialization ⭐ Mar 12, 2018
LICENSE Use GPLv2 instead of v3 Mar 19, 2018 Merge pull request #165 from ajitbohra/patch-2 Oct 18, 2018
app.json First step at replacing the FlatList Mar 30, 2018
babel.config.js Remove plugin from Babel to make wpandroid release build work Oct 28, 2018
extra-node-modules.config.js Separate rn-cli config for running from inside GB Sep 10, 2018
index.js Enable Flow for more source files Aug 13, 2018
jest.config.js No need for change of default Jest platform Oct 31, 2018
jest_gb.config.js Update the inside-gb setup to use symlinks for Jest Sep 23, 2018
libdefs.js Upgrade RN to 0.55.3, React.js to 16.3.1 Apr 27, 2018
package.json Merge pull request #228 from wordpress-mobile/xcode10 Nov 8, 2018
rn-cli-inside-gb.config.js Reinstate comments. Sep 25, 2018
rn-cli.config.js Reinstate comments. Sep 25, 2018
sass-transformer-inside-gb.js updated stylesheet asset location after it was moved out to npm in Wo… Oct 11, 2018
sass-transformer.js updated stylesheet asset location after it was moved out to npm in Wo… Oct 11, 2018
yarn.lock Merge pull request #225 from wordpress-mobile/feature/detect-content-… Nov 8, 2018

Mobile Gutenberg

Note: The project is at an early stage phase, it's not yet ready for integration.

This is the mobile version of Gutenberg, targeting Android and iOS. It's a React Native library bootstrapped by CRNA and now ejected.

Getting Started


For a developer experience closer to the one the project maintainers current have, make sure you have the following tools installed:

  • git
  • nvm
  • Node.js and npm (use nvm to install them)
  • yarn (npm install -g yarn)
  • AndroidStudio to be able to compile the Android version of the app
  • Xcode to be able to compile the iOS app
  • Carthage needed for fetching the Aztec dependency.

Note that the OS platform used by the maintainers is macOS but the tools and setup should be usable in other platforms too.

Clone the project

  • Clone the project and submodules:
$ git clone --recurse-submodules
  • Or if you already have the project cloned, initialize and update the submodules:
$ git submodule init
$ git submodule update

Set up

Before running the demo app, you need to download and install the project dependencies. This is done via the following command:

yarn install


yarn start

Runs the packager (Metro) in development mode. The packager stays running to serve the app bundle to the clients that request it.

With the packager running, open another terminal window and use the following command to compile and run the Android app:

yarn android

The app should now open in a connected device or a running emulator and fetch the JavaScript code from the running packager.

To compile and run the iOS variant of the app, use:

yarn ios

which will attempt to open your app in the iOS Simulator if you're on a Mac and have it installed.

When things seem crazy

Some times, and especially when tweaking anything in the package.json, Babel configuration (.babelrc) or the Jest configuration (jest.config.js), your changes might seem to not take effect as expected. On those times, you might need to clean various caches before starting the packager. To do that, run the script: yarn start:reset. Other times, you might want to reinstall the NPM packages from scratch and the yarn clean:install script can be handy.

Developing with Visual Studio Code

Although you're not required to use Visual Studio Code for developing gutenberg-mobile, it is the recommended IDE and we have some configuration for it.

When you first open the project in Visual Studio, you will be prompted to install some recommended extensions. This will help with some things like type checking and debugging.

Prompt to install recommended extensions

One of the extensions we are using is the React Native Tools. This allows you to run the packager from VSCode or launch the application on iOS or Android. It also adds some debug configurations so you can set breakpoints and debug the application directly from VSCode. Take a look at the extension documentation for more details.


Use the following command to run the test suite:

yarn test

It will run the jest test runner on your tests. The tests are running on the desktop against Node.js.

To run the tests with debugger support, start it with the following CLI command:

yarn test:debug

Then, open chrome://inspect in Chrome to attach the debugger (look into the "Remote Target" section). While testing/developing, feel free to springle debugger statements anywhere in the code that you'd like the debugger to break.

Writing and Running Tests

This project is set up to use jest for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called __tests__ or with the .test.js extension to have the files loaded by jest. See the the template project for an example test. The jest documentation is also a wonderful resource, as is the React Native testing tutorial.

Static analysis and code style

The project includes a linter (eslint) to perform codestyle and static analysis of the code. The configuration used it the same as the one in the Gutenerg project. To perform the check, run:

yarn lint

To have the linter also fix the violations run: yarn lint:fix.

In parallel to eslint the project uses Prettier for codestyling. Run:

yarn prettier

to enforce the style. This will modify the source files to make them comform to the rules.

Flow is used as a static type checker for JavaScript code. Flow checks JavaScript code for errors through static type annotations. These types allow you to tell Flow how you want your code to work, and Flow will make sure it does work that way. To perform the check run:

yarn flow

You might want to use Visual Studio Code as an editor. The project includes the configuration needed to use the above codestyle and lint tools automatically.


Gutenberg Mobile is an Open Source project covered by the GNU General Public License version 2.