Android App Development
iOS App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 188.8.131.52 release ready!
Owner and Founder. Opencart
React native uses native components instead of web components.Component is the basic building block of any application.
In this post we are going to study some basic component of React Native.
Below are the basic component of react native we are going to study.
In React native View is a container and most fundamental component. View is just like a <div> element in html.
It can have nested views inside it and can also have 0 to many children of any type.
Let’s take an example of view.
Text is the component to display text on page. It wrap the text of the page.
The component <text> is similar to <p/> tag in html.
We can set any style on text with the help of style prop.
Example of Text component :
In react native we can show image from resources like local disc, network images,static resources, temporary local files. It use to display image on app page.
Image component is similar to <img/> tag in html.
We can use background image to any page by using BackgoundImage component and put any child inside it like text, image etc.
5. Text Input:
Taking input from user is most import part of any application. In React native we can achieve this by using Text input component.
This is similar to <input> tag in html.
We can use onChangeText to detect the change in input.There are also other events, such as onSubmitEditing and onFocus that can also be used.
5. Scroll View :
As we all aware from scroll View, it provide functionality to scroll multiple child and view to scroll.
Basically scroll view provides scrolling boundaries to nested child and views on our page.
In react native it behave as a container to wrap our nested view inside it.
We can set scrolling direction as horizontal and vertical. By default scroll View direction is Vertical and we can set it to horizontal by using prop horizontal: true.
In this post you have learn about some basic component of react native.
Thanks for reading.
Your email address will not be published. Required fields are marked*
Save my name email and website in this browser for the next time I comment.
Be the first to comment.
We've bought a Shopware Extension which is a hybrid App, which we can now offer in the Google Play Store and the IOS App Store. I'am still impressed how fast and how sharp the support team leads us through every process of the App-Store clarification. Very fast and useful response.
Founder, Das Apartment Living
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.