From f4494aacb9f1fb863378059a8677ce68ecd6597b Mon Sep 17 00:00:00 2001 From: Travis CI Date: Wed, 28 Oct 2015 20:59:56 +0000 Subject: [PATCH] update website --- docs/native-components-android.html | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/docs/native-components-android.html b/docs/native-components-android.html index 2d3681440c5..afb047be6ea 100644 --- a/docs/native-components-android.html +++ b/docs/native-components-android.html @@ -1,4 +1,4 @@ -Native UI Components – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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, it's quite easy to 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 ImageViewcomponent 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. An example of when you would use ViewManager instead is when wrapping a component with FrameLayout, such as ProgressBar.

These subclasses are essentially singletons - only one instance of each is created by the bridge. They vend 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.

Vending a view is simple:

  1. Create the ViewManager subclass.
  2. Annotate the view properties with @UIProp
  3. Implement the createViewInstance method
  4. Implement the updateView method
  5. Register the manager in createViewManagers of the applications package.
  6. 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.

... +Native UI Components – React Native | A framework for building native apps using React
React Native

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills

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, it's quite easy to 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 ImageViewcomponent 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 vend 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.

Vending a view is simple:

  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.

... public class ReactImageManager extends SimpleViewManager<ReactImageView> { @@ -7,14 +7,20 @@ public class ReactImageManager extends getName() { return REACT_CLASS; - }

2. Annotate the view properties #

Properties that are to be reflected in JavaScript are annotated with @UIProp. The types currently supported are BOOLEAN, NUMBER, STRING, MAP and ARRAY. Each property is declared as a public static final String and its assigned value will be the name of the property in JavaScript.

@UIProp(UIProp.Type.STRING) - public static final String PROP_SRC = "src"; - @UIProp(UIProp.Type.NUMBER) - public static final String PROP_BORDER_RADIUS = "borderRadius"; - @UIProp(UIProp.Type.STRING) - public static final String PROP_RESIZE_MODE = ViewProps.RESIZE_MODE;

3. 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.

@Override + }

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.

@Override public ReactImageView createViewInstance(ThemedReactContext context) { return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), mCallerContext); + }

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 argumen of the setter. The following type of values are currently supported: boolean, int, float, double, String, 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 primitive 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.

@ReactProp(name = "src") + public void setSrc(ReactImageView view, String src) { + } + + @ReactProp(name = "borderRadius") + public void setBorderRadius(ReactImageView view, float borderRadius) { + } + + + @ReactProp(name = ViewProps.RESIZE_MODE) + public void setResizeMode(ReactImageView view, String resizeMode) { }

4. Implement method updateView #

Setting properties on a view is not handled by automatically calling setter methods as it is on iOS; for Android, you manually invoke the setters via the updateView of your ViewManager. Values are fetched from the CatalystStylesDiffMap and dispatched to the View instance as required. It is up to a combination of updateView and the View class to check the validity of the properties and behave accordingly.

@Override public void updateView(final ReactImageView view, final CatalystStylesDiffMap props) {