:left_right_arrow: with-view-layout-props

Part of a collection of Higher-Order Components for React, especially useful with Recompose.

Dynamically map View layout dimensions to props using onLayout() handler.

Install

yarn add @hocs/with-view-layout-props

Usage

withResizeObserverProps(
  mapStateToProps: (layoutDimensions: Object) => Object
  handlerName?: string
): HigherOrderComponent

Where:

• layoutDimensions – { width, height, x, y }
• handlerName – in some cases you might want to change it. 'onlayout' by default.

import React from 'react';
import { View } from 'react-native';
import withViewLayoutProps from '@hocs/with-view-layout-props';

const Demo = ({ width, height, x, y, onLayout, ...props }) => (
  <View onLayout={onLayout} {...props}>
    { JSON.stringify({ width, height, x, y }) }
  </View>
);

export default withViewLayoutProps(
  ({ width, height, x, y }) => ({ width, height, x, y })
)(Demo);

Related

• :left_right_arrow: with-resize-observer-props