Version 0.3.0, now using percentages. (#9)

* updated to use percentages

* remove unneeded width

* cleaned up code and updated readme

* bump version to 0.3.0

* updated changelog

Author: rundmt

CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.3.0
+- Updated to work with React Native 0.42. Internal components now rely on percentages.
+
 ## 0.2.2 (May 9, 2016)
 
 ### react-native-flexbox-grid

README.md

@@ -51,6 +51,10 @@ The main difference is you can specify the grid size. By default `<Row>` is a si
 
 [Documentation](https://github.com/rundmt/react-native-flexbox-grid/wiki/Documentation)
 
+#### Changes for 0.3.0
+
+React Native now supports percentages as of 0.42. All of our versions going forward will rely on percentages. It has much faster performance compared to what we did before when we relied on `onLayout`. The API for apps is the same. There should be no difference in expected output of your app.
+
 #### Changes for 0.2.0
 
 As of 0.2.0 Row will automatically wrap components. If you do not want components to automatically wrap you must specify `nowrap` in the row's prop.
@@ -59,6 +63,11 @@ As of 0.2.0 Row will automatically wrap components. If you do not want component
   <Row size={12} nowrap>
 ```
 
+## Known Issues
+
+For react-native 0.41 and earlier you muse use `[email protected]` or earlier.
+
+Since React Native before 0.41 and earlier doesn't support percentages we have to rely on using React Native's `onlayout` to pass the width of the parent to the child. This causes layouts to be a bit slow, because the child has to wait for the parent to layout and then rerender. This problem is resolved by using react native 0.42 and the `[email protected]` or later.
 
 
 ### What's working

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-flexbox-grid",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Grid system for react native based on flexbox grid's api",
   "main": "src/index.js",
   "scripts": {

src/components/Column.js

@@ -1,25 +1,53 @@
-'use strict';
-
 import React, {Component, PropTypes} from 'react';
 import {screenSize} from '../lib/ScreenSize';
 import {isHidden, getComponentWidth, getComponentOffset} from '../lib/helpers';
 import {View} from 'react-native';
 
-export default class Column extends Component {
-  render(){
-    if(isHidden(screenSize, this.props)){
+const Column = (props) => {
+    const {
+      sm,
+      smOffset,
+      smHidden,
+      md,
+      mdOffset,
+      mdHidden,
+      lg,
+      lgOffset,
+      lgHidden,
+      rowSize,
+      ...rest
+    } = props;
+
+    const gridProps = {
+      sm,
+      smOffset,
+      smHidden,
+      md,
+      mdOffset,
+      mdHidden,
+      lg,
+      lgOffset,
+      lgHidden,
+      rowSize
+    };
+
+    if(isHidden(screenSize, gridProps)){
       return null;
     } else {
       return (
         <View
-        {...this.props}
-        style={[this.props.style, {width: getComponentWidth(screenSize, this.props), flexDirection: 'column', marginLeft: getComponentOffset(screenSize, this.props)}]}>
-          {this.props.children}
+        {...rest}
+        style={[
+          props.style, {
+            width: getComponentWidth(screenSize, gridProps),
+            flexDirection: 'column',
+            marginLeft: getComponentOffset(screenSize, gridProps)
+          }]}>
+          {rest.children}
         </View>
       );
     }
-  }
-}
+};
 
 Column.propTypes = {
   sm: PropTypes.number,
@@ -31,5 +59,6 @@ Column.propTypes = {
   lg: PropTypes.number,
   lgOffset: PropTypes.number,
   lgHidden: PropTypes.bool,
-  width: PropTypes.number
 };
+
+export default Column;

src/components/Row.js

@@ -1,51 +1,33 @@
-'use strict';
-
 import React, {Component, PropTypes} from 'react';
 import {screenSize} from '../lib/ScreenSize';
 import {isHidden} from '../lib/helpers';
 import {View} from 'react-native';
 
-export default class Row extends Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      width: 0
-    };
-  }
-
-  _getWidth(res){
-    this.setState({width: res.nativeEvent.layout.width});
-  }
-
-  _cloneElements(){
-    // Check if state is updated before cloning. Causes layout to rerender less.
-    if(this.state.width > 0){
-      //if size doesn't exist or is 0 default to 12
-      const rowSize = this.props.size > 0 ? this.props.size : 12;
+const cloneElements = (props) => {
+    //if size doesn't exist or is 0 default to 12
+    const rowSize = props.size > 0 ? props.size : 12;
 
-      return React.Children.map(this.props.children, (element) => {
-        return React.cloneElement(element, {parentWidth: this.state.width, rowSize: rowSize});
-      });
-    }
-  }
+    return React.Children.map(props.children, (element) => {
+      return React.cloneElement(element, {rowSize: rowSize});
+    });
+}
 
-  render() {
-    if(isHidden(screenSize, this.props)){
+const Row = (props) => {
+  if(isHidden(screenSize, props)){
       return null;
     } else {
       return (
-        <View {...this.props}
-          onLayout={this._getWidth.bind(this)}
-          style={[this.props.style,
+        <View {...props}
+          style={[props.style,
                   { flexDirection: 'row',
-                    flexWrap: this.props.nowrap ? 'nowrap' : 'wrap',
-                    alignItems: this.props.alignItems,
-                    justifyContent: this.props.justifyContent}]}>
-            {this._cloneElements()}
+                    flexWrap: props.nowrap ? 'nowrap' : 'wrap',
+                    alignItems: props.alignItems,
+                    justifyContent: props.justifyContent
+                  }]}>
+            {cloneElements(props)}
         </View>
       );
     }
-  }
 }
 
 Row.propTypes = {
@@ -55,3 +37,5 @@ Row.propTypes = {
   mdHidden: PropTypes.bool,
   lgHidden: PropTypes.bool,
 };
+
+export default Row;

src/lib/helpers.js

@@ -1,4 +1,4 @@
-module.exports.isHidden = function(screenSize, props){
+const isHidden = (screenSize, props) => {
   switch(screenSize) {
     case 'small':
       return props.smHidden ? true : false;
@@ -11,31 +11,33 @@ module.exports.isHidden = function(screenSize, props){
   }
 };
 
-module.exports.getComponentWidth = function(screenSize, props){
+const toPercent = (num) => (num * 100) + '%';
+
+const getComponentWidth = (screenSize, props) => {
   switch(screenSize) {
     case 'small':
       if(props.sm){
-        return props.parentWidth * props.sm/props.rowSize;
+        return toPercent(props.sm/props.rowSize);
       } else {
         return props.parentWidth;
       }
       break;
     case 'medium':
       if(props.md){
-        return props.parentWidth * props.md/props.rowSize;
+        return toPercent(props.md/props.rowSize);
       } else if(props.sm){
-        return props.parentWidth * props.sm/props.rowSize;
+        return toPercent(props.sm/props.rowSize);
       } else {
         return props.parentWidth;
       }
       break;
     case 'large':
       if(props.lg){
-        return props.parentWidth * props.lg/props.rowSize;
+        return toPercent(props.lg/props.rowSize);
       } else if(props.md){
-        return props.parentWidth * props.md/props.rowSize;
+        return toPercent(props.md/props.rowSize);
       } else if(props.sm){
-        return props.parentWidth * props.sm/props.rowSize;
+        return toPercent(props.sm/props.rowSize);
       } else {
         return props.parentWidth;
       }
@@ -45,31 +47,31 @@ module.exports.getComponentWidth = function(screenSize, props){
   }
 };
 
-module.exports.getComponentOffset = function(screenSize, props){
+const getComponentOffset = (screenSize, props) => {
   switch(screenSize) {
     case 'small':
       if(props.smOffset){
-        return props.parentWidth * props.smOffset/props.rowSize;
+        return toPercent(props.smOffset/props.rowSize);
       } else {
         return 0;
       }
       break;
     case 'medium':
       if(props.mdOffset){
-        return props.parentWidth * props.mdOffset/props.rowSize;
+        return toPercent(props.mdOffset/props.rowSize);
       } else if(props.smOffset){
-        return props.parentWidth * props.smOffset/props.rowSize;
+        return toPercent(props.smOffset/props.rowSize);
       } else {
         return 0;
       }
       break;
     case 'large':
       if(props.lgOffset){
-        return props.parentWidth * props.lgOffset/props.rowSize;
+        return toPercent(props.lgOffset/props.rowSize);
       } else if(props.mdOffset){
-        return props.parentWidth * props.mdOffset/props.rowSize;
+        return toPercent(props.mdOffset/props.rowSize);
       } else if(props.smOffset){
-        return props.parentWidth * props.smOffset/props.rowSize;
+        return toPercent(props.smOffset/props.rowSize);
       } else {
         return 0;
       }
@@ -78,3 +80,5 @@ module.exports.getComponentOffset = function(screenSize, props){
       return 0;
   }
 };
+
+module.exports = {isHidden, getComponentWidth, getComponentOffset}

tests/getComponentOffset-specs.js

@@ -3,27 +3,27 @@ var assert = require('assert');
 
 describe('Get Component Width ', function() {
     it('it should get component width for small screen', function () {
-      assert.equal(320, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 4}));
-      assert.equal(160, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
-      assert.equal(80, getComponentOffset('small', {parentWidth: 320, rowSize: 12, smOffset: 3, mdOffset: 4, lgOffset: 4}));
-      assert.equal(0, getComponentOffset('small', {parentWidth: 768, rowSize: 12}));
+      assert.equal('100%', getComponentOffset('small', {rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 4}));
+      assert.equal('50%', getComponentOffset('small', {rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
+      assert.equal('25%', getComponentOffset('small', {rowSize: 12, smOffset: 3, mdOffset: 4, lgOffset: 4}));
+      assert.equal(0, getComponentOffset('small', {rowSize: 12}));
     });
 
     it('it should get component width for medium screen', function () {
-      assert.equal(768, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 4}));
-      assert.equal(384, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
-      assert.equal(192, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 3, mdOffset: 3, lgOffset: 4}));
-      assert.equal(768, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 12}));
-      assert.equal(384, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 12}));
-      assert.equal(192, getComponentOffset('medium', {parentWidth: 768, rowSize: 12, smOffset: 12, mdOffset: 3, lgOffset: 12}));
-      assert.equal(0, getComponentOffset('medium', {parentWidth: 768, rowSize: 12}));
+      assert.equal('100%', getComponentOffset('medium', {rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 4}));
+      assert.equal('50%', getComponentOffset('medium', {rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 4}));
+      assert.equal('25%', getComponentOffset('medium', {rowSize: 12, smOffset: 3, mdOffset: 3, lgOffset: 4}));
+      assert.equal('100%', getComponentOffset('medium', {rowSize: 12, smOffset: 12, mdOffset: 12, lgOffset: 12}));
+      assert.equal('50%', getComponentOffset('medium', {rowSize: 12, smOffset: 12, mdOffset: 6, lgOffset: 12}));
+      assert.equal('25%', getComponentOffset('medium', {rowSize: 12, smOffset: 12, mdOffset: 3, lgOffset: 12}));
+      assert.equal(0, getComponentOffset('medium', {rowSize: 12}));
     });
 
     it('it should get component width for large screen', function () {
-      assert.equal(1024, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 12, mdOffset: 12}));
-      assert.equal(1024, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 12}));
-      assert.equal(512, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 6}));
-      assert.equal(512, getComponentOffset('large', {parentWidth: 1024, rowSize: 12, smOffset: 6, mdOffset: 6}));
-      assert.equal(0, getComponentOffset('large', {parentWidth: 1024, rowSize: 12}));
+      assert.equal('100%', getComponentOffset('large', {rowSize: 12, smOffset: 12, mdOffset: 12}));
+      assert.equal('100%', getComponentOffset('large', {rowSize: 12, smOffset: 12}));
+      assert.equal('50%', getComponentOffset('large', {rowSize: 12, smOffset: 6, mdOffset: 6, lgOffset: 6}));
+      assert.equal('50%', getComponentOffset('large', {rowSize: 12, smOffset: 6, mdOffset: 6}));
+      assert.equal(0, getComponentOffset('large', {rowSize: 12}));
     });
 });

tests/getComponentWidth-specs.js

@@ -2,26 +2,27 @@ var getComponentWidth = require('../src/lib/helpers').getComponentWidth;
 var assert = require('assert');
 
 describe('Get Component Width ', function() {
-    it('it should get component width for small screen', function () {
-      assert.equal(320, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 12, md: 6, lg: 4}));
-      assert.equal(160, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 6, md: 6, lg: 4}));
-      assert.equal(80, getComponentWidth('small', {parentWidth: 320, rowSize: 12, sm: 3, md: 4, lg: 4}));
+    it('should get component width for small screen', function () {
+      assert.equal('100%', getComponentWidth('small', {rowSize: 12, sm: 12, md: 6, lg: 4}));
+      assert.equal('50%', getComponentWidth('small', {rowSize: 12, sm: 6, md: 6, lg: 4}));
+      assert.equal('25%', getComponentWidth('small', {rowSize: 12, sm: 3, md: 4, lg: 4}));
     });
 
-    it('it should get component width for medium screen', function () {
-      assert.equal(768, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 12, lg: 4}));
-      assert.equal(384, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 6, md: 6, lg: 4}));
-      assert.equal(192, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 3, md: 3, lg: 4}));
-      assert.equal(768, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 12, lg: 12}));
-      assert.equal(384, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 6, lg: 12}));
-      assert.equal(192, getComponentWidth('medium', {parentWidth: 768, rowSize: 12, sm: 12, md: 3, lg: 12}));
+    it('should get component width for medium screen', function () {
+      assert.equal('100%', getComponentWidth('medium', {rowSize: 12, sm: 12, md: 12, lg: 4}));
+      assert.equal('50%', getComponentWidth('medium', {rowSize: 12, sm: 6, md: 6, lg: 4}));
+      assert.equal('25%', getComponentWidth('medium', {rowSize: 12, sm: 3, md: 3, lg: 4}));
+      assert.equal('100%', getComponentWidth('medium', {rowSize: 12, sm: 12, md: 12, lg: 12}));
+      assert.equal('50%', getComponentWidth('medium', {rowSize: 12, sm: 12, md: 6, lg: 12}));
+      assert.equal('25%', getComponentWidth('medium', {rowSize: 12, sm: 12, md: 3, lg: 12}));
     });
 
-    it('it should get component width for large screen', function () {
-      assert.equal(1024, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 12, md: 12}));
-      assert.equal(1024, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 12}));
-      assert.equal(512, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 6, md: 6, lg: 6}));
-      assert.equal(512, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 6, md: 6}));
-      assert.equal(256, getComponentWidth('large', {parentWidth: 1024, rowSize: 12, sm: 3}));
+    it('should get component width for large screen', function () {
+      assert.equal('100%', getComponentWidth('large', {rowSize: 12, sm: 12, md: 12}));
+      assert.equal('100%', getComponentWidth('large', {rowSize: 12, sm: 12}));
+      assert.equal('50%', getComponentWidth('large', {rowSize: 12, sm: 6, md: 6, lg: 6}));
+      assert.equal('50%', getComponentWidth('large', {rowSize: 12, sm: 6, md: 6}));
+      assert.equal('25%', getComponentWidth('large', {rowSize: 12, sm: 3}));
+      assert.equal('100%', getComponentWidth('large', {rowSize: 12, sm: 3, lg: 12}));
     });
 });