<Markdown/> component crashes on nested lists

[drewvolz]

[full error] Invariant Violation: Nesting of within is not currently supported

``` This error is located at: in glamorous(glamorous(glamorous.View)) (created by ReactMarkdown) in RCTText (at Text.js:151) in TouchableText (at Text.js:274) in SelectableText (created by glamorous(glamorous(SelectableText))) in glamorous(glamorous(SelectableText)) (at list.js:25) in RCTView (at View.js:45) in glamorous.View (at list.js:23) in ListItem (created by glamorous(ListItem)) in glamorous(ListItem) (created by ReactMarkdown) in RCTView (at View.js:45) in glamorous(glamorous(glamorous.View)) (created by ReactMarkdown) in RCTView (at View.js:45) in ReactMarkdown (at markdown.js:51) in Markdown (at privacy.js:18) in PrivacyView (at SceneView.js:9) in SceneView (at StackViewLayout.js:483) in RCTView (at View.js:45) in AnimatedComponent (at screens.js:51) in Screen (at StackViewCard.js:42) in Card (at createPointerEventsContainer.js:26) in Container (at StackViewLayout.js:507) in RCTView (at View.js:45) in ScreenContainer (at StackViewLayout.js:401) in RCTView (at View.js:45) in StackViewLayout (at withOrientation.js:30) in withOrientation (at StackView.js:49) in RCTView (at View.js:45) in Transitioner (at StackView.js:19) in StackView (at createNavigator.js:57) in Navigator (at createKeyboardAwareNavigator.js:11) in KeyboardAwareNavigator (at createNavigationContainer.js:376) in NavigationContainer (at app.js:65) in ThemeProvider (at app.js:64) in Provider (at app.js:63) in App (at renderApplication.js:34) in RCTView (at View.js:45) in RCTView (at View.js:45) in AppContainer (at renderApplication.js:33) index.bundle?platform=ios&dev=true&minify=false:10566:20 updateContextConsumer index.bundle?platform=ios&dev=true&minify=false:18678:31 performUnitOfWork index.bundle?platform=ios&dev=true&minify=false:21415:27 workLoop index.bundle?platform=ios&dev=true&minify=false:21449:47 renderRoot index.bundle?platform=ios&dev=true&minify=false:21520:21 performWorkOnRoot index.bundle?platform=ios&dev=true&minify=false:22240:23 performWork index.bundle?platform=ios&dev=true&minify=false:22167:30 performSyncWork index.bundle?platform=ios&dev=true&minify=false:22143:20 batchedUpdates$1 index.bundle?platform=ios&dev=true&minify=false:22326:28 batchedUpdates index.bundle?platform=ios&dev=true&minify=false:12101:37 _receiveRootNodeIDEvent index.bundle?platform=ios&dev=true&minify=false:12158:23 receiveTouches index.bundle?platform=ios&dev=true&minify=false:12188:34 __callFunction index.bundle?platform=ios&dev=true&minify=false:4430:49 index.bundle?platform=ios&dev=true&minify=false:4203:31 __guard index.bundle?platform=ios&dev=true&minify=false:4384:15 callFunctionReturnFlushedQueue index.bundle?platform=ios&dev=true&minify=false:4202:21 ```

[hawkrives]

Somehow it's trying to render a View inside a ListItem, which is a piece of text

I think it's broken on stable too

[drewvolz]

Another markdown related issue on contacts, dictionary, faqs, help, legal, privacy, and other-modes...

Warning: Failed prop type: Invalid prop containerTagName of type object supplied to ReactMarkdown, expected function

[hawkrives]

That one's expected. The PropType is incorrect.

[drewvolz]

Yep, one we need to fix on our end, correct?

[hawkrives]

The PropType we just have to ignore.

[drewvolz]

Okay 👍

[drewvolz]

Debugging this a bit and starting to understand how it works. Looks like I can filter out types that seem to generate underlying view components.

I'm pointing my finger at the list items now because I can filter them out and see most of the view.

I am using disallowedTypes={['item']} or disallowedTypes={['list']} to generate the below screenshot. It's not pretty without the list formatting, but at least we understand more about what might be happening.

<ReactMarkdown
       containerTagName={View}
       disallowedTypes={['item']}
       renderers={{
       [...]

or

<ReactMarkdown
       containerTagName={View}
       disallowedTypes={['list']}
       renderers={{
       [...]

[hawkrives]

Looking at the markdown file again, I think that our issue is the nested lists.

I wonder how to represent <ul><li><ul><li></li></ul></li></ul> in a View/Text world.

[drewvolz]

Yes, it's with nested lists. Thoughts on if we should solve this particular crash by not nesting the elements in the privacy policy? I get that's papering over the issue.

We can change this

- When you fetch any data besides your personal information, your
  requests may reach servers that we control.  Whenever your app makes
  such a request, the following information is logged:
  - _Your public IP address_.  We do not use this to identify you or
    for tracking purposes, and this is logged only for diagnostic
    purposes.
  - _The version of All About Olaf you are using and information about
    your phone_, which is sent as part of your device's request.  This
    data is intentionally vague so that we can also not use this to
    identify you.
  - _What you requested and how long it took_, which is widely
    considered to be fully anonymous.

to this

When you fetch any data besides your personal information, your requests may reach servers that we control.  Whenever your app makes such a request, the following information is logged:
  1. _Your public IP address_.  We do not use this to identify you or for tracking purposes, and this is logged only for diagnostic purposes.
  2. _The version of All About Olaf you are using and information about your phone_, which is sent as part of your device's request.  This data is intentionally vague so that we can also not use this to identify you.
  3. _What you requested and how long it took_, which is widely considered to be fully anonymous.

[drewvolz]

I do understand that the problem is within here, though. https://github.com/StoDevX/AAO-React-Native/blob/master/modules/markdown/list.js

[hawkrives]

I think we should remove the nested lists for now, at least, especially since we are probably crashing every released version of the app that uses our policy, currently. At least 2.5 and 2.6.