react-native-device-context v1.0.1

react-native-device-context

Some simple context providers for react-native device api

Installation

$ npm install react-native-device-context --save

or use yarn

$ yarn add react-native-device-context

Usage

How to use providers

// Root app.js

import {
  NetInfoProvider,
  AppStateProvider,
  AccessibilityInfoProvider
} from "react-native-device-context";

const App = () => (
  <NetInfoProvider>
    <AppStateProvider>
      <AccessibilityInfoProvider>
        <App />
      </AccessibilityInfoProvider>
    </AppStateProvider>
  </NetInfoProvider>
);

List of providers/consumers

import {
  NetInfoContext,
  AppStateContext,
  AccessibilityInfoContext
} from "react-native-device-context";

// NetInfo exposes info about online/offline status
const NetInfo = () => (
  <NetInfoContext.Consumer>
    {({ connectionInfo }) => (
      <View>
        <Text>
          {/* connectionInfo type and effective type : https://facebook.github.io/react-native/docs/netinfo */}
          {connectionInfo.type === "none" ? "Not connected" : "Connected !"}
        </Text>
      </View>
    )}
  </NetInfoContext.Consumer>
);

// AppState tell you if the app is in the foreground or background
const AppState = () => (
  <AppStateContext.Consumer>
    {/* appState equal active, background or inactive */}
    {/* https://facebook.github.io/react-native/docs/appstate */}
    {({ appState }) => (
      <View>
        {appState === "active" && (
          <Text>Display this text only when the app is foregrounded</Text>
        )}
        {appState !== "active" && (
          <Text>The app is running in the background or is inactive</Text>
        )}
      </View>
    )}
  </AppStateContext.Consumer>
);

// AccessibilityInfo tell you if the device has a screen reader that is currently active or not
const AccessibilityInfo = () => (
  <AccessibilityInfoContext.Consumer>
    {({ screenReaderEnabled }) => (
      <View accessible={screenReaderEnabled}>
        {/* if screenReaderEnabled is true, the View will be an accessible element. */}
        <Text>Text 1</Text>
        <Text>Text 2</Text>
      </View>
    )}
  </AccessibilityInfoContext.Consumer>
);