How to parse markdown in react-native (esp. android)? - react-native

Since React Native webview components is only support iOS, I wonder what other options are available to parse markdown strings for android. Anyone had worked with markdown in React Native for Android app?

See if this solves the problem: https://github.com/lwansbrough/react-native-markdown

I recommend react-native-markdown-view which we're using at 2minute.com.
It's the only RN Markdown lib I found that properly renders a list. It's also the only one to have merged a pull request in the last month.
Alternatives: I've tried others in some depth but they can't do lists properly. react-native-simple-markdown renders the list bullet in the middle instead of at the top of the list item, and the styling was also bugged. react-native-markdown-renderer renders lists off the right side of the screen. react-native-markdown hasn't been touched in 3 years so I skipped that one.

Related

Are there some PDF display plagins for React native expo

I am working on an e-library project, where we have to display pdf books for children.
I would like to know if I can find some PDF plugins to display PDF nicely.
I used to have the same problem and I figured out, that Android works very well with rn-pdf-reader-js. On the other hand, for ios WebView component is 100% sufficient to display PDF content, so I switched (depends on the platform) between the two of them.

react native html view displaying space as asterisk

Current days I am interested in how to display markdown content in my react native app.Then I came across with react-native-html-view.But when I use this with fetched data to create my own custom component It displays all space fractions as an asterisk like ***.Can anyone help me to solve this collapsible fraction issue?
use one of this libs
React Native Markdown Renderer
React Native Markdown Display

Are there any instruments to watch screen layout in React Native without running app?

I familiarized with Android development and started to read some information about React Native. And one of the problem which I faced with is that I can't see the screen layout.
In Android Studio, for example, I could see the design of my XML layout without running app. Maybe there are such instruments in React Native, but I didn't see them in WebStorm nor VSCode. Maybe I am wrong and they exist, so, can you help me to find them in such situation?
Some modules format the xml document in vscode,
but others have previewable tools.
XML TOOLS
Extension Settings
xmlTools.enableXmlTreeView: Enables the XML Tree View for XML
documents.
xmlTools.enableXmlTreeViewMetadata: Enables attribute and child
element counts in the XML Document view.
xmlTools.enableXmlTreeViewCursorSync: Enables auto-reveal of
elements in the XML Document view when a start tag is clicked in the
editor.
xmlTools.enforcePrettySelfClosingTagOnFormat: Ensures a space is
added before the forward slash at the end of a self-closing tag.
...
I also had the same problem where there is no layout view in VSCode like in Android Studio. My suggestion is to mock out your View containers with coloured boxes. This is an example of designing a screen's header, so I'm making sure the spacing and sizing is all good:

Drawer / hamburger menu in React Native

I need to create an app using react native in both android and iOS and i'm still a newbie. So,now i need to implement a drawer like shown in the image above.I've already searched for an example or project that meets with my needs but too badly, i couldn't find anything suitable for me.So can you help me and thank you
http://2.bp.blogspot.com/-1_Fi6T2l1LY/VUfHyQlwenI/AAAAAAAAC8g/wkWN42gNaDw/s320/device-2015-05-04-101820_1.gif
You could use this library:
https://github.com/react-native-material-design/react-native-material-design
I think it can solve your problem
This RN starter has an example as well:
https://github.com/infinitered/ignite
You should not implement it from scratch yourself but instead you can use a starter project like this. If you want these animations on the drawer icon you can also check the Airbnb's Lottie.
How to implement the hamburger menu with react-native-paper:
https://callstack.github.io/react-native-paper/integrate-app-bar-with-react-navigation.html
https://medium.com/#mdeepikayadav029/side-menu-bar-after-login-screen-in-react-native-4cabee7ca2b0
At the time, this one worked for me (0.63.4). The others I found were from previous versions (0.45) and required a lot of adjustments regarding newer version implementations. No other extra files are needed except these ones after creating a unmanaged blank project:
App.js
LoginScreen.js
HeaderComponent.js
FirstScreen.js
SecondScreen.js

How to delete a ListItem by Swiping out the element?

I am trying to find a Component how to remove my ListItems in my ListView. Actually there is a Module working for iOS react-native-swipeout where you can swipeout the elements. I need the same for Android or atleast something similar.
Maybe someone has figured this out, and could tell me how they solved deleting Items from a ListView in a React Native Android App
The react native team removed their experimental implementation for the SwipeableFlatList component (which uses internally a FlatList instead really really deprecated ListView).
I rescued the original code from v0.59 which they removed on v.60 and its available as a npm module here
And theres a good how-to on medium here