On web (react-native-web) styles are ignored about react-native-markdown-display HOT 17 CLOSED

Super, I am going to do a bit more on device testing to check that 5.1.0 is all good then ill do a release

from react-native-markdown-display.

oh sorry @vladp one other thing i noticed when working with your example code - you use a custom markdownit instance.

This library exports markdownit if you dont want to include it directly in your deps:

import MarkdownIt from 'react-native-markdown-display/src/MarkdownIt';

from react-native-markdown-display.

I see where the problem is coming from, give me a little while to sort a fix :) seems like the comment i added is completely wrong and its not fine ;-)

from react-native-markdown-display.

Is there any chance you can give me a zip of a working project with react-native-markdown-display in?

I don't know enough about webpack to make a create react app project work properly.

Using the codesandbox i have fixed the errors, but it has created a bunch more styling problems which i am finding hard to debug without a working local project 👍

from react-native-markdown-display.

Sure. let me work on a sample app. It will take a bit of an effort, but will try to make it with minimal dependencies/etc.

Update - created the sample app that reproduces the issue on browsers

git clone https://github.com/vladp/excedone.opnsrc.git
cd excedone.opnsrc/soft/domain.tech/boiler/web-and-mobile/lang.js/react-rnw/richContentApp.1a/
yarn install
yarn web

yarn web will run the webapp on your local machine, port 3000. And it normally spawns the browser so you should see it right away. The sample includes android project too, but something is wrong with (it builds both debug and release with RN 0.60 and RN 0.61.. but app crashes. I figured you did not need the native sample, just the web -- so left it as is)

from react-native-markdown-display.

Thanks @vladp , it does not need to be anything fancy, i just need a project that runs with both react-native-web and react-native-markdown-display in it and i can test it all out :)

thanks for taking the time!

from react-native-markdown-display.

Yep, no problem.

Thank you.

The sample I created is showing the problem on the web.

https://github.com/vladp/excedone.opnsrc/tree/master/soft/domain.tech/boiler/web-and-mobile/lang.js/react-rnw/richContentApp.1a

I also fixed the problem I had over the weekend, where the android build was crashing (even though you just, probably, needed web, I wanted to give you environment where you can see, with hot reloading, both Web and android views (if you like) ).

Instructions to start the web app, are the same as above:

git clone https://github.com/vladp/excedone.opnsrc.git
cd excedone.opnsrc/soft/domain.tech/boiler/web-and-mobile/lang.js/react-rnw/richContentApp.1a/
yarn install
yarn web

from react-native-markdown-display.

wow this is properly broken ;-)

I have your repo running and ill get to fixing it over the weekend! thanks!

from react-native-markdown-display.

OK so i know what the problem is and can fix it, but i need to have a think how best to handle.

The problem is that we manipulate the stylesheet that is exported from src/lib/styles.js as if it were an object (if you export it as just an object you will see it working), which is fine in react-native, but in react-native-web it seems the StyleSheet class converts to integers, which i assume are then at some point converted to classes so they can be re-used on different components.

I will need to do a bit more reading but it might just be the case that we don't use the StyleSheet class for the styles but instead convert them to stylesheets on the components themselves in src/lib/renderRules.js once all of the manipulation is done and the style is finalised.

Do you have experience with this or know what should happen?

from react-native-markdown-display.

Not familiar with that area. I will also give it a think.

I checked RNW issues and there is one comment referencing this difference in behaviour
necolas/react-native-web#1466

But not much else.
Of course, there can be a Platform OS switch (if 'web' do something different).
But I am not sure what actually to do.

When I was seeing this integer values in the debugger, I assume markdown-display is doing it,
and then I got lost how the ast render was trying to actually merge those... Now from your note,
I understand that this is RNW doing this...

In the issue I found above, one person is suggesting to use
StyleSheet.flatten(style) if object is expected

But I am looking at a function
https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/StyleSheet/flattenStyle.js
and it is not clear how this can help (or may be I am looking at the wrong function)....

from react-native-markdown-display.

may be in AstRenderer
convert the extra styles to the numeric form using that StyleSheet.flatten ?
like folks do in react-native-elements here

https://github.com/react-native-elements/react-native-elements/blob/adb2973fb0502d2a5898af926a6a5c18297bca34/src/list/ListItem.js

from react-native-markdown-display.

@vladp can you try 5.1.0-rc1?

from react-native-markdown-display.

Hello. Tried on Web and it works. Thank you very much.

I am running into an error 'Unable to resolve module ./data/PlatformEnum from lib/renderRules.js' when trying the new release on Android.

from react-native-markdown-display.

That's wierd, i removed the whole PlatformEnum and all references in 5.0.0 - can't test Android right now but will do tomorrow!

from react-native-markdown-display.

Update: yes, this android error was my cache problem.

Hmm.. You are right

I cannot find PlatformEnum anywhere in you updated module distro

~/node_modules/react-native-markdown-display$ find . -name "*" -exec grep -Hi PlatformEnum {} \;
returns nothing.

This means it has to be some stale cache that my
rm -rf $TMPDIR/react-native-packager-cache-* && rm -rf $TMPDIR/metro-bundler-cache-* && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache
is not clearing...

I will work on that, so ignore my Android note above, it is likely issue with my environment..

from react-native-markdown-display.

Woo, closed: https://github.com/iamacup/react-native-markdown-display/releases/tag/5.1.0

Thanks for the help @vladp !

from react-native-markdown-display.

ah, thank you for the tip on MarkdownIt, and the fixes

from react-native-markdown-display.