├── LICENSE
├── README.md
├── package.json
├── react-native-square-view.js
└── screen-shot.png
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Shuangzuan He
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-native-square-view
2 | A square view component for react native.
3 |
4 | ## Screen Shot
5 |
6 | 
7 |
8 | ## Installation
9 |
10 | 1. Run `npm install react-native-square-view --save` in your project directory.
11 | 2. Add `var SquareView = require('react-native-square-view');` to your code.
12 |
13 | ## Usage
14 |
15 | ```javascript
16 | 'use strict';
17 |
18 | var React = require('react-native');
19 | var {
20 | AppRegistry,
21 | StyleSheet,
22 | Text,
23 | View,
24 | ScrollView
25 | } = React;
26 | var SquareView = require('react-native-square-view');
27 |
28 | var SquareViewDemo = React.createClass({
29 | render: function() {
30 | return (
31 |
32 | Parent w {'>'} h and direction is column:
33 |
34 |
35 | A
36 |
37 |
38 | A
39 |
40 |
41 |
42 | Parent w {'>'} h and direction is row:
43 |
44 |
45 | B
46 |
47 |
48 | B
49 |
50 |
51 | B
52 |
53 |
54 |
55 | Parent w {'<'} h and direction is column:
56 |
57 |
58 | C
59 |
60 |
61 | C
62 |
63 |
64 |
65 | Parent w {'<'} h and direction is row:
66 |
67 |
68 | D
69 |
70 |
71 | D
72 |
73 |
74 |
75 |
76 | );
77 | }
78 | });
79 |
80 | var styles = StyleSheet.create({
81 | container: {
82 | flex: 1
83 | }
84 | });
85 |
86 | AppRegistry.registerComponent('SquareViewDemo', () => SquareViewDemo);
87 | ```
88 |
89 | ---
90 |
91 | ## License
92 |
93 | Available under the MIT license. See the LICENSE file for more informatiion.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-square-view",
3 | "version": "0.0.3",
4 | "description": "A square view component for react native.",
5 | "main": "react-native-square-view.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/Shuangzuan/react-native-square-view.git"
12 | },
13 | "keywords": [
14 | "react-component",
15 | "react-native",
16 | "ios",
17 | "square",
18 | "view"
19 | ],
20 | "author": "Shuangzuan",
21 | "license": "MIT",
22 | "bugs": {
23 | "url": "https://github.com/Shuangzuan/react-native-square-view/issues"
24 | },
25 | "homepage": "https://github.com/Shuangzuan/react-native-square-view"
26 | }
27 |
--------------------------------------------------------------------------------
/react-native-square-view.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | var React = require('react-native');
4 |
5 | var {
6 | View
7 | } = React;
8 |
9 | var SquareView = React.createClass({
10 | getInitialState: function() {
11 | return {
12 | width: 0,
13 | height: 0,
14 | direction: 'row' // 'column' and 'row'
15 | };
16 | },
17 | render: function() {
18 | var square = (
19 | {
26 | var {width, height} = event.nativeEvent.layout;
27 | var sideLength = Math.max(width, height);
28 |
29 | if (sideLength) {
30 | this.setState({width: sideLength, height: sideLength});
31 | } else {
32 | this.setState({direction: 'column'});
33 | }
34 | }}>
35 | {this.props.children}
36 |
37 | );
38 |
39 | switch (this.state.direction) {
40 | case 'column': return square;
41 | case 'row': return ({square});
42 | default: return null;
43 | }
44 | }
45 | });
46 |
47 | module.exports = SquareView;
--------------------------------------------------------------------------------
/screen-shot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Shuangzuan/react-native-square-view/5b1e6cd58c71aada32072a6fb2741426b21d4370/screen-shot.png
--------------------------------------------------------------------------------