Initial commit

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.vscode

README.md

@@ -0,0 +1,15 @@
+# react-native-on-layout
+
+Having to get a components rendered dimensions is a pretty common pattern in React Native and this is a higher order component that makes doing so easy.
+
+    import onLayout from 'react-native-on-layout'
+
+    const Comp = (props) => <Text>{ this.props.width } { this.props.height }</Text>
+    const CompOnLayout = onLayout(Comp)
+
+    // use in a render method
+    <CompOnLayout />
+
+The HOC will wrap your component in a `View` component in order to do `onLayout` so if you need to style that outer view you can use the `containerStyle` prop.
+
+    <CompOnLayout containerStyle={{ flex: 1 }} />

__snapshots__/index.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OnLayout renders with new width and height 1`] = `
+<View
+  onLayout={[Function]}
+  style={undefined}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    disabled={false}
+    ellipsizeMode="tail"
+  >
+    100
+     
+    100
+  </Text>
+</View>
+`;
+
+exports[`OnLayout renders with the initial values of 0 0 1`] = `
+<View
+  onLayout={[Function]}
+  style={undefined}
+>
+  <Text
+    accessible={true}
+    allowFontScaling={true}
+    disabled={false}
+    ellipsizeMode="tail"
+  >
+    0
+     
+    0
+  </Text>
+</View>
+`;

index.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { View } from 'react-native'
+import hoistStatics from 'hoist-non-react-statics'
+
+export default function onLayout (TheirComponent) {
+  class OnLayout extends Component {
+    constructor (props) {
+      super(props)
+      this.state = { dimensions: { width: 0, height: 0 }}
+    }
+
+    onLayout = (e) => {
+      this.setState({
+        dimensions: e.nativeEvent.layout
+      })
+    }
+
+    render () {
+      return (
+        <View style={this.props.containerStyle} onLayout={this.onLayout}>
+          <TheirComponent {...this.props} {...this.state.dimensions} />
+        </View>
+      )
+    }
+  }
+
+  return hoistStatics(OnLayout, TheirComponent)
+}

index.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Text } from 'react-native'
+import renderer from 'react-test-renderer'
+import onLayout from './index'
+
+const Comp = (props) => <Text>{ props.width } { props.height }</Text>
+const CompOnLayout = onLayout(Comp)
+
+describe('OnLayout', () => {
+  it('renders with the initial values of 0 0', () => {
+    let tree = renderer.create(
+      <CompOnLayout />
+    ).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
+  it('renders with new width and height', () => {
+    let render = renderer.create(
+      <CompOnLayout />
+    )
+
+    render.getInstance().onLayout({
+      nativeEvent: {
+        layout: { width: 100, height: 100 }
+      }
+    })
+
+    expect(render.toJSON()).toMatchSnapshot()
+  })
+})

jsconfig.json

@@ -0,0 +1,9 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "allowSyntheticDefaultImports": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "react-native-on-layout",
+  "version": "0.1.0",
+  "description": "A higher order component for React Native that allows easy access to a components rendered size",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest"
+  },
+  "author": "Matthew Sessions <shichongrui@gmail.com> (http://www.matthewsessions.com/)",
+  "license": "MIT",
+  "dependencies": {
+    "hoist-non-react-statics": "^2.0.0",
+    "react": "16.0.0-alpha.12",
+    "react-native": "0.45.1"
+  },
+  "devDependencies": {
+    "babel-jest": "^20.0.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "jest": "^20.0.4",
+    "react-test-renderer": "16.0.0-alpha.12"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}