React-native: Create a Android custom view

[jujumoz]

I try to implement a custom view in a Android app. In the following code, my Toast is called but then I would like to apply a layout to my view.

public class YouTubeView extends View {

            public YouTubeView(Context context, Context activity) {
                  super(context);
                  Toast.makeText(context, "Well done.", Toast.LENGTH_LONG).show();
            }
}

Can I extend my class from something else to be able to add LinearLayout or whatever, set height and width and put some elements inside ? Can I use a xml layout that I could inflate ? The doc is not so accurate ...

I hope to be clear in my question.
Thank you very much for your answers.

[Pajn]

You should be able to use or create any Android view. I did wrap the TabLayout which do have the tabs as subviews in a layout (can't remember which strait from my head).

[jujumoz]

I finally found how to do, sorry for the useless issue.

[amilcar-andrade]

@jujumoz how did you do it? I am facing a similar problem

[amilcar-andrade]

I am trying to inflate a LL with an xml file

[amilcar-andrade]

Nevermind I figured it out, they should add a better example....

[jujumoz]

@amilcar-andrade : Sorry for the delay.

In your ReactPackage :

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

And then two classes :

public class CustomViewManager extends SimpleViewManager<CustomView> {
 ....
  @Override
    protected CustomView createViewInstance(ThemedReactContext themedReactContext) {
        return new CustomView(themedReactContext);
    }
...
}

and 

public class CustomView extends LinearLayout {
...
  public void init() {
        inflate(getContext(), R.layout.custom_layout, this);
...
}
...
}

In the res/layout folder of your module, just add the custom_layout.xml .

[helengray]

I custom layout witch dynamic add child view by RN setState.The first render the view,it just display ok,but when I change the prop 'source'(the view ReactProp) by setState,it can't display the child view.I had set the view width and height.can you help how to solve

[riteshvish]

@jujumoz Can You share your full code please..

[minhnhatspk]

@jujumoz Hi Jujumoz , can you share your full code ?

[jbrown400]

@minhnhatspk, @riteshvish Here is what I have working:

public class MyNativeComponentManager extends SimpleViewManager<View>{
   @Override
    public CustomView createViewInstance(ThemedReactContext context){
        return new CustomView(context);
    }
}

class CustomView extends LinearLayout {
    public CustomView(Context context) {
        super(context);
        init();
    }
    public void init() {
        inflate(getContext(), R.layout.custom_layout, this);
    }
}

House your custom_layout.xml inside main/res/layout and you should be good!
You can convert the linear layout to a constraint layouts if you would like as well.

[tianzhijiexian]

@helengray Did you fix it?