Unable to create custom Hyperlink using HyperLinkButton and TextBlock

[vijay-kadam]

Microsoft.Reactnative exposes interface IViewManager which only works with Frameworkelement. Also there are no shadow nodes in current 0.63 version. I have codebase which is from 0.59-legacy version but now i want to create custom native component in CS using HyperlinkButton and TextBlock. Here is my component class from 0.59-legacy how can i convert below snippet in 0.63 version.

public class ReactHyperlinkButtonViewManager : BaseControlViewManager<HyperlinkButton, ReactSimpleTextShadowNode>
 {
 public override string Name => "RCTHyperlinkButtonView";

 protected override HyperlinkButton CreateViewInstance(ThemedReactContext reactContext)
 {
 var view = new HyperlinkButton();

 view.Content = new TextBlock();
 return view;
 }



 protected override void AddEventEmitters(ThemedReactContext reactContext, HyperlinkButton view)
 {

 }

 public override void OnDropViewInstance(ThemedReactContext reactContext, HyperlinkButton view)
 {
 }

 private void OnPointerEntered(object sender, RoutedEventArgs e)
 {
 }

 private void OnPointerExited(object sender, RoutedEventArgs e)
 {

 }

 private void OnClick(object sender, RoutedEventArgs e)
 {

 }

 private void OnBlur(object sender, RoutedEventArgs e)
 {
 }

 private void OnFocus(object sender, RoutedEventArgs e)
 {

 }



 public override ReactSimpleTextShadowNode CreateShadowNodeInstance()
 {
 return new ReactSimpleTextShadowNode();
 }

 public override void UpdateExtraData(HyperlinkButton view, object extraData)
 {
 var textNode = extraData as ReactSimpleTextShadowNode;
 if (textNode != null)
 {
 textNode.UpdateTextBlock((TextBlock)view.Content);
 }
 }
 }

[chrisglein]

The documentation for view managers is here. Is your question specifically about patterns of how to move from using shadow nodes to whatever the new pattern is? Hopefully the docs I linked are helpful, if they are not let us know what would be helpful. We're always looking for feedback on the docs and trying to improve them.

[vijay-kadam]

Yes my question in specifically about how we can move from shadow node with new view managers. As now i am not able to see Hyperlink and textblock with below code snippet using AttributedViewManager as AttributedViewManager(HyperlinkButton)

`

public class ReactHyperlinkButtonViewManager : AttributedViewManager
{
public override string Name => "RCTHyperlinkButtonView";

public override FrameworkElement CreateView()
{
 var view = new HyperlinkButton();
 view.Content = new TextBlock();
 return view;
}
[ViewManagerProperty("text")]
public void SetText(HyperlinkButton view, string text)
{
 TextBlock txtBlock = (TextBlock)view.Content;
 txtBlock.Text = text;
}

}

`

[chrisglein]

Is that code snippet from your old implementation? After 0.59 AttributedViewManager isn't part of the plan anymore.
With something like HyperlinkButton that's going to not be a fixed size and very much need to measure text, you're going to run into an issue without this: #6411. In the meantime try assigning a fixed width/height and see if that gets your element to show up.

If you you turn on the Live Visual Tree in Visual Studio do you see the elements you've created? That may help understand what is and isn't working.

[rectified95]

vijay-kadam As Chris says, our docs should be helpful in understanding how to use custom view managers in your native modules.
If you want a concrete example of what the transition can look like, you can compare DatePickerViewManager.cpp in this repo, with my community module implementation: react-native-datetimepicker/datetimepicker#157

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 14 days of this comment.