I want to use the same component lib on web and mobile with react. I know that semantic-ui-react fits to web, but tried to use it in a react-native project without success.
Am I missing some specific config, or it does not work in both platforms?
You're not missing any configuration. Semantic UI React only generates elements using react-dom. The only way to use it with React Native would be if the entire library was updated to render native elements for other target environments. This is not something that Semantic UI supports... and would represent a significant, likely breaking, refactor to do.
Maybe this package meet your need in react-native
https://www.npmjs.com/package/#muratoner/semantic-ui-react-native
Related
As the title suggests I am looking for a way to precompile a single or set of normal react components to plain html/js so I can inject this into my webview.
Since I am open to any solution I will give you some background on what I am trying to achieve. We are building a react native app and need to use Leafleft maps by customer requirement. Since Leaflet is not available for react native straight away we are looking for a way to implement it. Currently we are looking at compiling the leaflet react code to normal html/js and inject this into a webview. If there are other/ better ways by all means suggest them!
Thanks for your time 😄
I am currently studying RN by myself, without prior knowledge in React. A lot of things seem to exist in both such as Redux and hooks. Many of the resources I find refer to React in the title (e.g "Redux Crash Course With React").
My question is: where does the line cross between React and React Native? Would I be fine studyig form these resources that refer to React, or would that just confuse me?
I'm trying to understand a go to approach to understand which resource I'd be fine with and which would be irrelevant.
React Native contains React library to use it as front-end library.
Most of usages of React are the same for React-Native. And it is same for Redux too.
React-Native must have other libraries to build applications that can run on both of Android and iOS.
Also it has middleware libraries that allow us to use most of native libraries' functionalities. As an example you can check Alert directory out. It is used for to show native Android alert dialogs.
Good luck..
Both react and react native use javascript to create the user interface we need but the difference is in the rendering, style and bundling and you should know that react native is a framework itself but react.js is a library. the main difference:
---React-Native doesn’t use HTML to render the app, but provides alternative components that work in a similar way. Those React-Native components map the actual real native iOS or Android UI components that get rendered on the app.
---With React-Native, you’ll have to learn a completely new way to animate the different components of your app with Javascript.
--- navigating between pages are totally different!!!
so we conclude that it's better to study references based on RN not react.js . but some functionalities such as redux or hooks or a lot of it's components are exactly the same and you can study react.js references for them. only the 3 differents that i said above are important.
for react web, I'd like to try semantic-ui (http://react.semantic-ui.com/usage)
for react-native, I don't think there's a framework that can help us with styling. (which is hard to believe, maybe I'm too new to react world)
My question is, Is there a way for us to share styles for the two platforms (web/native) somehow?
There are external dependencies that could be used as tools to achieve what you are talking about react-native-css is one option.
Without any external dependencies I think you can still achieve succesfull results... You will just need to export style modules in your react-native app and pass them as props. You can use the Platform module (from rn) to conditionally render styles depending on device operating system. Remember, layouts in react native are created with flexbox so any successful shared styles between web and native would have to be written with that in mind. (Bootstrap 4 supports flex.)
Im trying to create an application targettng both web and mobile. The idea is to create react components that differ on how they render but share the logic.
React v.014 blog post stated "we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native.
The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components."
I've found a great example (http://blog.benoitvallon.com/projects/a-mobile-desktop-and-website-app-with-the-same-code/) that uses the same concept and accomplished the result (react-native 0.13.6 and react 0.14.2).
In this code, you will see nothing special just a smart idea on how to extend react-native naming conventions system to include a web version. The minute I upgrade to latest react-native, it complaints about any component that uses React.Component from the react package instead of react-native.
This is confusing since 0.14 release seem to indicate that was exactly the point moving fw. Let React create components, let react-dom deal with the DOM and let react-native deal with ios/android views.
I think this is a brilliant idea but I cant seem to pass this particular problem. Any thoughts, ideas will be greatly appreciated.
Thanks
The transition to make react native work this way is underway but incomplete. See AMA.
We are working hard to stop using our fork such that people can use require('react') and work the same as require('react-native'), this will make it possible for all the third party plugins to work on both places without doing anything.
Right now we can't use relay on the open source version of react-native without forking it, which is a huge shame and we're working on fixing that.
Is it possible to use React.addons in React Native, as listed on https://facebook.github.io/react/docs/addons.html.
Especially React.addons.LinkedStateMixin?
Yup, just make sure you use react-with-addons.js (or the minified version), and to the default react.js.
For example, if as seen in this gist, you can simply have the line
var React = require('react-native/addons');
to include react-native with add ons.
My understanding is that react (open-source JS library dealing with the problems faced by web single-page app UI) and react native (open source framework that allows you to create native cross-platform mobile apps) are two different things, and that the react-with-addons are specifically to react, and therefore it is NOT supported by react native.