{"id":7672,"date":"2024-01-27T19:09:05","date_gmt":"2024-01-27T13:39:05","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=7672"},"modified":"2024-01-27T19:09:08","modified_gmt":"2024-01-27T13:39:08","slug":"react-native","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/react-native\/","title":{"rendered":"React Native"},"content":{"rendered":"\n

What is React Native?<\/strong>
1)React Native is an open-source framework for building mobile applications using JavaScript and React.<\/p>\n\n\n\n

2) It allows developers to use React, a popular JavaScript library for building user interfaces, to create native mobile applications for iOS and Android platforms.<\/p>\n\n\n\n

What is the Use of the React Native?<\/strong>
1)We can build Mobile Application for both Andoid and IOS in Single Codebase

What to learn for React<\/strong> Native<\/strong>
1)To learn React Native we have to learn HTML,CSS,JAVA SCRIPT AND REACT BASICS

Required to Start the React Native Project<\/strong>
1)Node and npm
2)Vs Code and Android Studio for running the Project

Creating a Project<\/strong>
To Create the React native Project we should follow Some Commands

1)npx react-native init MyApp
this command will initilize the basic environment setup and then
2)cd MyApp
3)npx react-native run-android
this command will run the program

Android Studio<\/strong> initilize<\/strong>
After downloading and setup in android studio we should import the android file in Android studio and then we should create Device Manager for running the Device and then run in the android simulator


BASIC COMPONENTS OF REACT NATIVE<\/strong>

There are Serval Basic Components in React Native
1)View
2)Text
3)TextInput
4)Image
5)Stylesheet
6)ScrollView

VIEW COMPONENT<\/strong>
1)Its a building block of the element without VIEW Component we cannot Style the UI

TEXT COMPONENT<\/strong>
1) Text Component is used for Displaying the Text in the UI

TEXTINPUT<\/strong> COMPONENT<\/strong>
1)It is used to Type the Text in the UI Component
2)It is mainly user in the Login form and forms

IMAGE<\/strong> COMPONENT<\/strong>
1)Image Component is used to Display Image in UI Application
2) We can Display our Image and also NETWORK Image also

STYLESHEET<\/strong> COMPONENT<\/strong>
1)It is act as a CSS in Mobile Application.We can Change style and font color and font icon by using Stylesheet

SCROLLVIEW<\/strong> COMPONENT<\/strong>
1)ScrollView in React Native provides a scrollable container for content, allowing users to view and interact with larger datasets easily.
<\/p>\n\n\n\n

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

<\/p>\n","protected":false},"excerpt":{"rendered":"

What is React Native? 1)React Native is an open-source framework for building mobile applications using JavaScript and React. 2) It […]<\/p>\n","protected":false},"author":505,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1021],"tags":[],"class_list":["post-7672","post","type-post","status-publish","format-standard","hentry","category-mobile-flutter","psol-cat-mobile-flutter"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-1ZK","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/505"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=7672"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/7672\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=7672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=7672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=7672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}