Understand the SDK built-in menu

React Native Ramp comes with a built in React Native Menu that allow you to use the basics Ramp API :

• Checking if there is currently a Ramp bundle installed
• Checking for available updates on the main distribution or any other distribution associated with the current target version
• Installing or uninstalling any available bundle update

Some more advanced functionalities are also available by activating the 🛠️ switch :

• Clear the list of available bundle updates
• Delete all previously downloaded bundles
• Download a bundle without installing it
• Mount a downloaded bundle
• Unmount a bundle without deleting it
• Delete a downloaded bundle

HOC

The built in menu comes as a Hight Order Component you can use to encapsulate your App component :

import { RampMenuHOC } from 'react-native-ramp';

const AppWithRampMenu = () => {
    return (
        <RampMenuHOC>
            <App />
        </RampMenuHOC>
    );
};

By default, and for test purpose, this HOC comes with a menu always visible on the top of your application :

• Pressing the settings ⚙️ button will display the Ramp menu,
• Pressing the close ❌ button will hide the menu until the next restart.

This behavior is completely configurable, and you can control the way you display the menu as you see fit, using or not the provided buttons. The HOC can be configured throught different properties :

• visible: boolean : property used to control if the menu is displayed true or not false,
• buttonsVisible: boolean : property used to control if the settings ⚙️ and close ❌ button are displayed true or not false,
• hideCloseButton: boolean : property used to control if the close ❌ button is displayed true or not false when both buttons are set as visible,
• onClose: () => void : callback function called when the menu close button is pressed. Used to control the state of the visible property.

Component

The Ramp menu is also available as a component, allowing you to integrate it in your current navigation structure.

import { RampMenu } from 'react-native-ramp';

const MyComponent = () => {
    return (
        <RampMenu />
    );
};

The only configurable property is :

• onClose: () => void : a callback function called when the menu close button is pressed.

Custom One

Both RampMenuHOC and RampMenu are using the methods of the RampAPI, therefore you can create your own custom menu from scratch to interact with bundles updates.

☝️ To learn more about these you can go to the Deep dive into the SDK documentation page.