diff --git a/docs/native-components-android.html b/docs/native-components-android.html index afb047be6ea..a71125a4f9e 100644 --- a/docs/native-components-android.html +++ b/docs/native-components-android.html @@ -11,40 +11,25 @@ public class ReactImageManager extends 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) { + public void setSrc(ReactImageView view, @Nullable String src) { + view.setSource(src); } - @ReactProp(name = "borderRadius") + @ReactProp(name = "borderRadius", defaultFLoat = 0f) public void setBorderRadius(ReactImageView view, float borderRadius) { + view.setBorderRadius(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) { - super.updateView(view, props); - - if (props.hasKey(PROP_RESIZE_MODE)) { - view.setScaleType( - ImageResizeMode.toScaleType(props.getString(PROP_RESIZE_MODE))); - } - if (props.hasKey(PROP_SRC)) { - view.setSource(props.getString(PROP_SRC)); - } - if (props.hasKey(PROP_BORDER_RADIUS)) { - view.setBorderRadius(props.getFloat(PROP_BORDER_RADIUS, 0.0f)); - } - view.maybeUpdateView(); - } -}

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

@Override + public void setResizeMode(ReactImageView view, @Nullable String resizeMode) { + view.setScaleType(ImageResizeMode.toScaleType(resizeMode)); + }

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.

@Override public List<ViewManager> createViewManagers( ReactApplicationContext reactContext) { return Arrays.<ViewManager>asList( new ReactImageManager() ); - }

6. 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. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the propTypes.

// ImageView.js + }

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. Much of the effort is handled by internal React code in Java and JavaScript and all that is left for you is to describe the propTypes.

// ImageView.js var { requireNativeComponent } = require('react-native');