react-native-anymo v0.1.5

react-native-anymo

A React Native library for Anymo

Installation

// npm
npm install react-native-anymo

// yarn
yarn add react-native-anymo

Usage

Register your app as early as possible within your app. This will usually be in your App.js file.

// App.js

import { AnymoProvider } from 'react-native-anymo';

export default function App() {
  return <AnymoProvider apiKey={'<API Key>'}>...</AnymoProvider>;
}

Use the prebuild components to insert the AnymoBanner component.

// HomeScreen.js

import { AnymoBanner } from 'react-native-anymo';

return (
  <View>
    <AnymoBanner />
    <FeedContent>
  </View>
);

If you would like to use a custom opener the lower level AnymoOpener component is available. It provides an openerContext which has title, subtitle and thumbnailUrl properties to construct the desired UI, as well as an onPress function which will open the Anymo Screen when called.

// HomeScreen.js

import { AnymoOpener } from 'react-native-anymo';

return (
  <View>
    <AnymoOpener>
      {({ openerContext, onPress }) => (
        <TouchableOpacity onPress={onPress} style={styles.openerItem}>
          <Image source={{ uri: openerContext.thumbnailUrl }}>
          <View>
            <Text>{openerContext.title}</Text>
            <Text>{openerContext.subtitle}</Text>
          </View>
        </TouchableOpacity>
      )}
    </AnymoOpener>
    <FeedContent>
  </View>
);

If you would like to know whether the Anymo content within your app is ready you can use the isReady hook to control your UI.

// App.js

import React, { useContext } from 'react';
import { AnymoContext } from 'react-native-anymo';

let { isReady } = useContext(AnymoContext);

// ...

return isReady ? children : null;

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT