AAO-React-Native icon indicating copy to clipboard operation
AAO-React-Native copied to clipboard

<Markdown/> component crashes on nested lists

Open drewvolz opened this issue 6 years ago • 11 comments

[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)

<unknown>
    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
<unknown>
    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

drewvolz avatar Nov 29 '18 15:11 drewvolz

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

hawkrives avatar Nov 29 '18 18:11 hawkrives

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

image

drewvolz avatar Dec 03 '18 05:12 drewvolz

That one's expected. The PropType is incorrect.

hawkrives avatar Dec 03 '18 14:12 hawkrives

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

drewvolz avatar Dec 03 '18 14:12 drewvolz

The PropType we just have to ignore.

hawkrives avatar Dec 03 '18 17:12 hawkrives

Okay 👍

drewvolz avatar Dec 03 '18 17:12 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={{
       [...]
screen shot 2018-12-19 at 12 48 43 am

drewvolz avatar Dec 19 '18 09:12 drewvolz

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.

hawkrives avatar Dec 19 '18 15:12 hawkrives

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 avatar Dec 23 '18 22:12 drewvolz

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

drewvolz avatar Dec 23 '18 22:12 drewvolz

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.

hawkrives avatar Dec 23 '18 23:12 hawkrives