React native android components

Android Native UI Components

There are tons of native UI widgets out there ready to be used in the latest apps — some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput , but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, we can wrap up these existing components for seamless integration with your React Native application.

Like the native module guide, this too is a more advanced guide that assumes you are somewhat familiar with Android SDK programming. This guide will show you how to build a native UI component, walking you through the implementation of a subset of the existing ImageView component available in the core React Native library.

ImageView example​

For this example we are going to walk through the implementation requirements to allow the use of ImageViews in JavaScript.

Native views are created and manipulated by extending ViewManager or more commonly SimpleViewManager . A SimpleViewManager is convenient in this case because it applies common properties such as background color, opacity, and Flexbox layout.

These subclasses are essentially singletons — only one instance of each is created by the bridge. They send native views to the NativeViewHierarchyManager , which delegates back to them to set and update the properties of the views as necessary. The ViewManagers are also typically the delegates for the views, sending events back to JavaScript via the bridge.

1. Create the ViewManager subclass.
2. Implement the createViewInstance method
3. Expose view property setters using @ReactProp (or @ReactPropGroup ) annotation
4. Register the manager in createViewManagers of the applications package.
5. Implement the JavaScript module

1. Create the ViewManager subclass​

In this example we create view manager class ReactImageManager that extends SimpleViewManager of type ReactImageView . ReactImageView is the type of object managed by the manager, this will be the custom native view. Name returned by getName is used to reference the native view type from JavaScript.

2. Implement method createViewInstance ​

Views are created in the createViewInstance method, the view should initialize itself in its default state, any properties will be set via a follow up call to updateView.

3. Expose view property setters using @ReactProp (or @ReactPropGroup ) annotation​

Properties that are to be reflected in JavaScript needs to be exposed as setter method annotated with @ReactProp (or @ReactPropGroup ). Setter method should take view to be updated (of the current view type) as a first argument and property value as a second argument. Setter should be declared as a void method and should be public . Property type sent to JS is determined automatically based on the type of value argument of the setter. The following type of values are currently supported: boolean , int , float , double , String , Boolean , Integer , ReadableArray , ReadableMap .

Annotation @ReactProp has one obligatory argument name of type String . Name assigned to the @ReactProp annotation linked to the setter method is used to reference the property on JS side.

Except from name , @ReactProp annotation may take following optional arguments: defaultBoolean , defaultInt , defaultFloat . Those arguments should be of the corresponding type (accordingly boolean , int , float ) and the value provided will be passed to the setter method in case when the property that the setter is referencing has been removed from the component. Note that «default» values are only provided for primitive types, in case when setter is of some complex type, null will be provided as a default value in case when corresponding property gets removed.

Setter declaration requirements for methods annotated with @ReactPropGroup are different than for @ReactProp , please refer to the @ReactPropGroup annotation class docs for more information about it. IMPORTANT! in ReactJS updating the property value will result in setter method call. Note that one of the ways we can update component is by removing properties that have been set before. In that case setter method will be called as well to notify view manager that property has changed. In that case «default» value will be provided (for primitive types «default» can value can be specified using defaultBoolean , defaultFloat , etc. arguments of @ReactProp annotation, for complex types setter will be called with value set to null ).

4. Register the ViewManager ​

The final Java step is to register the ViewManager to the application, this happens in a similar way to Native Modules, via the applications package member function createViewManagers.

5. Implement the JavaScript module​

The very final step is to create the JavaScript module that defines the interface layer between Java and JavaScript for the users of your new view. It is recommended for you to document the component interface in this module (e.g. using Flow, TypeScript, or plain old comments).

The requireNativeComponent function takes the name of the native view. Note that if your component needs to do anything more sophisticated (e.g. custom event handling), you should wrap the native component in another React component. This is illustrated in the MyCustomView example below.

Events

So now we know how to expose native view components that we can control freely from JS, but how do we deal with events from the user, like pinch-zooms or panning? When a native event occurs the native code should issue an event to the JavaScript representation of the View, and the two views are linked with the value returned from the getId() method.

To map the topChange event name to the onChange callback prop in JavaScript, register it by overriding the getExportedCustomBubblingEventTypeConstants method in your ViewManager :

This callback is invoked with the raw event, which we typically process in the wrapper component to make a simpler API:

Источник

Core Components and APIs

React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you’re not sure where to get started, take a look at the following categories:

You’re not limited to the components and APIs bundled with React Native. React Native has a community of thousands of developers. If you’re looking for a library that does something specific, please refer to this guide about finding libraries.

Basic Components​

Most apps will end up using one of these basic components.

The most fundamental component for building a UI.

A component for displaying text.

Image

A component for displaying images.

TextInput

A component for inputting text into the app via a keyboard.

ScrollView

Provides a scrolling container that can host multiple components and views.

StyleSheet

Provides an abstraction layer similar to CSS stylesheets.

User Interface​

These common user interface controls will render on any platform.

Button

A basic button component for handling touches that should render nicely on any platform.

Switch

Renders a boolean input.

List Views​

Unlike the more generic ScrollView , the following list view components only render elements that are currently showing on the screen. This makes them a performant choice for displaying long lists of data.

FlatList

A component for rendering performant scrollable lists.

SectionList

Like FlatList , but for sectioned lists.

Android Components and APIs​

Many of the following components provide wrappers for commonly used Android classes.

BackHandler

Detect hardware button presses for back navigation.

DrawerLayoutAndroid

Renders a DrawerLayout on Android.

PermissionsAndroid

Provides access to the permissions model introduced in Android M.

ToastAndroid

Create an Android Toast alert.

iOS Components and APIs​

Many of the following components provide wrappers for commonly used UIKit classes.

ActionSheetIOS

API to display an iOS action sheet or share sheet.

Others​

These components may be useful for certain applications. For an exhaustive list of components and APIs, check out the sidebar to the left (or menu above, if you are on a narrow screen).

ActivityIndicator

Displays a circular loading indicator.

Alert

Launches an alert dialog with the specified title and message.

Animated

A library for creating fluid, powerful animations that are easy to build and maintain.

Dimensions

Provides an interface for getting device dimensions.

KeyboardAvoidingView

Provides a view that moves out of the way of the virtual keyboard automatically.

Linking

Provides a general interface to interact with both incoming and outgoing app links.

Modal

Provides a simple way to present content above an enclosing view.

PixelRatio

Provides access to the device pixel density.

RefreshControl

This component is used inside a ScrollView to add pull to refresh functionality.

Источник

How to develop Android UI Component for React Native

Sep 26, 2018 · 4 min read

In one of our project that we are developing in React Native, we are facing a problem. We want to use a video player with the text overlay. Though there are lots of implementation of video players in React Native, none of them provides such a functionality. So we decided to develop our own component and use it in the React native code.

This article describes how to convert any Android view component to a React Native component. This is needed when we need to use an Android view or we want to create a custom view component in React Native app.

Create View

Create a React Native project. In the project we are having Android and IOS folders for native code. Open the Android code in Android Studio and create view using native java code.

Implement SimpleViewManager

Write a class which inherits from ViewManager. In this class we specify which View from Android code is used in the React Native code.

The super class SimpleViewManager specifies that we are going to expose VideoView of Android to react native via this class. A ViewManager is a React Native interface responsible for instantiating and updating views in the app. The SimpleViewManager is a generic class that uses our view. We can use any view that already exists in Android like ImageView, VideoView, TextView, LinearLayout or we can create and use our own custom view. Here we are using VideoView.

In the manager use the following steps for initial setup of the component:

1. Write a class which inherits from ViewManager or its subclass ( SimpleViewManager)
2. Implement method getName, which returns a string constant we use to get the manager from React Native
3. Implement createViewInstance(ThemedReactContext reactContext) method in which we create an instance of the component and return the object.

4. If we want to send some data from React Native code to our component using props then we have to write an addition method to accept data in the component. See setVideoPath method in the code below.

Create Package Module

In order to call VideoViewManager from React Native, we have to register it using a Package Module. Write a class that implements the ReactPackage interface.

In the createViewManagers() method, instantiate ViewManager that we want to expose to React Native.

Add Package Module to Application Class

In the Application class of React Native project add package module in getPackages() method .

Implement React Native side

We have to create a JS file and implement the requireNativeComponent function. This function receives two parameters. The first parameter is the name of view manager that we have defined in the ViewManager class and returned via getName() method. The second parameter is an object that have props for the component.

Create VideoView.js in src folder. We need to import the component from this file to use it later.

Using Component

Now we can use our native component in the React Native app.

Thanks for reading. If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.

Источник

Core Components and Native Components

React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native.

Views and mobile development​

In Android and iOS development, a view is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!

Just a sampling of the many views used in Android and iOS apps.

Native Components​

In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components.

React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native’s Core Components.

React Native also lets you build your own Native Components for Android and iOS to suit your app’s unique needs. We also have a thriving ecosystem of these community-contributed components. Check out Native Directory to find what the community has been creating.

Core Components​

React Native has many Core Components for everything from form controls to activity indicators. You can find them all documented in the API section. You will mostly work with the following Core Components:

React Native UI Component	Android View	iOS View	Web Analog	Description
A non-scrollling	A container that supports layout with flexbox, style, some touch handling, and accessibility controls
	Displays, styles, and nests strings of text and even handles touch events
Displays different types of images
A generic scrolling container that can contain multiple components and views
	Allows the user to enter text

In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!

Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The next section makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to skip ahead.

Источник