Atomic Types

RNDraftJSRender makes it easy to handle atomic elements with a atomicHandler function. Take a look at this example:

Let's say that we have a atomic of type image inside our contentState.blocks.

{
  "blocks": [
    {
      "key": "3tvln",
      "type": "atomic",
      "data": {
        "type": "image",
        "uri": "https://lorempixel.com/400/200/"
      }
    }
  ]
}

You can render this atomic passing a callback called atomicHandler to RNDraftJSRender.

const atomicHandler = (item: Object, entityMap: Object): ?React$Element<*> => {
  switch (item.data.type) {
    case 'image':
      return (
        <View key={item.key} style={{ flex: 1 }}>
          <Image
            style={{ width: 288, height: 161 }}
            source={{ uri: item.data.uri }}
          />
        </View>
      );
    default:
      return null;
  }
};

const props = {
  contentState,
  atomicHandler,
};

const blocks = getRNDraftJSBlocks(props);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!