React NativeImage # | Edit on GitHub |
Another basic React Native component is the Image component. Like Text, the Image component simply renders an image.
An
Imageis analogous to the<img>HTML tag when building websites.
The simplest way to render an image is to provide a source file to that image via the source attribute.
This example displays a checkbox Image on the device.
Image # | Edit on GitHub |
Another basic React Native component is the Image component. Like Text, the Image component simply renders an image.
An
Imageis analogous to the<img>HTML tag when building websites.
The simplest way to render an image is to provide a source file to that image via the source attribute.
This example displays a checkbox Image on the device.
ScrollView # | Edit on GitHub |
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).
ScrollView works best to present a list of short, static items of a known quantity. All the elements and views of a ScrollView are rendered a priori, even if they are not currently shown on the screen. Contrast this with a ListView, which render only those views that are on the screen and remove views that go off-screen.
TextViewandListVieware specialized scrollable containers.
This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).
ScrollView # | Edit on GitHub |
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The ScrollView is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the horizontal property).
ScrollView works best to present a list of short, static items of a known quantity. All the elements and views of a ScrollView are rendered a priori, even if they are not currently shown on the screen. Contrast this with a ListView, which render only those views that are on the screen and remove views that go off-screen.
TextViewandListVieware specialized scrollable containers.
This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).
Text # | Edit on GitHub |
The most basic component in React Native is the Text component. The Text component simply renders text.
This example displays the string "Hello World!" on the device.
Text # | Edit on GitHub |
The most basic component in React Native is the Text component. The Text component simply renders text.
This example displays the string "Hello World!" on the device.
In this slightly more advanced example we will display the string "Hello World" retrieved from this.state on the device and stored in the text variable. The value of the text variable is rendered by using {text}.
In this slightly more advanced example we will display the string "Hello World" retrieved from this.state on the device and stored in the text variable. The value of the text variable is rendered by using {text}.
TextInput # | Edit on GitHub |
Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. TextInput is a basic component that allows the user to enter text.
This example creates a simple TextInput box with the string Type something here as the placeholder when the TextInput is empty.
TextInput # | Edit on GitHub |
Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. TextInput is a basic component that allows the user to enter text.
This example creates a simple TextInput box with the string Type something here as the placeholder when the TextInput is empty.
View # | Edit on GitHub |
A View is the most basic building block for a React Native application. The View is an abstraction on top of the target platform's native equivalent, such as iOS's UIView.
A
Viewis analogous to using a<div>HTML tag for building websites.
It is recommended that you wrap your components in a View to style and control layout.
The example below creates a View that aligns the string Hello in the top center of the device, something which could not be done with a Text component alone (i.e., a Text component without a View would place the string in a fixed location in the upper corner):
View # | Edit on GitHub |
A View is the most basic building block for a React Native application. The View is an abstraction on top of the target platform's native equivalent, such as iOS's UIView.
A
Viewis analogous to using a<div>HTML tag for building websites.
It is recommended that you wrap your components in a View to style and control layout.
The example below creates a View that aligns the string Hello in the top center of the device, something which could not be done with a Text component alone (i.e., a Text component without a View would place the string in a fixed location in the upper corner):