I am fairly new to React native, and I am looking for a good way to have a sortable list. To my knowledge, I was unable to find any good examples that I could replicate (though there is one repo being worked on). Without the HTML5 drag and drop, what is the basic strategy for drag and sort with React Native? Thank you.
React Native Sortable List
I tested out about 5 different solutions, none of which worked very well, especially on Android, so I invested a day of programming to update the most promising, which was React Native Sortable List.
Now it works fantastic on both iOS and on Android. Here's an animation of it in action on both platforms (click the image to watch the gif).
I also tested a lot of packages but they were all buggy and couldn't achieve what I wanted to do.
So I wrote my own sortable list (vertical and horizontal). Feel free to check it out and leave a comment. It's written in Javascript so it's compatible with any type of project.
Here is an example of it:
Sortable list
Related
LayoutAnimation is a part of React Native that automatically animates components when the view is rendered.
The official documentation is here:
https://reactnative.dev/docs/layoutanimation
However, the examples in the docs do not work. Objects in the examples that are supposed to animate just jump from the starting position to the end position.
Here is an example of one of the Snacks in the documentation that does not appear to animate:
https://snack.expo.io/91MUQd5IH
This would lead one to the conclusion that this API is just not supported or no longer functional.
Is it the case that Layout Animation just does not work? Or if it does work under some circumstances, please share a link containing a working Snack / Gist with an extremely simple but working LayoutAnimation example.
UPDATE: LayoutAnimation possibly does not support web. Does anyone have any knowledge of this or who can refer the reader to an explanation in the docs?
LayoutAnimation is currently not supported properly in react-native-web. You can see that here: https://github.com/necolas/react-native-web#modules and here https://github.com/necolas/react-native-web/issues/1613, https://github.com/necolas/react-native-web/issues/1056. It doesn't seem to be a priority for the project at the moment so I wouldn't count on it being implemented.
On iOS/Android it's a different story. If we look here: https://reactnative.dev/docs/layoutanimation/ you can actually see this working properly by pressing play and selecting iOS for example.
On Android we have support as well but it might not work/crash. If you look over the issues open for react-native, you will see a lot of them mention issues with LayoutAnimation and Android. E.g. it crashes under certain conditions on Android: https://github.com/facebook/react-native/issues/27552 and https://github.com/facebook/react-native/issues/29919.
I don't recommend using LayoutAnimation, especially on Android, as it is highly experimental and might crash on some devices without warning.
If you want to try some more interesting animations with better performance, I recommend you try using the Animated API from ReactNative or the newer react-native-reanimated which is faster, more modern but still in alpha (I'm talking about the current, v2, version).
By my test the given link in the question post works properly:
Also, I test it on my friend's iPhone and it's worked properly too. But many of React Native features don't work properly on Web export. For example animations on RNW (React Native Web) works on Android/iOS exports but not on Web exports.
For such web situations, you should decouple the web component and make a separate file then write the desired animation on it.
everyone. How can I implement such thing(jQUery Selectable) in my react&redux app? I need to know what items were selected and change my store respectively. I have read about D&D but have no idea, how to do it in react&redux way. Thank you.
You can use the following library , i've used it couple of times, it served the purpose
http://pablofierro.github.io/react-drag-select/
check the article React DnD Intro for the Redux developer
for built in drag&drop functionality
or you can include some good library to do the task they are many that you can find check https://github.com/clauderic/react-sortable-hoc or http://react-dnd.github.io/react-dnd/
I just started learning ReactXP and I want to use React-Navigation-https://reactnavigation.org/ in ReactXP. Is React-Navigation is supported in ReactXP? If yes, Then we have any working example?
I found one example but its not working. https://github.com/LeJPR/reactxp-navigation-example
Referring to this link (https://microsoft.github.io/reactxp/docs/extensions/navigator.html) the default way of reactXP is currently not using React-Navigation but might do in the future.
The current implementation of Navigator on React Native makes use of the deprecated “Navigator Experimental”. We will look at moving away from this implementation to the now-recommended “react-navigation” in the near future. Some of the more advanced interfaces may need to change. These are listed at the end of this article. Use these with caution.
I read somewhere in the reactXP issue list on gitHub that your example (https://github.com/LeJPR/reactxp-navigation-example) does not just use react-navigation but had to change the annimation system used in reactXP and seems to not beeing updated anymore.
The core of react-navigation works fine with reactxp, to get it running as is you just need to create reactxp versions of the views used by the different navigator types such as stack/drawer/tab. In doing this though i ran into some challenges with the parity of reactxp animation vs react-native. Unless i'm mistaken it seems there's some quite fundamental limitations with reactxp animation currently - from what i can see you can only have a single interpolation off an animated value (add another and it will overwrite the first), only two values in an interpolation array (as opposed to multiple steps). This functionality is used extensively in the react-navigation views for native like experience. To get around this (driven by a lack of time to consider how to reimplement with reactxp animation) i ended up patching in animatedjs for use on reactxp web navigation views, which provides parity with react-native. Kind of leads me to believe considering animation might be a precursor to react-navigation/more important question. Happy to put up a sample of the above approach to getting react-navigation working with reactxp if of benefit - definitely just for awareness and not production use though!
The example does actually come from this reactXP issue: https://github.com/Microsoft/reactxp/issues/9#issuecomment-303717309
Options I found for Navigation without writing an Extention on your own
contained in reactXP https://microsoft.github.io/reactxp/docs/extensions/navigator.html
also from reactXP team but not in use? https://github.com/Microsoft/react-native-experimental-navigation
an other navigation package I found https://github.com/ymzuiku/react-router-hash-history
I want to apply angular-material in my recent project, but I am afraid that it will be very difficult to find other components which are not available currently. Like treeview, date/time picker, carousel and so on...
How can I deal with these things? any opinions?
I've just tried to use Angular-Material in a site with an existing style, and found a number of issues that I wasn't able to resolve:
- Site UI was feeling very sluggish
- There was a paralax script that became extremely slow and lagged when there was a quick scroll.
- Odd behavior with fonts when it loaded (when I re-sized the screen and back again it was working again) in chrome.
This became a real issue - for the most part it doesn't feel complete. I was really hoping for something like Material-UI, which appears to rely on React.
However, I have come across this https://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html which appears to be suitable and works with bootstrap.
There's a really good answer : Using Bootstrap for Angular and Material design for Angular together for some of the issues you will face when using Material with bootstrap.
Also, I tested on a mobile phone and the site was terrible (in performance), you'd never want to get site up with that type of performance.
Also, there's lumx if you want angularjs support (e.g directives etc...). My other issue with lumx and angularjs material is that swapping over libraries is not an easy task. I'm not sure whether this is the norm, and heading this way in the future - but I'm from the Jquery days where my markup remained consistent and I can activate features. However, both lumx and angularjs material require specific tags which means that swapping over libraries requires me to edit my mark-up.
Maybe here is another view of using Angular Material.
I have been using Angular Material as the only web component for my work projects. Angular Material is still in beta version, and like you said, many components such as table, color picker, and sidenav are still missing. If you have to use those components in your projects and not able to implement yours, Angular Material may not be a right choice. Something like Angular-UI or Polymer is probably what you are looking for.
The reason we choose Angular Material at work rather than other nearly complete web component library/collection is because it is being very actively maintained. Currently there are 900+ open issues and lots of pull requests are still going on. For me, a complete version will be more guaranteed. Treeview, date/time/color picker, table these kinds of components are already in the open issues. Here you can search for it.
https://github.com/angular/material/issues
Currently we will find workaround or overwrite the material to solve problems. Or we will open issues if there is no solution. And again, it is still in beta version, you should decide whether you want to use it in your project. But you can definitely look at their available components to determine if Angular Material is a right choice for you.
https://material.angularjs.org/latest/#/
I have a web app that is built aimed primarily at iPads on full screen mode. I've got to implement a select-able grid/matrix that has two levels of selections - one main item selection and one sub item selection. It looks something like this from our design:
First picture has main item selection, and
The application is built on AngularJS, and Bootstrap3. Right now we have implemented a working version of the grid using a custom jQuery plugin we authored and now are wondering why we ever did it. The code is buggy and constantly throws up new bugs. We are looking for an alternative form of implementation, hopefully a pure AngularJS one.
The criteria we're looking for are:
1. Responsiveness across devices - iPad/desktop
2. Stable DOM structure compatible with filtering (search bar at the top needs to work - not shown in figures).
3. Quick rendering from dynamically changing AJAX data.
4. Touch friendly
What are the best methods/ng-modules to implement something like this? We are on the verge of deciding to write a custom module, but don't wanna reinvent the wheel!
We did see ng-grid, but it still seems to be in Beta. We need a stable module.
SmartTable seems to be the most decent option as of now.
TIA!
Have you Tried Angular Material Gridlist I think it must something more clean. I frequently use it rather than bootstrap. Hope it helps
Take a look at Angular Grid. I know it works on iPad, the scrolling uses touch gestures. It performs very well in comparison to other AngularJS grids. I've used it with large grids on iPads and Androids.
Go for Ionic Framework in conjuction with angular-material.
Both have you covered in terms of UI elements and grid needs, and are very reliable. Both are very active frameworks.
They both reached v1 very recently.
You should seriously consider the time you're going to gain, even if at first you have to drop Bootstrap. I was anxious as well to drop ui-bootstrap, but really, you won't regret it (and you'll be wondering why you didn't do it before).
Docs are impeccable, Codepens and Plunkrs are all over the place, Blog posts abound...
Learning curve is... well... judge for yourself.