'React Native. Native Android component is not rendered
I want to add a component from Android to React Native. But it does not render and does not have dimensions. How can I fix this and display the component? Code classes to connect the component. I used guides and other people's examples.
UPD: There was an error: REACT_CLASS = "RCTImageView"; It remains from the rest of the attempts. Changed back to CustomView - did not help.
CustomViewManager.java:
public class CustomViewManager extends SimpleViewManager<TextView> {
public static final String REACT_CLASS = "CustomView";
@Override
public String getName() {
return REACT_CLASS;
}
@Override
public TextView createViewInstance(ThemedReactContext context) {
TextView tv = new TextView(context);
tv.setText("Текст");
tv.setTextColor(Color.BLACK);
tv.setWidth(100);
tv.setHeight(100);
return tv;
}
}
CustomViewPackage.java:
public class CustomViewPackage implements ReactPackage {
@Override
public List<ViewManager>
createViewManagers(ReactApplicationContext reactContext) {
return Arrays.<ViewManager>asList(
new CustomViewManager()
);
}
@Override
public List<NativeModule>
createNativeModules(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
MainApplication.java:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new CustomViewPackage()
);
}
CustomTextView.js:
import React from 'react';
import {
requireNativeComponent
} from 'react-native';
module.exports = requireNativeComponent('CustomView');
App.js:
export default class App extends Component {
render() {
return (
<View
style={ styles.container }
>
<CustomView/>
</View>
);
}
}
Solution 1:[1]
It was necessary to set the flex dimensions.
In the CustomView component, you had to pass style = {{flex: 1}}
Solution 2:[2]
Please make sure you wrote acceptable CSS. Don't use like '12pt', '12', and any font-family CSS which are not installed in our app. If your android simulator is breaking in Expo editor please check all the components CSS agiain.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | |
Solution 2 | Arun Surawat |