Expose TextAncestorContext

[flip-it]

Is there an existing request?

• I have searched for this request

Describe the feature request

The Text component uses the context TextAncestorContext to determine if it is an ancestor of another Text component. It controls what element and style to be rendered.

It would be beneficial to hook in to the same context in the application code. For example when building text components with custom styling using RNW’s Text component, it would make sense to apply some styles only on the parent and let the ancestor inherit.

In the following example the blue text doesn’t get large (because of the default style).

function MyText({ large, blue, children }) {
  return (
    <Text style={[styles.defaults, large && styles.large, blue && styles.blue]}>
      {children}
    </Text>
  );
}

const styles = StyleSheet.create({
  defaults: {
    fontSize: 16,
    fontFamily: "Times"
  },
  large: {
    fontSize: 21
  },
  blue: {
    color: "blue"
  }
});

<MyText large>
  Go to
  <MyText blue href="/page">
    a page
  </MyText>
</MyText>

I imagine using the TextAncestorContext like this:

function MyText({ large, blue, children }) {
  const hasTextAncestor = React.useContext(TextAncestorContext);

  return (
    <Text style={[!hasTextAncestor && styles.defaults, large && styles.large, blue && styles.blue]}>
      {children}
    </Text>
  );
}

CodeSandbox

[necolas]

Duplicate of react-native-community/discussions-and-proposals#495

[necolas]

I'm going to close this because a) React Native needs to make this change too, b) you can create your own Text context to workaround the issues for now.