Has anyone tried to port DraftJs with React Native. Any ideas how to do it?
https://github.com/facebook/draft-js/issues/138
As the link showing, It's a hard work to implement a complete new native version editor with current draft model. Some hard points are I can see:
Keyboard and cursor control. editable content did much help for it in Draft. editable content is already supported by browsers.
Draft model is composed with blocks and inline-things. It's match the HTML model, making map Draft model to DOM easily. But iOS/Android layout not composed with block and inline-things.
H5 has flex and powerful style control. You can use all CSS styles in Draft with the help of style mappers, leaving the render work to browsers. But how it work in native? Android/iOS SDK not provide such powerful style control to the views.
After all, Draft is announced as a Editor Framework, not a ready to use editor. It's OK to limit your editor functions and have a native version, but I'd rather to embed a WebView to have a really powerful H5 Editor.
Related
I want to create a button using Skia library in React Native. The width of button should expand acconding to text or content in it.
Thanks.
If you're aiming for creating a button with the Skia library in React Native you probably have some drawing magic on your mind. If you really need this for a button then I would advice to check out the excellent tutorials of William Candillon: https://www.youtube.com/c/wcandillon/videos
In the example shown here at Shopify you can already find some tips towards building the button you would need: https://shopify.engineering/react-native-skia-shopify
Material UIs (MUI's) documentation is perfectly broken here: At
https://mui.com/system/getting-started/overview/#all-inclusive
the last line reads:
"See ->Advanced for details on how to use MUI System with non-MUI components."
Yet the link to Advanced is dead as of today (404). Is there a way to use the style system outside of MUIs components?
I think that's the Custom Components page, it was fixed here but not live yet I guess
I have a React Native App (using Expo) and I’m trying to implement a map/search layout similar to what is in Yelp or many other location-based hybrid map/search views (eg I checked all of the food related apps on my phone :slight_smile: McDonalds, Starbucks, DoorDash):
Specifically, I’m curious how to create that sort of draggable panel from the bottom, where you can drag it so that it overlaps the map.
Yelp/DoorDash technically have 3 states for this bottom panel: a completely collapsed state, an intermediate (default) state, and a completely expanded state, and you can even flick from completely collapsed to completely expanded.
Is there a standardized way to accomplish this with React Native? (I'm a little out-of-touch with the RN ecosystem.)
Ahh, here's a third party library where this behavior is implemented, and even the example in the documentation is off a map searchview. https://github.com/octopitus/rn-sliding-up-panel
I want to use a loader such as the one on Youtube before the content is loaded. On youtube, every piece of content uses a light gray color loader before rendering the actual content. It is made of squares and circles to simulate the actual content about to be rendered.
Do you know what it is ? Surprisingly, I couldn't find it neither on material-ui nor via a google search.
ok, I found the solution to my problem.
What I was looking for is called "placeholder UI", or "skeleton screen".
In my case, I want to use it with ReactJS. Semantic UI React has the placeholder part of the library :
https://react.semantic-ui.com/elements/placeholder/#content-line
Material-UI, and other styling libraries do not. There are however external packages for that, such as :
https://github.com/buildo/react-placeholder
https://github.com/danilowoz/react-content-loader
https://github.com/dvtng/react-loading-skeleton
It's also possible to implement skeleton screens oneself using a combination of html, svg and css.
I'm trying to implement a blog app in my React App. I'm seeking for a very complete text editor allowing to handle very globally the properties of the text. I have though of DraftJS but seems it isn't allowing a very big set of settings parameters.
Existing a more complete ReactJS's text editor ?
Update:
React Draft Wysiwyg seems pretty good and easily customizable,
Any hints would be great,
Thanks