{
    "componentChunkName": "component---src-templates-post-js",
    "path": "/blog/react-native-not-hybrid",
    "result": {"data":{"markdownRemark":{"html":"<p>React Native is dominating the mobile app development landscape.\r\nI tried to come up with a justification of why based on my experience.</p>\n<h3>What’s React Native?</h3>\n<ul>\n<li>Native Application, not Hybrid</li>\n<li>JSX and ES6+ JavaScript interface</li>\n<li>Logic - JavaScript thread</li>\n<li>UI - Main thread (and more for background computing)</li>\n</ul>\n<h3>Cross Platform</h3>\n<ul>\n<li>How does it work</li>\n<li>Writing code in JSX blocks</li>\n<li>Invoke platform API to display native elements e.g. becomes UIView for iOS and View for Android</li>\n<li>React Native works like a connector between platforms</li>\n<li>Business and View logic run by different threads</li>\n</ul>\n<h3>Lifecycle of new component</h3>\n<ul>\n<li>constructor() -> good place to add state unless you are using class properties</li>\n<li>componentWillMount() -> avoid using it at all, if anything needs to be done with component do that in DidMount</li>\n<li>render() -> React Element which will be rendered and made into native UI afterwards</li>\n<li>componentDidMount() -> perfect place to call all side effects</li>\n</ul>\n<h3>Lifecycle of updating component</h3>\n<ul>\n<li>componentWillReceiveProps(nextProps) -> try to limit yourself just to this.setState only here</li>\n<li>shouldComponentUpdate(nextProps, nextState) -> can be used for optimization</li>\n<li>componentWillUpdate(nextProps, nextState) -> component will get an update, you can do some calculations here depending on current and next props/states</li>\n<li>render() -> As in mounting component lifecycle</li>\n<li>componentDidUpdate(prevProps, prevState) -> component got updated you can call some refs here or similar after update</li>\n</ul>\n<h3>How it does compare with other solutions?</h3>\n<ul>\n<li>More performant than Cordova with Ionic as it is Native vs Hybrid</li>\n<li>Can reuse same code on all platforms (unlike Xamarin.iOS and Xamarin.Android, while Xamarin.Forms has same capability)</li>\n<li>Flutter is new and not stable yet enough but it is promising as well</li>\n<li>Most complete JavaScript solution as of now</li>\n</ul>\n<h3>The good parts (the final WHY)</h3>\n<ul>\n<li>Write once, use everywhere</li>\n<li>Straightforward and easy to start if had experience with React previously</li>\n<li>Can reuse same libraries as from Web for most of the things (redux, redux-saga etc.)</li>\n<li>Satisfying performance</li>\n<li>Community getting bigger on daily basis with plenty of packages that are getting available</li>\n<li>Plenty of platforms that are supported with some additional packages (Windows 10, Windows 10 Mobile, OSX, Web)</li>\n</ul>\n<h3>The bad parts</h3>\n<ul>\n<li>Problems with updating packages and RN itself</li>\n<li>No support for Android 64-bit (that’s need to be added as of 2019 it will be required)</li>\n<li>Layers are pretty fast, but bridges might be bottleneck so this need to be considered when writing a native module</li>\n<li>Rare cases where platforms JS interpreter are different (e.g. lack of Proxy within Android - requires polyfill)</li>\n</ul>\n<p>React Native provides an interface (bridge) between the Native language and Javascript code. There are heated debates on whether React Native is a native or a hybrid solution.\r\nPersonally, I consider React Native closer to native side, as Facebook officially claims.</p>\n<p><strong>_ We designed React Native such that it is possible for you to write real native code and have access to the full power of the platform._</strong></p>\n<p>You can side with or against me, but React Native still rocks, so does React.</p>","frontmatter":{"title":"React Native - Native or Hybrid?","description":"React Native is dominating the mobile app development","date":"2020-04-12T00:00:00.000Z","slug":"/blog/react-native-not-hybrid","tags":["Culture","Tech"]}}},"pageContext":{}},
    "staticQueryHashes": ["2009693873","2077189868","3303540520","3505212370","3825832676"]}