Quantcast
Channel: Active questions tagged react-native+android - Stack Overflow
Viewing all articles
Browse latest Browse all 29432

Custom Native React Native UI Component which implements text styles

$
0
0

I'm working on a custom native RN UI component in Android based on these docs: https://reactnative.dev/docs/native-components-android

The component extends TextView in Android and in order to expose some of that functionality in Javascript (e.g. text selection, simple HTML styling).

The issue I'm facing is that I can't seem to get text styling to work properly. Let's say my component is called CustomTextView

In React Native, I would expect that I could do:

<CustomTextView style={{color: 'red'}} text="blah"/>

This will display the text blah in black, not red. How can I inherit from React Native's text styles in Android? Other styling rules (e.g. width, height) work properly.

Below is my implementation of CustomTextView in Java

CustomTextViewManager.java

public class CustomTextViewManager extends SimpleViewManager<TextView> {    public static final String REACT_CLASS = "RCTCustomTextView";    @Override    public String getName() { return REACT_CLASS; }    @Override    public TextView createViewInstance(ThemedReactContext context){        TextView view = new TextView(context);        view.setTextIsSelectable(true);        return view;    }    @ReactProp(name = "text")    public void setText(TextView view, String text) {        Spanned spanned;        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {            spanned = Html.fromHtml(text, Html.FROM_HTML_MODE_COMPACT);        } else {            spanned = Html.fromHtml(text);        }        view.setText(spanned);    }}

Viewing all articles
Browse latest Browse all 29432

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>