Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

itemHeight didn't work #35

Open
zim-lee opened this issue Dec 17, 2017 · 9 comments · May be fixed by #45
Open

itemHeight didn't work #35

zim-lee opened this issue Dec 17, 2017 · 9 comments · May be fixed by #45

Comments

@zim-lee
Copy link

zim-lee commented Dec 17, 2017

I set itemHeight property, but it didn't work,
@harrisrobin
Copy link

@zim-lee we can't really help you if you don't even copy paste a snippet of your code.

@zim-lee
Copy link
Author

zim-lee commented Dec 18, 2017

@harrisrobin the example code can be review

@rikur
Copy link

rikur commented Jan 24, 2018

+1 itemHeight doesn't change a thing. I have both itemsPerRow and itemHeight set -- blocks are always squares.

@rikur
Copy link

rikur commented Jan 24, 2018

FYI: I was just being stupid. I used property blockWidth instead of itemWidth.

@cmeredith
Copy link

cmeredith commented Mar 12, 2018 •
edited
Loading

+1 this is not working for me either. I've set itemsPerRow which works perfectly but itemHeight doesn't do anything. @tqc any advice?

<SortableGrid
  itemsPerRow={2}
  itemHeight={50}
>

@reimertz reimertz linked a pull request Apr 9, 2018 that will close this issue
Open
@masary2989
Copy link

This is in ollija/react-native-sortable-grid/index.js

    console.log("Calculating grid size");
    `if (this.props.itemWidth && this.props.itemWidth < nativeEvent.layout.width) {`
      this.itemsPerRow = Math.floor(nativeEvent.layout.width / this.props.itemWidth)
      this.blockWidth = nativeEvent.layout.width / this.itemsPerRow
      this.blockHeight = this.props.itemHeight || this.blockWidth
    }
    else {
      this.blockWidth = nativeEvent.layout.width / this.itemsPerRow
      this.blockHeight = this.blockWidth
    }
    if (this.state.gridLayout != nativeEvent.layout) {
      this.setState({
        gridLayout: nativeEvent.layout,
        blockWidth: this.blockWidth,
        blockHeight: this.blockHeight
      })
    }
  }

First,
itemHeight dosen't work without itemWidth

Second,
In first Conditional branch,
if (this.props.itemWidth && this.props.itemWidth < nativeEvent.layout.width) {
It seems that your itemWidth must be smaller than nativeEvent.layout.width.

So you should add itemWidth and try various numbers on itemWidth.

          <SortableGrid
            blockTransitionDuration={200}
            activeBlockCenteringDuration={200}
            itemWidth={100}
            itemHeight={84}
            dragActivationTreshold={300}
            onDragRelease={ (itemOrder) => console.log("Drag was released, the blocks are in the following order: ", itemOrder) }
            onDragStart={ () => console.log("Some block is being dragged now!") } >

This is works on my app. Changed to a rectangle.
2018-06-12 14 41 15

@yc507
Copy link

yc507 commented Jul 19, 2018

The code on NPM is not the latest，
cope the index.js from GitHub it's worked

@bomei
Copy link

bomei commented Dec 20, 2018

@masary2989 's answer just save my life.

@SivaprakashJeyaraj
Copy link

Hi, Can you please update this code for dynamic width... Like 75% & 25% of elements in single row.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fixes itemHeight when itenWidth is not set reimertz/react-native-sortable-grid
8 participants
@rikur @harrisrobin @zim-lee @SivaprakashJeyaraj @bomei @yc507 @cmeredith @masary2989