@tuimedia/react-native-page

• This package contain React Native components that can render TuiPageBundle articles in your React Native app.

How do I get set up?

redux integration

import { configureStore } from "@reduxjs/toolkit";
// ... your other imports
import { reducer as pageReducer } from "@tuimedia/react-native-page";

export const store = configureStore({
  reducer: {
    // your other reducers
    page: pageReducer,
  },
});

export default store;

TuiPage usage

// import Wrapper
import { TuiPage } from "@tuimedia/react-native-page";

// optiional: override or add custom components
import PageVideo from "./path/to/PageVideo";
import PagePlaylist from "./path/to/PagePlaylist";

const components = {
  PageVideo,
  PagePlaylist,
};

// render
return (
  <TuiPage
    state="live" // page state
    axios={axios} // your axios instance ( optional )
    language={language.code} // language code
    url={`/api/pages/${slug}`} // article data endpoint
    components={components} // your custom components and components overrides ( optional )
    getImage={getImage} // optional image url transformation fucntion
    theme={props.theme} // optional theme object
    serverUrl={Config.SERVER_URL} // your server URL
  />
);

Integrate custom components

import React from "react";
import PropTypes from "prop-types";
import { View, Text } from "react-native";

const PageExampleBlock = ({
  // extract props you need,
  block: { title, copy, url }, // <- already translated data>
  theme, // theme object
  windowDimensions: { width },
  serverUrl,
  getImage,
  components,
}) => {
  return (
    <View>
      <Text>{title}</Text>

      <Text>{author}</Text>

      <Text>{width}</Text>

      <Text>{serverUrl}</Text>

      <Text>{getImage && getImage(url, "PageExampleBlock")}</Text>

      <Text>{`registered components: ${JSON.stringify(
        Object.keys(components || {}),
        null,
        2
      )}`}</Text>

      <Text>{`theme: ${JSON.stringify(theme || {}, null, 2)}`}</Text>
    </View>
  );
};

PageExampleBlock.propTypes = {
  block: PropTypes.object,
  theme: PropTypes.object,
  windowDimensions: PropTypes.object,
  serverUrl: PropTypes.string,
  getImage: PropTypes.func,
};

export default PageExampleBlock;

and then make sure to register your component and pass it to TuiPage

import PageExampleBlock from "./path/to/PageExampleBlock";

const components = {
  // ... your other components,
  PageExampleBlock,
};

// <TuiPage components={components} />

API

• TuiPage

see above

• renderBlock use it if you need to render children blocks

• reducer reducer to add to your redux reducers

• translatedBlock the function that is used to translate content in the user langauge, advanced usage only

• unsupportedBlock this is the component that is rendered if a block has not been done/registered

• renderError helper function that renders an error in a ReactNative Text Wrapper, so you can worry about that error later.

• components Available basic components available out of the box, they can be overwritten.

  • PageHero
  • PageText
  • PageImage

Who do I talk to?

• [email protected]
• [email protected]
• [email protected]