EF React Native DOM Components

React Native components for rendering EF DOM. The elements can be used as normal React Native components or be generated from a DOM data tree that is often sent from a server. General purpose widgets are available:

• Audio - Allows audio to be played
• Carousel - Horizontal carousel of nested nodes
• Code - Monospaced text display
• Container - Horizontal/vertical spacing component
• Heading - Headings of various levels
• Image - Image from URL
• Link - Interactive clickable URL
• List - Ordered/Unordered list
• Modal - Pops up a modal node when tapped
• Padding - Adds padding to a node, as all nodes are full bleed by default
• Quote - Represents a quotation
• Scrollable - Vertically scrollable content
• Separator - Horizontal/vertical separator line
• Video - Video player

React Native does not provide all the necessary components to fulfil the DOM components, especially video rendering and audio output. To resolve this issue the library has the concept of being able to override static functions that perform the application specific implementation. Regardless of the backend used the UI of the components is consistent. This allows the library to be used in various different applications as it is native implementation agnostic.

import { WebBrowser } from 'expo';
import { Link, EventAction } from '@ef-carbon/react-native-dom';
import { Url } from '@ef-carbon/primitive';

async function openUrl(url: Url): Promise<EventAction | void> {
 if (url.protocol.startsWith('http')) {
   await WebBrowser.openBrowserAsync(`${url}`);
   return EventAction.PreventDefault;  // Handled
 }
}

Link.openUrl = openUrl;

The following projects provide canned integrations with popular libraries:

• @ef-carbon/react-native-dom-expo
• @ef-carbon/react-native-dom-navigation

To see a demo of the EF DOM components, have a look at the @ef-carbon/react-native-demo project.