Editmode for React Native

Editmode is a CMS for your mobile app copy. Editmode frees your copy from your codebase, allowing your entire team to manage and collaborate on content from a single place.

Installation

Use npm to install Editmode:

npm install editmode-react-native

Usage

Step 1: Import the Editmode wrapper and wrap your App within it

import { Editmode } from "editmode-react-native";
  export default function App() {
    return (
      <Editmode projectId={project_id}>
        <App />
      </Editmode>
     )
   }  
);

Step 1a (Optional): Create an Editmode account on Editmode.com and create/import your content

👉 Editmode Sign Up 👈

Rendering content inside your app

In order to render app copy, you'll need to wrap it in the <Chunk /> component.

The most basic way to render content is to pass in the identifier of your chunk on the Editmode platform.

import { Chunk } from "editmode-react-native";

function Example() {
  return (
    <section>
      <Chunk identifier="cnk_b6d6754b2cf6c59a7847" />
    </section>
  );
}

For better readability, you can opt to pass in the content key of your chunk on the Editmode platform.

import { Chunk } from "editmode-react-native";

function Example() {
  return (
    <section>
      <Chunk contentKey="simple_chunk_example" />
    </section>
  );
}

Use variables to personalize and interpolate the content you're showing.

import { Chunk } from "editmode-react-native";

function Example() {
  return (
    <section>
      <Chunk contentKey="welcome_message" variables={{first_name:"Joe"}} />
    </section>
  );
}

Fallbacks

As you may have inferred, the above examples rely on the Editmode API to serve content. This carries speed and uptime considerations. To address this, you may also specify your own fallback content, in a number of ways.

Using a resource file

import { defaultChunks } from "./data/defaultChunks";
import { Chunk } from "editmode-react-native";

function Example() {
  return (
    <Editmode projectId={project_id} defaultChunks={defaultChunks} >
      <section>
        {/* The following chunk will first check the content in defaultChunks before hitting the API. */}
        <Chunk identifier="cnk_b6d6754b2cf6c59a7847" />
      </section>
    </Editmode>
  );
}

Want to automate your tooling or workflow and generate your resource file programatically? You can use the content returned from the GET Chunks API endpoint.

Specifying default content inline

import { Chunk } from "editmode-react-native";

function Example() {
  return (
    <section>
      {/* The following chunk show the inline content before fetching content from our API. */}
      <Chunk contentKey="welcome_message">Welcome to our app!</Chunk>
    </section>
  );
}

Adding custom width and height to images

By default every image rendered using Editmode is sized 50px in height and 50px in width. You can override those sizes by passing imageHeight and imageWidth as props.

function Example() {
  return (
    <section>
      <Editmode projectId="prj_h3Gk3gFVMXbl">
        <Chunk identifier="cnk_14a3902640051246876f" imageHeight={500} imageWidth={200} />
      </Editmode>
    </section>
  );
}

Sizes passed through imageHeight and imageWidth are in pixels.

Trigger Cache Expire

You may want to refresh all your contents to make sure your user see the right contents in your app. You can use the refreshChunks function to force update your localstorage with the recent version of your contents from Editmode Contet Hub.

Example:

  <Button
    onPress={() => refreshChunks()}
    title="Refresh"
    color="#841584"
    accessibilityLabel="Refresh"
  />

Live Demo:

View in expo

Render Content Flow

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!