Medium Gist

App.jsx

// Use the provider anywhere in your tree. The easiest example
// being the root.
export default () => (
  <DimensionProvider>
    <App />
  </DimensionProvider>
);

// Use the consumers in descendant nodes of the provider.
const DimensionAwareComponent () => (
  <View>
    <ScreenConsumer>
      {(width, height) => (
        <View>
          <Text>Width {width}</Text>
          <Text>Height {height}</Text>
        </View>
      )}
    </ScreenConsumer>
    <WindowConsumer>
      {(width, height) => (
        <View>
          <Text>Width {width}</Text>
          <Text>Height {height}</Text>
        </View>
      )}
    </WindowConsumer>
  </View>
);