geekyants / react-native-easy-grid Goto Github PK

View Code? Open in Web Editor NEW

2.2K 32.0 167.0 88 KB

Easy React Native Layout & Grid for the Dumb

License: Apache License 2.0

JavaScript 100.00%

react-native-easy-grid's Introduction

React Native Easy Grid 🐵

This is NOT-JUST-ANOTHER-GRID-LAYOUT library! We are trying to simplify flexbox with easier approach.

Installation

npm install react-native-easy-grid --save

Usage

Include the components

import { Col, Row, Grid } from "react-native-easy-grid";

1. Two columns (50% and 50%)

<Grid>
    <Col></Col>
    <Col></Col>
</Grid>

Note: If you don't assign the size property, it defaults to equal width (or height) with its siblings

2. Two rows

<Grid>
    <Row></Row>
    <Row></Row>
</Grid>

3. Two rows (75% and 25%)

<Grid>
    <Row size={75}></Row>
    <Row size={25}></Row>
</Grid>

This is exactly same as

<Grid>
    <Row size={3}></Row>
    <Row size={1}></Row>
</Grid>

Same concept applies to <Col />

4. Three columns (33.33% each)

<Grid>
    <Col></Col>
    <Col></Col>
    <Col></Col>
</Grid>

5. Three rows (50%, 25% and 25%)

<Grid>
    <Row size={2}></Row>
    <Row size={1}></Row>
    <Row size={1}></Row>
</Grid>

6. Nested Layout or Grid

1	2
	3

<Grid>
    <Col>
        <Text>1</Text>
    </Col>
    <Col>
        <Row>
            <Text>2</Text>
        </Row>
        <Row>
            <Text>3</Text>
        </Row>
    </Col>
</Grid>

7. Fixed width and fluid width combination

<Grid>
    <Col style={{ width: 40 }}>
        <Text>Fixed width</Text>
    </Col>
    <Col>
        <Text>Fluid width</Text>
    </Col>
</Grid>

8. Fixed height and fluid height combination

<Grid>
    <Row style={{ height: 40 }}>
        <Text>Fixed width</Text>
    </Row>
    <Row>
        <Text>Fluid width</Text>
    </Row>
</Grid>

Do you think anything could be simpler than that? This repo is part of our bigger project called NativeBase.io. Do check that!

Important note about usage with `<ScrollView />`

Note: If you're using <Row /> inside a <ScrollView />, the height of the component would be flexible according to the content, though you can always apply the height styling.

react-native-easy-grid's People

Contributors

Stargazers

Watchers

Forkers

supriyakalghatgi nubuck crash-- kfancy ismichaelni pamfilos duataud timrc hiroaka zhileichen femotizo ianfisk joshvar88 gentle-noah eki-ramdhani benestudio wcandillon jqn ujwal-setlur bdunn313 rborn brianjd nitindhar7 jimmyhmiller reactandnative raghucse2010 juliapetrishina veenedu menux eliamelfiorsoftexpert gabrielgomesferraz itsrifat bibinkonankunju carguo idibidiart cqululei marshuang123 houdzaiw caizx666 techdojo amitmotgi wuyangrui expertping peter-moon hamstercat pdavid0 abolger bang88 bhavinpatolia younatics juhq 2534290808 adrianhwang cpunion aaronfriel hsaka glennneiger javascript-ninja-123 mate38 mannycolon zianzhangzz chansuke evrimulgen jacquesbonet dgdavid nitin0331 albertoalopez codetay niteshoswal naytun winfieldco hugofelp geminiyellow torst fariswidhi lonewolfaka9 dawnmist suretarget bizmedia olympikesofts sopharat myphoenix168 fgiobergia mdcollab trendingtechnology wchuang20 fiv38 grean mskkhadar bright-spark vamshireddy08 jamalx31 kevinmartin33 kidken285 akhdaniel mlefrancois19 balitax muhammadsarim555 astw zuzpk

react-native-easy-grid's Issues

Screen content moved by Keyboard

Hello, I have a Issue with screen, only with Android version, when I click into inputs and Keyboard appears, all the screen make like 1 ROW and rearrange all of my content, Any ideas? I searched and I don't find anything

publish new version 0.1.2

StyleSheet.create object is not working

<Col style={{width: 15}}>-> works

const styles = StyleSheet.create({
  col: {
    width: 50,
 }
});
<Col style={styles.col}> ``` --> doesnt work

onPress isn't working

Hello,
I'm testing your library and trying to make a simple app with 4 clickable items. But when I put the onPress tag inside row or col component doesn't show anything.
My code is:

import React from 'react';
import { StyleSheet, Text, View, Alert, TouchableOpacity } from 'react-native';
import { Col, Row, Grid } from "react-native-easy-grid";

export default class App extends React.Component {
  render() {
    return (
      <Grid>
        <Col>
          <Col  onPress={ this.alerta} accessibilityLabel="White" accessibility={true} style={{backgroundColor: '#fff'}}></Col>
          <Row  onPress={ this.alerta} accessibilityLabel="Red" accessibility={true} style={{backgroundColor: 'red'}}></Row>
        </Col>
        <Col>
          <Row  onPress={ this.alerta} accessibilityLabel="Green" accessibility={true} style={{backgroundColor: '#2f5'}}></Row>
          <Row  onPress={ this.alerta} accessibilityLabel="Blue" accessibility={true} style={{backgroundColor: '#6ff'}}></Row>
        </Col>
      </Grid>
    );
  }
  alerta(){
       Alert.alert('testing');
  }
}

Why did 0.1.11 come after 0.1.13?

0.1.13 was done in May. 0.1.11 was done in July. Why? This is messing up the yarn package manager.

May 24: 52835af --> 0.1.13
July 8: 730f3ed --> 0.1.11

yarn fetches the latest which it thinks is 0.1.13, but that breaks with react-native 0.46. v0.1.11 came later and works with react-native 0.46

Alignement support ?

Hello, I saw in native-base docs that we can use this lib to align components :

No more worries about props of Flexbox such as alignItems, flexDirection, justifyContent, margin, padding, position, width etc.

However, I don't see anything related to alignement (like alignItems or justifyContent) to center component... Thanks for your help !

style doesn't apply when use with styled-components

import { Row } from 'react-native-easy-grid'

const StyledRow = styled(Row)`
   background-color: red; (Works!)
`

const StyledRow2 = styled(StyledRow)`
   background-color: yellow; (Doesn't work)
`

overriding the Row style doesn't work. and it works with other Component like View.

Grid not work as aspected if nested inside <Content>-Component

In the Docs (https://docs.nativebase.io/Components.html#Layout) I've found that was inside .

But this does not work as descriped in the Docs, because it looks like this:

If I adjust the code like this to get rows:

import React, {Component} from "react";
import {
    Text,
} from 'react-native';
import {Container, Header, Left, Content} from 'native-base';
import {Col, Row, Grid} from 'react-native-easy-grid';

export default class Login extends Component<{}> {
    render() {
        return (
            <Container >
                <Header ><Left ><Text >Headline</Text ></Left ></Header >
                <Content >
                    <Grid >
                        <Row size={1} style={{backgroundColor: '#635DB7'}} ><Text >No.1</Text ></Row >
                        <Row size={3} style={{backgroundColor: '#00CE9F'}} ><Text >No.2</Text ></Row >
                    </Grid >
                </Content >
            </Container >
        );
    }
}

It Looks like this:

Only if I remove the <Content>-Tag, it seems to show in the right way:

This seems to be an Bug!?, because the docs of nativebase.io suggest to have one <Content>-Tag at each Screen.

I've debugged it with react-devtools, and find out, that the first View inside the ScrollView has no flex-declaration.
If I add this like in the Screen, the two rows are shown in the right way:

Compatibility with react native 0.59

I'm unable to start rn app as it shows error related to computeProps.js Module does not exists!

Does it related to rn version which i had recently migrated to 0.59.4

Image background

how can i set image background when am using grid

Setup instructions should include class wrapper

i.e. export default class FlexboxGridLibrary extends Component

I have met a few people who assumed this library wasn't working because this wasn't included in the setup instructions. Might be obvious to some, but it isn't to many.

Flow Errors in Col/Grid/Row Components

[email protected]
[email protected]

Resolution: Add annotations, or remove //@flow from affected files

node_modules/react-native-easy-grid/Components/Col.js:25
 25:     setNativeProps(nativeProps) {
                        ^^^^^^^^^^^ parameter `nativeProps`. Missing annotation

node_modules/react-native-easy-grid/Components/Col.js:26
 26:       this._root.setNativeProps(nativeProps);
                ^^^^^ property `_root`. Property not found in
 26:       this._root.setNativeProps(nativeProps);
           ^^^^ ColumnNB

node_modules/react-native-easy-grid/Components/Col.js:34
 34:       ref={component => this._root = component}
                                  ^^^^^ property `_root`. Property not found in
 34:       ref={component => this._root = component}
                             ^^^^ ColumnNB

node_modules/react-native-easy-grid/Components/Col.js:44
 44:       ref={component => this._root = component}
                                  ^^^^^ property `_root`. Property not found in
 44:       ref={component => this._root = component}
                             ^^^^ ColumnNB

node_modules/react-native-easy-grid/Components/Grid.js:37
 37:     setNativeProps(nativeProps) {
                        ^^^^^^^^^^^ parameter `nativeProps`. Missing annotation

node_modules/react-native-easy-grid/Components/Grid.js:38
 38:       this._root.setNativeProps(nativeProps);
                ^^^^^ property `_root`. Property not found in
 38:       this._root.setNativeProps(nativeProps);
           ^^^^ GridNB

node_modules/react-native-easy-grid/Components/Grid.js:46
 46:       ref={component => this._root = component}
                                  ^^^^^ property `_root`. Property not found in
 46:       ref={component => this._root = component}
                             ^^^^ GridNB

node_modules/react-native-easy-grid/Components/Grid.js:56
 56:       ref={component => this._root = component}
                                  ^^^^^ property `_root`. Property not found in
 56:       ref={component => this._root = component}
                             ^^^^ GridNB

node_modules/react-native-easy-grid/Components/Row.js:26
 26:     setNativeProps(nativeProps) {
                        ^^^^^^^^^^^ parameter `nativeProps`. Missing annotation

node_modules/react-native-easy-grid/Components/Row.js:27
 27:       this._root.setNativeProps(nativeProps);
                ^^^^^ property `_root`. Property not found in
 27:       this._root.setNativeProps(nativeProps);
           ^^^^ RowNB

node_modules/react-native-easy-grid/Components/Row.js:35
 35:         ref={component => this._root = component}
                                    ^^^^^ property `_root`. Property not found in
 35:         ref={component => this._root = component}
                               ^^^^ RowNB

node_modules/react-native-easy-grid/Components/Row.js:45
 45:             ref={component => this._root = component}
                                        ^^^^^ property `_root`. Property not found in
 45:             ref={component => this._root = component}
                                   ^^^^ RowNB

Image not showing inside the col

<Grid>
            <Col> <Image source={{uri: Image_Http_URL}} /> </Col>
            <Col><Text>B</Text></Col>
            <Col><Text>B</Text></Col>
            <Col><Text>B</Text></Col>
        </Grid>

Image not showing inside column

Grid layout is not Displaying in 0.37 version

Hi guys,

I am running latest react native version 0.37 with easy grid installed
npm install react-native-easy-grid --save
But I am not able to see Grid layouts working as expected (as react-native 0.35)
react native version is "react-native": "0.37.0"
easy grid version is "react-native-easy-grid": "^0.1.6"

This sample code where i was testing the grid

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Col, Row, Grid } from "react-native-easy-grid";

export default class GridTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text>Start of Grid</Text>
        <Grid>
          <Row>
            <Col>
              <Text>First Row First Column</Text>
            </Col>
          </Row>
          <Row>
            <Col>
              <Text>Second Row Second Column</Text>
            </Col>
          </Row>
        </Grid>
        <Text>End of Grid</Text>
      </View>
    );
  }
}



AppRegistry.registerComponent('GridTest', () => GridTest);

Could you please help.

onLongPress event on Row tag

Hi there,

Have you planed to add this feature ?
It will be great especially to bind a remove action on a row.

Thanks.

row height

is it possible to fit the height based on the content instead of static height?

Can't make the grid with 100% height, seems a bug

GeekyAnts/NativeBase#2142

Cannot find module 'react/lib/ReactNativePropRegistry' from computeProps.js

with react 15.4.1

var ReactNativePropRegistry = require('ReactNativePropRegistry'); seems to work

how to use it with native-base ?

It doesn't work.

import {Container, Header, Content, Footer, Title} from 'native-base';
import { Col, Row, Grid } from "react-native-easy-grid";

<Container>
    <Grid>
          <Col style={{ backgroundColor: 'red' }}></Col>
          <Col style={{ backgroundColor: 'blue' }}></Col>
    </Grid>
</Container>

run-android stuck on starting: intent

After installing and importing react-native-easy-grid 0.1.17 running:
react-native run-android
is now stuck at
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

The Grid row layout does not show content properly

Neither the screen was divided in 4:1 horizontally nor the content is shown properly. See the screenshot of code and result on android simulator attached.

Surprising behaviour when nesting Row in Row

When nesting Row in Row, they are aligned as columns:

<Grid>
  <Row size={80}>
    <Row>  {/* these 3 inner Rows will appear as columns */}
    </Row>
    <Row>
    </Row>
    <Row>
    </Row
  </Row>
  <Row size={20>
  </Row>
</Grid>

I assume this is due to the underlying flexbox implementation. I also assume that columns nested in columns will behave as rows. (Not verified).

So, I know you can simply specify all your rows at the same level of nesting, but what if you have a component which you know will occupy 80% height, and then inside an unrelated component, you want to specify customised Rows? Child components should not need to be aware of the parent component dimensions.

Integration Test Issue

This is a test one!

My text doesn't wrap to start a new line when text length exceeds parent in Row

Why doesn't my flexWrap work? My text doesn't wrap to start a new line when text length exceeds parent.

ex. Text is supposed to show "No activity on easy chair for 1 hour or soooo"

(Text is a component from native-base)

Result: only shows No activity on easy chair for 1 hour

  alertCardItem: {
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10,
    backgroundColor: '#fff'
  }

 <CardItem style={styles.alertCardItem}>
  <Grid>
     <Col>
       <Image style={styles.warning} source={Images.warning} />
     </Col>
     <Col size={3}>
         <Row><Text style={{flex: 1}}>Activity Alert</Text></Row>
         <Row><Text style={{flex: 1, flexWrap: 'wrap'}}>No activity on easy chair for 1 hour or soooo</Text></Row>
      </Col>
   </Grid>
 </CardItem>

unable to find module

/node_modules/react-native-easy-grid/Components/Row.js: Unable to find this module in its module map or any of the node_modules directories under /Volumes/node_modules/multiplier and its parent directories

Add typescript support

I wasn't able to find any typings for this library. I hope to see Typescript support for this library.

ReactNativePropRegistry not found for react-native >= 0.44

Hey!

I'm currently trying to get this running with react-native >= 0.44. Unfortunately the imports seem to be wrong:

error: bundling: UnableToResolveError: Unable to resolve module `react-native/Libraries/Renderer/shims/ReactNativePropRegistry` from `my-project/node_modules/react-native-easy-grid/Utils/computeProps.js`: Module does not exist in the module map or in these directories:
  my-project/node_modules/react-native/Libraries/Renderer/shims
,   my-project/node_modules/react-native/Libraries/Renderer/shims

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.
    at ResolutionRequest._resolveNodeDependency (my-project/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:394:11)
    at ResolutionRequest.resolveDependency (my-project/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:141:29)
    at dependencyNames.map.name (my-project/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:59)
    at Array.map (native)
    at ResolutionRequest.resolveModuleDependencies (my-project/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:145:42)
    at Promise.resolve.then (my-project/node_modules/react-native/packager/src/node-haste/DependencyGraph/ResolutionRequest.js:169:21)
    at process._tickCallback (internal/process/next_tick.js:103:7)

I suspect this is highly related to GeekyAnts/NativeBase#307? If yes I guess those fixes should be applied here also? I'd be willing to contribute those but wanted to make sure first that is actually something both wanted & needed.

Thanks
Tim

<Row size={-1}>

This isn't an issue per se, just an observation I would like clarification on.

If I use <Row size={-1}> then the height of the row is set to the minimum required to show the content. If size is set to 0 then there is additional padding. Using -1 is very useful but is it safe to use?

The same behaviour occurs when using <Col size={-1}>

Thanks,

Railton.

Too Slow if Row Cols increases in numbers.

Hi There,

After generating around 100 rows and 10 cols, performance of this grid view decreases to lowest. It takes around 30-40 seconds to load the page. Please note my data is present locally.

Please give your inputs.

0.1.9 is broken

version 0.1.9 severely breaks under react-native 0.44.0. Haven't tried other react-native versions.

v0.1.8 works. This took me 4 hours in the wee hours of my birthday to hunt down :-(

My package.json had

"react-native-easy-grid": "^0.1.8"

So when I reinstalled node_modules, it automatically got 0.1.9 since it was a minor version upgrade. A minor version bump should not cause this kind of breakage.

Screenshot attached

Column width can't be set through StyleSheet

This works:

<Col style={ { width: 10 } } />

And this doesn't:

const styles = StyleSheet.create( {
    gutter: { width: 10 }
} )

<Col style={ styles.gutter } />

Width in styles seems not work, any idea?


import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { Col, Row, Grid } from 'react-native-easy-grid';
// import randomColor from 'randomcolor';

export default class Xxfusi_offical extends Component {

  render() {
    return (
      <View style={ styles.container }>
        <Grid  style={ styles.grid } >
          <Col style={ styles.left } />
          <Col style={ styles.mid } />
          <Col style={ styles.right } />
        </Grid>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flex: 1
  },
  grid: {

  },
  left: {
    width: 400,
    backgroundColor: '#f00'
  },
  mid: {
    backgroundColor: '#0f0'
  },
  right: {
    backgroundColor: '#00f'
  }
});

Columns do not wrap

When I have specified that a width for a grid and row but the total size of the columns exceeds that of the row, the columns do not wrap to the next line.

E.g.
I have 4 columns of size 4 (total 16), I would expect the last column to wrap onto the next line. At the moment, the Grid resizes to fit all into one row.

<Grid size={12}>
   <Row size={12}>
      <Col size={4}>
           ....
     </Col>
     <Col size={4}>
           ....
     </Col>
     <Col size={4}>
           ....
     </Col>
     <Col size={4}>
           ....
     </Col>
   </Row>
</Grid>

Anyway to make the grid square?

I want to make a calendar. So I want each row to have 7 columns and I want the columns to be the same height as they are wide. My app will run on iPhones and iPads so it needs to scale. Is that possible?

Dynamic Grid View not working

Hi , I m trying to create dynamic grid but its not working .I have done things correct logically but still its not woking .
Request you to please look into this



import React, { Component  } from 'react';

import { Image } from 'react-native';

import { Container, Content,Header, View, DeckSwiper, Card, CardItem, Thumbnail, Text, Left, Body, Icon } from 'native-base';

import { Col, Row, Grid } from "react-native-easy-grid";


const cards = [
  {
    id:1,
    text: 'Card One',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {  id:2,
    text: 'Card Two',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:3,
    text: 'Card Three',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:4,
    text: 'Card Four',
    name: 'Four',
    image: require('../images/icons.png'),
  },
{    id:5,
    text: 'Card One1',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {
     id:6,
    text: 'Card Two1',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:7,
    text: 'Card Three1',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:8,
    text: 'Card Four1',
    name: 'Four',
    image: require('../images/icons.png'),
  },
{
     id:9,
    text: 'Card One2',
    name: 'One',
    image: require('../images/icons.png'),
  },
  {
     id:10,
    text: 'Card Two2',
    name: 'Two',
    image: require('../images/icons.png'),
  },
  {
     id:11,
    text: 'Card Three2',
    name: 'Three',
    image: require('../images/icons.png'),
  },
  {
     id:12,
    text: 'Card Four2',
    name: 'Four',
    image: require('../images/icons.png'),
  },

];

export default class Tab2 extends Component {

  render() {

const gridItems = [] ;
const rowItem  = [];

  for(let i = 1; i < cards.length; i++){
    if(i%4 != 0){
      let j=i-1;
      rowItem.push(<CardItem style={{flexGrow: 1}}>
                  <Left>
                    <Thumbnail source={cards[j].image} />
                    <Body>
                      <Text>{cards[j].text}</Text>
                      <Text note>NativeBase</Text>
                    </Body>
                  </Left>
                </CardItem > 
                );
     
    }else if(i%4 == 0){
      gridItems.push(<Row style={{flex: 1}}>  { rowItem } </Row>);
      rowItem.splice(0,rowItem.length);

    }
    
  }

    return (
      <Container>
      <Content>
    <Grid>
    {gridItems}
    </Grid>

   
 </Content>

      </Container>
    );
  }
}

Cannot place Col in Row

Nothing gets displayed when I render with this hierarchy: Grid > Row > Col , whereas my Grid content appears on Grid > Col > Row.
I assume this is a bug, as I saw nothing forbidding it (neither did I see it was supposed to work though).

If this is intended, how can I make make a grid with 3 elements on the 1st line and 4 on the 2nd ?

Height style ignored if passed using StyleSheet

Hi,

When I define a Row height using StyleSheet, it is not taken into account in the current implementation. This line handle the flex property: https://github.com/GeekyAnts/react-native-easy-grid/blob/master/Components/Row.js#L14.
My guess is that checking props.style.height is not sufficient. However I am very new to React Native so I could not say how StyleSheet interact with the style prop.

Passing the height directly in the style props does work however.

Working example:

<Row style={{ height: "auto" }}>
    ...
 </Row>

Not working example:

const styles = StyleSheet.create({ row: { height: "auto" } })
...
<Row style={styles.row}>
  ...
</Row>

It can't pass the flow check?

Hi, This repo can't pass the flow check, could you fix this issue?

StyleSheetRegistry renamed to ReactNativePropRegistry (as of 0.24)

Thank you for this lib very lightweight and easy to use!

Any chance to update StyleSheetRegistry to ReactNativePropRegistry in the Util class?

Failing react packager after travis addition

This commit 82526c8 gives an error in react packager when using this library @Jasbir23

It complaines about duplicate module name with react and react-native.
This issue kinda explaines it: aksonov/react-native-router-flux#1809

So i believe after you added react-native and react as dependencies for your travis tests, it breaks now for simple usage of the library.

This might be solved with removing dependencies that is just for tests, and added them to devDependencies rather than the dependencies object.

Can't wrap Col/Row ?

I'm trying to wrap Col and Row in another component, so I can customize it with some defaults (for example, have all rows have a padding).

However, something as simple as this:

export class Row extends React.Component{

    render(){
        return <_Row {...this.props}>{this.props.children}</_Row>
    }
}

Renders the component totally useless (it gets rendered completely wrong). Is there any implementation detail preventing this?

How would I add some default styles to my Row/Cols?

Thanks.

Row layout fixed height + fluid height not working

<Grid>
  <Row style={{ height: 20 }}></Row>
  <Row style={{ backgroundColor: 'red' }}></Row>
</Grid>

This code doesn't create the desired result of having a fixed height row with a fluid height one. Instead it ignores the height and layouts the rows out with equal heights. If I replace Row with Col and height with width it works.

Cannot center <Col> horizontally.

Hi,

I'm trying to center content inside Col horizontally and it doesn't work.
I've read this alignment issue and this stackoverflow post and none of them works for me 😭😭

I want to horizontally center those two <Row>s inside the first <Col>.

Here is my code.

<Container>
    <Content contentContainerStyle={{flex: 1}}>
        <Grid style={{justifyContent: 'center'}}>
            <Col>
                <Row size={2}>
                    <Col>
                        <Text> Sign up options </Text>
                    </Col>
                </Row>
                <Row size={2}>
                    <Col>
                        <Button iconLeft danger>
                            <Icon name="logo-google" />
                            <Text> With Google </Text>
                        </Button>
                    </Col>
                </Row>
                <Row size={2}>
                    <Col>
                        <Button iconLeft bordered dark>
                            <Icon name="sms" type="MaterialIcons" />
                            <Text> With SMS </Text>
                        </Button>
                    </Col>
                </Row>
            </Col>
        </Grid>
    </Content>
</Container>

Please note that alignItems works as expected (centering Col vertically) but none works horizontally for me.

Please help,

Thanks.

Android Only - Problem with nesting Grids in TouchableOpacity

This does not work on Android. If you remove the TouchableOpacity it displays correctly.

<View>
    <Grid>
        <Row>
            <TouchableOpacity>
                <Gird>
                <Text>Test</Text>
                <Grid>
            </TouchableOpacity>
        </Row>
    </Grid>
</View>

This is the workaround I am using.

<View>
    <Grid>
        <TouchableOpacity>
            <Row>
                <Grid>
                <Text>Test</Text>
                <Grid>
            </Row>
        </TouchableOpacity>
    </Grid>
</View>

Sizing issue with NativeBase & react-native-router-flux v4 beta

Using native-base and react-native-router-flux, my grid is not sizing to full page height, resulting in rows that do not equally split the page height.

Has anyone else experienced this issue?

My app markup is essentially the following:

<Root>
    <Container>
        <Header>
            <Left>
                <Button
                    transparent
                    onPress={this.showActionSheet.bind(this)}
                >
                    <Icon name="ios-menu" />
                </Button>
            </Left>
            <Body>
                <Title>My App</Title>
            </Body>
            <Right />
        </Header>
        <Router>
          <Scene key="root" navigationBarStyle={{ height: 48, paddingTop: 0 }}>
            <Scene
              key="login"
              component={Login}
              title="Log In"
              initial={true}
            />
            <Scene key="register" component={Register} title="Register" />
            <Scene key="home" component={Home} />
          </Scene>
        </Router>
    </Container>
</Root>

My login component is essentially the following:

<Content padder>
    <Grid>
        <Row style={{ marginBottom: 64 }}>
            <Col>
                <Form>
                    <Item>
                        <Input placeholder="Email" />
                    </Item>
                    <Item>
                        <Input placeholder="Password" />
                    </Item>
                </Form>
            </Col>
        </Row>
        <Row style={{ height: 32 }}>
            <Col>
                <Button full>
                    <Text>Register</Text>
                </Button>
            </Col>
            <Col style={{ width: 16 }} />
            <Col>
                <Button full success>
                    <Text>Login</Text>
                </Button>
            </Col>
        </Row>
    </Grid>
</Content>

Fixed width and fluid width combination

Hello,

I'm developing a ReactNative application with NativeBase.io and I have a problem on fixed width and fluid width combination with the grid system.

There is my component tree

<Container>
  <Header />
  <Grid>
    <Col style={{ with: 140 }}/> (as Menu)
    <Col /> (as Content)

What I want :
|------|------------------------------------|

I would like my menu have pixel fixed size (like 140px) and my Content automatically adapt itself.

Actually, when I set the Menu width to pixel, all my Col goes to 50%/50% width.

What I have :
|---------------------|---------------------|

Do you have any suggestions ?

Nolan

Compatibility with React-Native 0.56

error: bundling failed: Error: Unable to resolve module react-native/Libraries/Renderer/shims/ReactNativePropRegistry from /ProjectName/node_modules/react-native-easy-grid/Utils/computeProps.js: Module react-native/Libraries/Renderer/shims/ReactNativePropRegistry does not exist in the Haste module map

ReactNativePropRegistry no more exists after 0.56.0
facebook/react-native@a8e3c7f

Mapping Columns: Using fixed number of columns

Here's what I want: create 3 columns in a row and then a new row. I've tried to use size={3} as Column property. That doesn't work. What is a better solution?

<Content>
  <Grid>
    {topics.map((prop, key) => {
      return (
          <Col style={{ backgroundColor: prop.color, height: 200 }} size={3}>
            <Text style={{ color: "white" }}>
              {prop.name} {key}
            </Text>
          </Col>
      );
    })}
  </Grid>
</Content>

Trying to replicate the examples using the size prop and nothing is displayed to the screen

I am trying to replicate the examples on the repo with the following code:

class StartScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
            <Grid>
                <Row size={75} style={{ backgroundColor: '#D954D7' }} />
                <Row size={25} style={{ backgroundColor: '#D93735' }} />
            </Grid>
        </Content>
      </Container>
    );
  }
}

export default StartScreen;

The above code returns a blank screen. I know it's probably a misunderstanding on my side as to how the size prop works.

The following renders to screen:

class StartScreen extends Component {
  render() {
    return (
      <Container>
        <Content>
            <Grid>
                <Row style={{ backgroundColor: '#D954D7', height: 200 }} />
                <Row style={{ backgroundColor: '#D93735', height: 200 }} />
            </Grid>
        </Content>
      </Container>
    );
  }
}

Style prop does not accept array of styles

When passing an array of style objects as the style prop to a Row or Column as per https://facebook.github.io/react-native/releases/next/docs/style.html, the styles are not applied.

geekyants / react-native-easy-grid Goto Github PK

react-native-easy-grid's Introduction

React Native Easy Grid 🐵

Installation

Usage

Include the components

1. Two columns (50% and 50%)

2. Two rows

3. Two rows (75% and 25%)

4. Three columns (33.33% each)

5. Three rows (50%, 25% and 25%)

6. Nested Layout or Grid

7. Fixed width and fluid width combination

8. Fixed height and fluid height combination

Important note about usage with <ScrollView />

react-native-easy-grid's People

Contributors

Stargazers

Watchers

Forkers

react-native-easy-grid's Issues

Recommend Projects

Recommend Topics

Recommend Org

Important note about usage with `<ScrollView />`