idibidiart / react-native-responsive-grid Goto Github PK

There appears to be an issue in the source code

   // Column.js
   vAlign: PropTypes.oneOf(['space', 'distribute', 'middle', 'center', 'bottom', 'top']),
   fullWidtht: PropTypes.bool,

perhaps the following is correct,

   // Column.js
   vAlign: PropTypes.oneOf(['space', 'distribute', 'middle', 'center', 'bottom', 'top', 'stretch']),
   fullWidth: PropTypes.bool,

I've not used this grid in any project recently.

However, the fact that some of you are using it has prompted me to think more about extending its dynamics and patterns, with special thanks to @peacechen

Proposal to enable Nested Grids

The Grid component is responsible for encapsulating state and updating the children. Children can read state as well as setState on Grid allowing them to re-render the component tree. In addition, layout changes captured on the Grid component via the React Native onLayout event cause re-rendering of the Grid children with updated layout information.

The Grid component pattern was borrowed from a tweet by Tanner Lindsay and then I toyed with the idea of exposing lifecycle methods as props (that reference the lifecycle handlers) so that you can tell the Grid what to do when it mounts, unmounts, etc, just as Ryan Florence does in his Component component pattern (which is also based in part on what Tanner had originally shared) but realizing that when Grids are nested a child Grid may get unmounted in which case it will lose state, and when it loses state it will do everything you tell it to do in those life cycles starting from scratch, so if it had fetched some data in component did mount then that data will be gone (all state will be gone) when it's unmounted and it has to get that data again. More importantly, it will lose other state, like visual state. So I opted to keep the Grid as the root component and I had even introduced logic to prevent nesting of Grids (removed later)

To make a long story short, what I'm proposing is to store the state in an outer scope where each nested Grid has a lens into the part of global in-memory state that belongs to it. This way when a child Grid is unmounted it can check its state and rehydrate from it or updated it with live data when needed.

Just putting this out in case I'm missing something. I'll get to it at some point.

Also, happy to take PRs for any of the proposals.

Hello Guys

I'm having an issue in this grid library if my layout has navigation bar. When I scroll at the end of the page, the content is cut, but if I remove the navigation bar I can see the whole content of my layout.
I'm using nativebase navigation UI.

Has anyone encounter this?

Hello, I’m having setting the width of rows and the height of columns. I’d like for all columns to stretch to match the height of their containing row and for all rows to match the width of their containing column. It appears the height of a column is determined by content. I like to have the min-height set to match the height of its parent row

Hi guys,

Thanks for these examples, a grid with dynamic columns is a very important component for mobile apps. I have some questions with the second example (Reponsive Tiles for Universal Apps):

1. Is possible implement infinite scrolling like the FlatList component?
2. What's props.state.layout? because it's undefined and I'm getting issues with the props.state.layout.grid

Thanks in advance, Nicholls

Why are you using 'prop-types' instead of React.PropTypes?

"dependencies": {
	"react": "16.0.0-alpha.6",
	"react-native": "0.44.0",
	"react-native-responsive-grid": "^0.21.0"
}

@peacechen

<Row slot-before={someComponent} slot-after={anotherComponent}>
Some content...
</Row>

Applies to Col, too, and rule that Row can't have Row as child and Col can't have Col as child applies to slots, too.

It would place the output of someComponent before "Some content" and the output of anotherComponent after "Some content"

If "Some content" is null then content from "slot-before" component would be inserted at top and content from "slot-after" after component would be inserted below it. If only slot-after is given and "Some content" is null then content from slot-after would be inserted at top.

It does two things:

1. gives us something similar to CSS' ::before and ::after pseudo elements
2. allows us to break down large trees of Row/Col into sub-trees that can be composed as we like, i.e, modular construction and reuse

I understand you can do bullet no. 2 today by creating SomeComponent that contains a reusable Row/Col sub-tree but that prevents us from enforcing the Row/Col alternating nesting pattern (as child won't be of type Row or Col but of type SomeComponent so we can't check) and more importantly it obfuscate the consistent pattern of a tree of alternating Row/Col that makes it easy to infer layout from just looking the JSX (as opposed to having SomeComponent and SomeOtherComponent obfuscate/interrupt that visual pattern)

Definitely a visually oriented enhancement to reinforce the pattern and keep the JSX visually simple fro a cognitive point of view. Not introducing any new functionality.

I'm tempted to add it and play with it but would like your educated opinion as someone who is actually using this library.

Thank you :)

I am using

"react": "16.0.0-alpha.12",
"react-native-responsive-grid": "^0.32.4",

The following just crashes my CRNA (uses expo) setup:

      <Row>
        <Col size={20} offset={5}>
          <Text style={styles.text}>
            asdfas
          </Text>
        </Col>
        <Col size={20} offset={5}>
          <Text style={styles.text}>
            asdfasdfs
          </Text>
        </Col>
        <Col size={20} offset={5}>
          <Text style={styles.text}>
           asdfasdfasdfa
          </Text>
        </Col>
        <Col size={20} offset={5}>
          <Text style={styles.text}>
            adsfasdfasdfasd
          </Text>
        </Col>
      </Row>

Any idea? I am sorry but I am not able to supply much more info :|

I've come across situations where a flexible size is necessary. In the web world this is known as CSS Liquid Layout. Take this 3-column example:

|  Col A  |       Col B        |   Col C  |

The desire is to fix the widths for Columns A & C, and to let Col B take up the remaining space. The grid code might look something like:

<Row>
  <Col sizePoints ={100}>
    // A: Fixed size content
  </Col>
  <Col sizePoints ={*}>
    // B: Variable sized content
  </Col>
  <Col sizePoints ={80}>
    // C: Fixed size content
  </Col>
</Row>

Is this possible in the current code or will changes need to be made?

Hi
I am try'n to make a FlatList with react-native-responsive-grid to have items with diffrent sizes , but it doesn't work the way it must.
this is the code
`import React from 'react';

import {
View,
Text,
Image,
StyleSheet,
ScrollView,
ImageBackground,
FlatList,
Dimensions,
} from 'react-native';

import {Row, Column, ScreenInfo, Grid} from 'react-native-responsive-grid';

const screenWidth = Math.round(Dimensions.get('window').width);
const screenWidthL = screenWidth / 2.1;
// column width (relative to screen size)
const sizes = {sm: 100, md: 50, lg: 25, xl: 20};

const layout = (state) => {
const numCols = Math.floor(100 / sizes[ScreenInfo().mediaSize]);
const numRows = Math.ceil(data.length / numCols);
const colWidth = state.layout.grid ? screenWidthL : 0;

let layoutMatrix = [],
layoutCols = [];

for (let col = 0; col < numCols; col++) {
layoutMatrix.push([]);
for (let row = 0, i = col; row < numRows; row++, i += numCols) {
if (data[i])
layoutMatrix[col].push(
,
);
}
layoutCols.push(
<Column
key={col}
smSize={state.layout.grid ? sizes.sm : 0}
mdSize={state.layout.grid ? sizes.md : 0}
lgSize={state.layout.grid ? sizes.lg : 0}
xlSize={state.layout.grid ? sizes.xl : 0}>
{layoutMatrix[col]}
,
);
}

return layoutCols;
};
const dd = [];
const Item = (props) => {
if (!props.colWidth) return null;

dd.push({
key_: props.key,
id_: props.id,
urlimg: props.url,
height_: props.height,
width_: props.width,
margin_: props.margin,
colWidth_: props.colWidth,
});

return (
<FlatList
numColumns={2}
data={dd}
renderItem={({item, index}) => {
return (
<Row
style={{
backgroundColor: 'white',
margin: item.margin_,
borderRadius: 15,
borderWidth: 1,
borderColor: 'black',
height: item.height_,
}}>

<ImageBackground
source={{uri: item.urlimg}}
style={{
width: item.colWidth_,
height:
item.height_ +
((item.colWidth_ - item.width_) * item.height_) /
item.width_,
alignItems: 'center',
justifyContent: 'center',
}}>
<Text style={{fontSize: 48, marginTop: 5}}>{item.id_}



);
}}>
);
};

export const Home = () => (

{({state, setState}) => (
<Row fullHeight style={{backgroundColor: 'lightgray'}}>

{layout(state)}


)}

);

const data = [
{
url:
'https://i.pinimg.com/236x/d8/3a/9b/d83a9b6faf2e58ff895342242bd62214.jpg',
pixelHeight: screenWidthL + 30,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/61/35/93/613593ea3d5537c7f85f7365f0d72f45.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/52/7c/66/527c66879c1bbbeaf53938e467ee8927.jpg',
pixelHeight: screenWidthL + 10,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/16/8e/1e/168e1e2ba9e74baf37e1c64df576b79c.jpg',
pixelHeight: screenWidthL + 5,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/22/0f/01/220f016c154044a51abca097f7ecc4ea.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/14/3a/8c/143a8c283ecaecbf90058ac0f914a1ed.jpg',
pixelHeight: screenWidthL + 20,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/3d/65/6f/3d656f63189290a84d906b92d0d1565d.jpg',
pixelHeight: screenWidthL + 15,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/7a/2c/f2/7a2cf28357e37a95dfac3d273ef9cb0a.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/d8/3a/9b/d83a9b6faf2e58ff895342242bd62214.jpg',
pixelHeight: screenWidthL + 15,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/61/35/93/613593ea3d5537c7f85f7365f0d72f45.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/52/7c/66/527c66879c1bbbeaf53938e467ee8927.jpg',
pixelHeight: screenWidthL + 10,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/16/8e/1e/168e1e2ba9e74baf37e1c64df576b79c.jpg',
pixelHeight: screenWidthL + 5,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/22/0f/01/220f016c154044a51abca097f7ecc4ea.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/14/3a/8c/143a8c283ecaecbf90058ac0f914a1ed.jpg',
pixelHeight: screenWidthL + 20,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/3d/65/6f/3d656f63189290a84d906b92d0d1565d.jpg',
pixelHeight: screenWidthL + 15,
pixelWidth: screenWidthL,
},
{
url:
'https://i.pinimg.com/236x/7a/2c/f2/7a2cf28357e37a95dfac3d273ef9cb0a.jpg',
pixelHeight: screenWidthL,
pixelWidth: screenWidthL,
},
];
`
and

what I'm doing wrong?

hi!

sorry if this question is stupid, but I keep reading the word 'universal' does that mean this library can be used with react-native-web?

Is it tested for web-applications?

Thanks!

Topic typo: univcersal -> universal

Spotted at https://native.directory/updated/univcersal

When using the following code;

<Row>
    <Col style={{ backgroundColor: 'green' }} smSize={50} mdSize={33.333} lgSize={25}>
        <Text>First Column</Text>
    </Col>
    <Col style={{ backgroundColor: 'green' }} smSize={50} mdSize={33.333} lgSize={25}>
        <Text>Second Column</Text>
    </Col>
    <Col style={{ backgroundColor: 'green' }} smSize={50} mdSize={33.333} lgSize={25}>
        <Text>Third Column</Text>
    </Col>
    <Col style={{ backgroundColor: 'green' }} smSize={50} mdSize={33.333} lgSize={25}>
        <Text>Fourth Column</Text>
    </Col>
</Row>

The third and fourth column are not visible on iphone portrait, and the fourth column is not visible on iphone landscape.

I expect that this behaviour needs to be the same as the bootstrap way..?

The 'rtl' prop is passed down as an object, causing the children to fail to render.
https://github.com/idibidiart/react-native-responsive-grid/blob/master/src/components/Row.js#L44

It should be passed down as object in an array.

<Row> and <Col> are not respecting the props smHidden, mdHidden, lgHidden and xlHidden.

Inspecting the code, isHidden is looking for the props on the children, not the Row/Column itself.

Changes in React 16.x lifecycle can result in an exception during unmount. <Grid> calls cancelAnimationFrame in componentWillUnmount, however there is a race condition with either runAfterInteractions or requestAnimationFrame that allow setState() to run even though it was attempted to be canceled.

I'm testing a fix which sets an unmounted flag in componentWillUnmount. The callback checks for the flag and bails if it's set, closing the loop on the race condition.

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in Grid (at myComponent.js:...)

I have a background image that has a textual logo on it. When I set the image to stretch, the text gets stretched and looks terrible. My thinking is to export the background at several aspect ratios and have those loaded dynamically. I see that <Image> is supported. Is <ImageBackground> also supported?

This looks like an awesome library!

One thing I am wondering is how I would place an overlay over a certain row. Position absolute feels weird because I want it as an overlay for that specific row view.

Here is a simple example:

      <Row size={50} style={{backgroundColor: 'green'}}>
        <WebView source={{uri: "https://google.com"}} />
      </Row>

Say I want something on top of the webview, how would you go about it?

Thanks!

The grid has a red background. The 'LEGEND' starts the following component.
The page has flex:1 at the highest level. Flex is not specified anywhere else.

Mixing module.exports and import instead of require causes many problems. Better to just used a named export for each function

export const <function name>

Using <Row vAlign="bottom">...</Row> displays a warning:

Warning: Failed prop type: Invalid prop vAlign of value bottom supplied to Row, expected one of ["stretch","middle","right","left"].

On closer inspection of the /src/component/Row.js code, it has:
62: vAlign: PropTypes.oneOf(['stretch', 'middle', 'right', 'left']),

which doesn't follow the Docs:

vAlign may also be supplied as prop to Row to align the columns within it in the vertical direction. Possible values are: top, middle, bottom, baseline and stretch. Default is top.

Fix, update enum list to:
62: vAlign: PropTypes.oneOf(['top', 'middle', 'bottom', 'baseline', 'stretch']),

Some libraries may manipulate the view hierarchy under them and potentially cause a scenario where we have a Row inside another Row or a Col inside another Col. A DEV-mode warning will be logged and the child(ren) will be returned anyway.

Hi, the docs look great and very informative. But is there any example of how to do a photo grid of images of varying sizes? Like an image collage?

How to create list of images some like that

with images with different sizes?

my example: (https://snack.expo.io/BJBx0g0NX)

setScreenInfo always calculates values for mediaSize, etc. On a layout with hundreds of columns / rows, this causes redundant recalculations for every component.

A simple optimization would be to store the previous screen Dimensions and check whether it's changed since the last call. If not, use the previously calculated values. I'll submit a PR.

@idibidiart hi,

i want to use it with react-native-web,
but looks like have same error when render children.

Grid.js:47 Uncaught TypeError: e.persist is not a function
    at onLayout (Grid.js:47)
    at index.js:131
    at index.js:41

in here :

and i check the react-native docs,

https://facebook.github.io/react-native/docs/view.html#onlayout

{nativeEvent: { layout: {x, y, width, height}}}

on persist here.

could you tell me why use this func?

The hard-coded cutoff points aren't a good fit for our use case.
https://github.com/idibidiart/react-native-responsive-grid/blob/master/src/lib/ScreenInfo.js#L54

The code evaluates screen sizes <= 375 as small, 376-767 as medium, 768-1023 as large, etc. Medium tends to be the toughest, as it bleeds into the small range as well as large.
The logic is a bit inconsistent since SMALL_Width is the upper cutoff point for small, but MEDIUM_Width sits in the middle of medium. LARGE_Width sits on the lower end of large.

I propose making the cutoffs consistent (all on the lower end or the upper end) and adding them as props. The change would be backwards compatible of course. Would a PR be accepted?

Its not issue I am just asking for advice!

I have attached the screenshot, where you can see I have achieved responsive design, thank you. But problem that I am facing is with Text/Font. How you handle font scaling?

I'm curious, have you compared this library to other responsive-grid libraries, particularly "react-native-easy-grid"? It appears this system is much more comprehensive (according the api) but I am wondering to what end. Can you share a few notes on how they compare? Can you explain your motivation for writing this packaged instead of going with "easy-grid"?

I use FlatList render many items, FlatList wrapped by Row.

<Row fullWidth fullHeight style={{ backgroundColor: "#f3f3f3", padding: 20 }}>
                <FlatList
                    data={this.dataItems}
                    keyExtractor={(item, index) => item.id + ''}
                    renderItem={this.renderListItem}
                />
</Row>

When pop this screen will get a warning:

Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.

Please check the code for the Row component.

I check Row.js find warning code 78 line

this.setState({layoutTriggered: +new Date()})