I'm working on a React Native project where I want to implement a layout that has auto placing functionality while fitting all the children as tightly as possible. It just happens that CSS has a wonderful feature that allows grids to autoplace children, sadly React Native doesn't support CSS grid. I've seen a variety of React packages that seem to do this, but there's no implementation for React Native. Examples for React are:
react-grid-layout, Muuri, bin-packing-grid.
I have managed to get the items sorted using a binary packing algorithm, but the visualization is still an issue I can't seem to get working.
My question: is there a package for React Native that can do this or is there an algorithm for the visualization of a binary packed item array that works on React Native?
The grid should be able to auto place children as following. https://i.ibb.co/H72mXRG/Whats-App-Image-2022-07-09-at-2-05-23-AM.jpg
I also thought about using a grid that would work with coordinates (X and Y position), but I couldn't find a working example for React Native. This would also be a viable option.
Any clues in the right direction would be much appreciated.
I have finally found a package that does this. The name is autoresponsive-react-native.
Docs, Github. Little outdated, but works perfectly. No Typescript support though.
This package (autoresponsive-react-native) supports platform independent handling for grids. Since the core functionality is independent from the visualization, it works on multiple platforms
Related
Background story (you can skip to question)
As a begginer (full-stack, but about 8 years behind) I'm struggling with deciding what to learn.
Vue and Nuxt.js are great to understand, but as a designer, I really miss the option to use Framer Motion. Also the fact that I can't use Tailwind UI (Headless UI) with Nuxt (as of right now) since Nuxt still uses Vue 2.
As I worked on my app I felt that I would have much better online support with React, specifically with Next.js to make the learning curve easier. The overall community is bigger and there are much more tutorials. But I discovered that Nuxt used some things that Next is missing (probably?) — like auto registering components.
The question:
I really miss not caring about writing an import path to each component I use.
Nuxt.js did this automatically. Is there something similar in Nuxt.js?
I could also nest them in subfolders like this:
/components/Point/Section/Table/Row.vue
and put them in code like: <PointSectionTableRow />
Thanks Estus for the comment that IDE's handle autoimport. I discovered VS Code Auto import plugin that can autoimport components, icons etc with just a tooltip click. Very handy!
What are the options available to export Sketch for Mac UX designs to ReactJS components to be used by the coding team.
From those options, what are the recommended ones, pros and cons of each?
We need something that can automate the coding work of ReactJs components, supports flex and offer support for web applications as well as react-native code.
Our scenario is a SaaS application where we do everything coding (html, css and js) and we want to better develop the UX using Sketch and then generate base code for our UX components to be worked by our coding team.
We have developed the web and app for years and also have the same question.
We have sketch design and it indeed takes much time to code design into web and app.
Currently, the best tool to mitigate the pain is handoff tools which improve productivity and communication overhead.
There're few tools such as Anima, it's good for the prototyping but not easy to adopt for code modification and integration. Finally, we find out the key to the quality code is the right structure of the group and layouts which is not easy to represent in the Sketch design file. So our solution leaves the key decisions for users to decide their group structure for responsive behaviors and we provide an intuitive and fast way to create react components. In our early experiments, it would much faster than manual coding without sacrificing the code quality.
You can checkout the export code via github
https://github.com/px2code/pxCode-Sketch-to-React-Example1
or directly check the codesandbox to preview and edit the code via
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
This is more like a 2 step process. First you need to import the sketch file, which you can do so with Desech Studio. This will create an html structure where elements are positioned with css grids, not position absolute. But you will still need to make some changes to the margins and sizes to match your design.
Then you can install and enable the react plugin into your project and then export the code as react code. Check the github repo for more details.
But this is only for web react, not react-native. Maybe you can make your own plugin, based on the existing react web one, but I haven't tried it though.
So pros, and cons. The pros are that it automates and speeds up things. The cons are that the automation requires some work from you.
i'm making an app for restaurant reservation and i made a fabric.js canvas that allows you to select a certain table, also the admin is capable of changing the tables and allocating them however i don't know how to integrate Fabric js with react native?
I know this question is two years old but I thought I'd add an answer for anyone else who may be looking at integrating fabric.js with react native (as I currently am).
Unfortunately, as fabric.js depends on a DOM (Document Object Model) & BOM (Browser Object Model) being present, it'll only work in a node or web browser environment; as there isn't any implementation or polyfill in any existing react native canvas library for these global objects. You can read more information about this on the following github issue.
Your other option is using a web view component to render a webpage, but the downside to this is that it doesn't offer quite the same experience as a native app.
My background is from mobile development and I'm quite new to Javascript so I'm quite confused about the following.
I'm trying to build a JS module that handles a list of data and displays them, so I'm looking for something like JS ListView with the following features:
it accepts an array of objects
it accepts an HTML template (in any format) to render items
it renders only visible views so it can handle large datasets (virtual list)
it can handle item click to return index/underlying object
it supports data modification (item add/remove)
it's free
not under GPL (as long as I understand it correctly) so it can be used in a project without the obligation to submit the code to open source
it supports filtering/sorting (this one is optional)
As a mobile developer those requirements seem to be pretty default to me, but I'm not able to find any suitable solution for several days already.
The options I've checked are:
dhtmlxList - the closest solution I've found so far, but it's under GPL v2 that requires posting the code to opensource.
vue: lacks virtualization/filtering
lists.js - great one, but I can't get how to handle item click to get the underlying object/item index
vlist - a good one, but doesn't handle data modifications though
webix - looks great, but seems to be too "paid"
bunch of libraries that I even can't already find links to
I believe I'm just looking in the wrong direction or using the wrong search terms as it all seems to be pretty standard and any input is much appreciated.
And sorry for stupid question, but in general, how do you handle common UI elements in JS world?
Is there any comprehensive libraries of UI elements for JS which is free and not under the GPL license?
Just went across this Vue component:
https://github.com/Akryum/vue-virtual-scroller
It seems to be what I was looking for - data driven efficient list for javascript (though it's based on a Vue framework which might be not that straightforward to integrate if you don't know it)
Still solves my problem and maybe it would be useful for someone else.
Trying to wire in different components from different libraries / frameworks can be daunting,if you this you would have need for other components for example slider, spinner etc you could pick a framework like ionic that provides to components out of box.
In my first ever react app, I'm using ant.design as front-end library. Now I need to create different sort of graphs especially pie charts in my app. So I explored components of ant.design but didn't get any good option in this regard.
Is that possible to create charts/graphs especially pie chart using any of antdesign component? If not then what is the best suited solution in this regard?
If you want to stick with the Ant team there is AntV which is very capable, but does not have React components and (like Ant.Design 6 months ago) only has Chinese documentation. Browsing the docs using Chrome auto-translate works very well, however.
Then there are many JS charting packages with React wrappers:
https://github.com/fraserxu/react-chartist
https://github.com/reactjs/react-chartjs
http://www.fusioncharts.com/react-charts/#/demos/ex1
...etc.
For a more light-weight React-first solution go with
https://github.com/recharts/recharts
https://github.com/fundkis/reactchart