CODEWITHSUNDEEP
androidreact-native
KnightsForce
KnightsForce

Reputation: 539

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>
  );
}
}

Upvotes: 0

Views: 937

Answers (2)

Arun Surawat
Arun Surawat

Reputation: 867

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.

Upvotes: 0

KnightsForce
KnightsForce

Reputation: 539

It was necessary to set the flex dimensions.

In the CustomView component, you had to pass style = {{flex: 1}}

Upvotes: 1

Related Questions