{"id":802,"date":"2021-06-04T11:02:23","date_gmt":"2021-06-04T11:02:23","guid":{"rendered":"https:\/\/liainfraservices.com\/kbarticles\/?post_type=tesserakb&p=802"},"modified":"2021-09-10T12:18:58","modified_gmt":"2021-09-10T12:18:58","slug":"how-to-build-a-mobile-app-with-react-native","status":"publish","type":"tesserakb","link":"https:\/\/www.liainfraservices.com\/kbarticles\/knowledgebase\/how-to-build-a-mobile-app-with-react-native\/","title":{"rendered":"How to Build a Mobile App With React Native"},"content":{"rendered":"\n

Let’s harness the power of React Native by learning “How to build a mobile app with React Native<\/span><\/a><\/strong>“. React native is like any other Native app, letting you build mobile app development<\/span><\/a><\/strong> using the JavaScript library. It uses the same design as React, which involves building a rich mobile UI that is the same as regular iOS and Android Apps.<\/p>\n\n\n\n

With React-Native one can build a real mobile or cross-platform web application that is completely indistinguishable from the app built using Objective-C or Java.<\/p>\n\n\n\n

React-Native uses fundamental UI blocks to create native apps for iOS and Android Applications. React Native uses \u201cRCTBridgeModule<\/strong>\u201d to make a connection between Native code and JavaScript Code.<\/p>\n\n\n\n

One React – Many Platforms:<\/strong><\/h3>\n\n\n\n

Using React – Single code can be shared across multiple platforms and use common technology.<\/p>\n\n\n\n

\n
\n
\n

import React from ‘react’;<\/p>\n\n\n\n

import {Text, View} from ‘react-native’;<\/p>\n\n\n\n

import {Header} from ‘.\/Header’;<\/p>\n\n\n\n

import {heading} from ‘.\/Typography’;<\/p>\n\n\n\n

const WelcomeScreen = () => (<\/p>\n\n\n\n

\n

  <View><\/p>\n\n\n\n

    <Header title=”Welcome to React Native”\/><\/p>\n\n\n\n

    <Text style={heading}>Step One<\/Text><\/p>\n\n\n\n

    <Text><\/p>\n\n\n\n

      Edit App.js to change this screen and turn i<\/strong>t into your app.<\/strong><\/span><\/p>\n\n\n\n

    <\/Text><\/p>\n\n\n\n

    <Text style={heading}>See Your Changes<\/Text><\/p>\n\n\n\n

    <Text><\/p>\n\n\n\n

      Press Cmd + R inside the simulator to reload your app\u2019s code.<\/span><\/strong><\/p>\n\n\n\n

    <\/Text><\/p>\n\n\n\n

    <Text style={heading}>Debug<\/Text><\/p>\n\n\n\n

    <Text><\/p>\n\n\n\n

\n

      Press Cmd + M or Shake your device to open the React Native Debug Menu.<\/strong><\/span><\/p>\n<\/div><\/div>\n\n\n\n

    <\/Text><\/p>\n\n\n\n

    <Text style={heading}>Learn<\/Text><\/p>\n\n\n\n

    <Text><\/p>\n\n\n\n

      Read the docs to discover what to do next:<\/strong><\/span><\/p>\n\n\n\n

    <\/Text><\/p>\n\n\n\n

   <\/View><\/p>\n\n\n\n

);<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n

Components of React-Native:<\/strong><\/h3>\n\n\n\n

As there are plenty of mobile app technologies, tools and frameworks available in the market, that undoubtedly make the app development life cycle<\/strong> simplified and shortened. On the other side, the wide choice of technologies is putting everyone in the dilemma of how to choose the best approach of developing a mobile app in less time at less cost without compromising with the quality.<\/p>\n\n\n\n

Components are the visual UI\/UX Design elements that can be found on the app screen in the React Native App<\/strong>.<\/p>\n\n\n\n