Implement Custom ViewManager
The ReactImageManager class extends SimpleViewManager of type ReactImageView for this example. The manager will manage ReactImageView objects, which is the custom native view. Native View types are referenced by their names returned by getName in JavaScript.
public class ReactImageManager extends SimpleViewManager<ReactImageView> {
public static final String REACT_CLASS = "RCTImageView";
ReactApplicationContext mCallerContext;
public ReactImageManager(ReactApplicationContext reactContext) {
mCallerContext = reactContext;
}
@Override
public String getName() {
return REACT_CLASS;
}
}
Implement Method createViewInstance
In the createViewInstance method, views are created, the view should be initialized in its default state, and any properties will be set in a subsequent updateView call.
@Override
public ReactImageView createViewInstance(ThemedReactContext context) {
return new ReactImageView(context, Fresco.newDraweeControllerBuilder(), null, mCallerContext);
}
Expose View Property Setters using @ReactProp (or @ReactPropGroup) Annotation
In JavaScript, properties need to be exposed as setters annotated with @ReactProperty (or @ReactPropGroup). As a first argument, the setter method should accept the view to be updated and, as a second argument, a property value. Setter should be a public void method.
A String type argument name is obligatory for annotation @ReactProp. On the JS side, the property is referenced using a name assigned to the @ReactProp annotation.
@ReactProp(name = "src")
public void setSrc(ReactImageView view, @Nullable ReadableArray sources) {
view.setSource(sources);
}
@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, @Nullable String resizeMode) {
view.setScaleType(ImageResizeMode.toScaleType(resizeMode));
}
Register the ViewManager
Finally, the ViewManager must be registered to the application, which is done in a similar way to Native Modules via the member's package function createViewManagers.
@Override
public List<ViewManager> createViewManagers(
ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new ReactImageManager(reactContext)
);
}
Implement the JavaScript Module
Creating the JavaScript module that provides a layer of communication between Java and JavaScript is the very last step before creating your new view. The interface of this module is recommended for documentation.
import { requireNativeComponent } from 'react-native';
/**
* Composes `View`
*
* - src: string
* - borderRadius: number
* - resizeMode: 'cover' | 'contain' | 'stretch'
*/
module.exports = requireNativeComponent('RCTImageView');
Usage
Now, we can use it as a react component in react native
for example,
<RCTImageView
style={styles.Image}
border={2px}
onPlay={() => {
console.log('onPlay');
}}
/>
Frequently Asked Questions
What is React Native?
Facebook created and maintains React Native, an open-source JavaScript framework for developing natively rendered mobile applications.
What is the difference between React and React Native?
We use React for web apps and React Native to develop mobile apps.
Can existing Apps be migrated to React Native?
Generally, your app can run on the device so long as it doesn't require heavy computing tasks.
Conclusion
It's pretty handy to build and use native UI components in React Native if you want to implement a feature that's not supported out of the box in your application. Using React Native for converting your existing native iOS and Android applications is extremely useful. Thanks for reading!
Check out this link if you want to learn the in and out of React Native.
If you are preparing for the upcoming Campus Placements, don't worry. Coding Ninjas has your back. Visit this data structure link for cracking the best product companies.
34+ registered 
