I have a react-native project that's built using Metro and Native Base and I'm trying normalize the UI by extracting a styleguide out of it. I would like it to be documented so I can share it and work along with the designers.
Cheers!
I already tried Storybook, Docz and React-Styleguidist.
React-Styleguidist: This one I liked the fact that it could be placed outside the project.
Docz: seems to be the easiest but it seems to have a problem with Native-Base
Storybook: Seems to require the you have an emulator running to display any documentation.
Anyway, I couldn't make any of them work. So if you guys have some suggestions regarding these or other tools, I'd be glad to hear them.
The best would be to have a browser based that lifts the documentation from outside the repo and parses something that's browsable and I can share with the designers.
You can use react-native-web package that compiles native components to HTML.
https://github.com/necolas/react-native-web
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.
I need to use https://fezvrasta.github.io/bootstrap-material-design/ for my web app. I can see npm version also available at https://www.npmjs.com/package/bootstrap-material-design. I am looking for a better solution and guidelines to use it in react. I had looked MDB i.e https://mdbootstrap.com/. This UI kit having react version. But compared to first one, this is a little bit less attractive. Can any help me out this?
I jumped into React recently, so I'm very confused about many things. One of them is about how most of people design UI in React.
Before jumping in, I used Bootstrap to design UI of my website by using pre-made components such as buttons, modal views, navigations, and so on. But, figured out I can't use it anymore in React, but I can use React-Bootstrap instead. Is React-Bootstrap still the most popular UI framework in React as well? I'm asking that because I found some other UI frameworks such as Semantic UI or Material UI for React.
Also, I found styled-components. However, styled-components makes me feel like I need to make every component by myself to use which sounds like taking too long time.
As a very beginner, I'm curious about how people usually work on UI in React?
Firstly, There is no clear answer for the problem. In general purpose of styled-components not mean don't use another ui framework. And the companies solve the problems which is spesific with their Engineering Team. They have their own architecture though. But the alone programmers are choose some open source solutions.
Well, Some people use together or alone. It's totally about your project or your style of architecture. But still i would say some stuffs for giving point of view.
In the other hand; the UI Frameworks are solve modular problems. An example: You cannot create a modal with only css even styled-components. you know, you need JavaScript for that.
To use both:
You can use on Elements Semantic-UI(ReactJS or direct element with the className),
You can use styled-components instead of css file for spesific part of your project. As e.g: Main, Aside, Article, Post, TopNavigation etc.
If you prefer to use the styled-components, also you can use same components in React Native. (There is no css file support for React Native. You'll need inline CSS)
To use only div instead of the spesific component, you'll confused after project being bigger. I would recommended you to create for each meaningful Element.
You can combine the open source community UI parts with your own CSS.
You won't need a CSS(Less, Sass) file when you use styled-components. That's mean, you'll work only on your JS files instead CSS files, so you can do dynamic things in your components. styled-components supports almost all CSS features.
To use standalone Semantic-UI:
I prefer Semantic-UI-React instead of ReactJS bootstrap frameworks.
You cannot use the CSS of Semantic-UI-React in React Native. You should choose which is another solution or actually make your own your components architecture.
You are ready to go with every project with Semantic-UI-React for web/mobile site.
You have to learn basics of less-lang.
You can change everything from your theme files which variables.
Lastly,
If you have big project or goal though; nevertheless, i think you should use a UI Framework in learning and adaptive process.
If you are still not sure what you should do you then, you have to try all of them to find your own architecture.
I think in learning process, you have to concern about ReactJS needs(Redux, Router etc.) before CSS.
It's my first answer at Stackoverflow. Hopefully, the answer will help you for your concern.
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 am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.