We have prepared a (hidden) component that responds to orientation changes by dispatching an action to update the store, and we know how to code a component that will use the device information. Our main page could look as follows:

// Source file: src/adaptiveApp/main.js

/* @flow */

import React from "react";
import { View, StatusBar } from "react-native";

import { ConnectedAdaptiveView } from "./adaptiveView.connected";
import { ConnectedDeviceHandler } from "./deviceHandler.connected";

export class Main extends React.PureComponent<> {
    render() {
        return (
            <View>
                <StatusBar hidden />
                <ConnectedDeviceHandler />
                <ConnectedAdaptiveView />
            </View>
        );
    }
}

If I run the app on a (simulated) Nexus 5 device in portrait mode, we'd see something like the following:

Rotating the device would produce a different view:

In our design, components never use the Dimension API by themselves—since they get the device information from the store, testing the components' behavior for different devices and orientations could be done functionally, without needing to mock anything.