Comments (9)
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.
from react-native-sortable-grid.
@zim-lee we can't really help you if you don't even copy paste a snippet of your code.
from react-native-sortable-grid.
@harrisrobin the example code can be review
from react-native-sortable-grid.
+1 itemHeight doesn't change a thing. I have both itemsPerRow and itemHeight set -- blocks are always squares.
from react-native-sortable-grid.
FYI: I was just being stupid. I used property blockWidth instead of itemWidth.
from react-native-sortable-grid.
+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}
>
from react-native-sortable-grid.
The code on NPM is not the latest,
cope the index.js from GitHub it's worked
from react-native-sortable-grid.
@masary2989 's answer just save my life.
from react-native-sortable-grid.
Hi, Can you please update this code for dynamic width... Like 75% & 25% of elements in single row.
from react-native-sortable-grid.
Related Issues (20)
- Drag and Drop fails and the Grid collapses. HOT 3
- Drag icons in a long ScrollView with autoscroll HOT 2
- Still supported? HOT 3
- onDragStart not working with delete functionality?
- How to make draggable item clickable?
- want some inactive items not to be sorted, inactive property is not working HOT 5
- Can i Add outside item to items inside grid? HOT 1
- Android performance is sluggish and unusable HOT 1
- different quantities of items in different rows HOT 9
- how to slide item to left or right and delete
- Is there an example where item values change on reorder? HOT 1
- Add an item HOT 1
- inactive props doesn't work for me HOT 3
- how to set inactive = false. to it's child HOT 5
- Deprecated Lifecycle Method .....Warning: componentWillReceiveProps has been renamed... HOT 1
- scroll grid not work
- When will the latest commit be merged into master?
- restrict to one movement
- Not working with TouchableOpacity/Pressable
- Customize number of items in each column/row
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-sortable-grid.