microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.39k stars 1.14k forks source link

Nesting non-Text Components in Text is Unsupported #6315

Open NickGerleman opened 4 years ago

NickGerleman commented 4 years ago

We try to QI the child to xaml::Documents::Inline and fail

void TextViewManager::AddView(const XamlView &parent, const XamlView &child, int64_t index) {
  auto textBlock(parent.as<xaml::Controls::TextBlock>());
  auto childInline(child.as<winrt::Inline>());
  textBlock.Inlines().InsertAt(static_cast<uint32_t>(index), childInline);
}

Can be reproed by clicking on the bookmarks button in the redesigned RNTester when none are present, when trying to render this component.

const EmptyState = () => (
  <View style={styles.emptyContainer}>
    <View style={styles.emptyContainerInner}>
      <Image
        source={require('../assets/empty.png')}
        resizeMode="contain"
        style={styles.emptyImage}
      />
      <View>
        <Text style={styles.heading}>Bookmarks are empty</Text>
        <Text style={styles.subheading}>
          Please tap the{' '}
          <Image
            source={require('../assets/bookmark-outline-gray.png')}
            resizeMode="contain"
            style={styles.bookmarkIcon}
          />{' '}
          icon to bookmark examples.
        </Text>
      </View>
    </View>
  </View>
);
NickGerleman commented 4 years ago

https://github.com/microsoft/react-native-windows/pull/4921 tried to fix some cases of this? In https://github.com/microsoft/react-native-windows/pull/6318 I changed the Text VIewManager to Yellowbox in the case of non-Text children instead of crashing, but it feels like we have other issues for this.

chrisglein commented 4 years ago

Related #4927 (error messages aren't great). But then there's the issue of actually supporting, which is hard in XAML. Treating this is a more long term ask and in the shorter time we'll give better feedback.