Comments (4)
Hello @natashache!
Could you please try this?
const customStyles = StyleSheet.flatten({
unstyled: {
marginBottom: 7,
fontSize: 14,
},
});
It's because the type of the blocks is unstyled
. So I think you need to use it in your styles.
π
from react-native-draftjs-render.
@Canedo any update on this?
from react-native-draftjs-render.
Hello @natashache .
I'll take a look about that issue in the next couple days. Can you provide us how your data is coming? How the contentState is on your scenario? It'd help a lot!
Thank you for your issue!
from react-native-draftjs-render.
Hi @Canedo
The contentState is from our database, which is stored as string.
After fetching the data from the database, I do this:
blocks = getRNDraftJSBlocks({
contentState: JSON.parse(soundcast.long_description),
customStyles,
});
where soundcast.long_description
is the content state string from the database. And then in render function I have:
<View style={[styles.section, { paddingTop: 31 }]}>
{
blocks
}
</View>
Here is an example of JSON.parse(soundcast.long_description)
. Sorry it's kind of long.
{ entityMap: {},
blocks:
[ { key: 'cb1uu',
text: 'Despite promises of "fast and easy" results from slick marketers, real personal growth is neither fast nor easy. The truth is that hard work, courage, and self-discipline are required to achieve meaningful results--results that are not attained by those who cling to the fantasy of achievement without effort.',
type: 'unstyled',
depth: 0,
inlineStyleRanges: [Object],
entityRanges: [],
data: {} },
{ key: 'acahp',
text: 'Personal Development for Smart People reveals the unvarnished truth about what it takes to consciously grow as a human being. In this course, you\'ll learn practical, insightful methods for improving your health, relationships, career, finances, and more. You\'ll see how to become the conscious creator of your life instead of feeling hopelessly adrift, enjoy a fulfilling career that honors your unique self-expression, wake up early feeling motivated, energized, and enthusiastic, achieve inspiring goals with disciplined daily habits and much more.',
type: 'unstyled',
depth: 0,
inlineStyleRanges: [Object],
entityRanges: [],
data: {} },
{ key: '8t85h',
text: 'With his refreshingly honest yet highly motivating style, Steve Pavlina will help you courageously explore, creatively express, and consciously embrace your extraordinary human journey.',
type: 'unstyled',
depth: 0,
inlineStyleRanges: [Object],
entityRanges: [],
data: {} } ] }
Here is what it looks like when rendered on the web:
And here is what it looks like when rendered on mobile app, using react-native-draftjs-render. As you can see, no space between paragraphs:
from react-native-draftjs-render.
Related Issues (20)
- δΈθ½½δΈζ₯η樑ε沑ζζε ζδΉεοΌ HOT 2
- DraftJs / contentState does not exits HOT 1
- Can we customize marginLeftWithoutDepth? HOT 1
- Warning : Can't call setState (or forceUpdate) on an unmounted component. HOT 3
- Change font family based on block type + inline style HOT 2
- Can't display Image HOT 1
- react native draft Objects are not valid as a React child HOT 3
- Add TypeScript support HOT 1
- How to get the contentState from an EditorState instance ? HOT 3
- What is DraftJs/contentState? HOT 3
- Invariant Violation: Invariant Violation: Nesting of <View> within <Text> is not currently supported HOT 1
- writingDirection prop is not passed as textProps HOT 2
- undefined is not an object 'contentstate.blocks' HOT 7
- Custom styles not working HOT 2
- problem when fetch contentState from api
- support backgroundColor in custom styles HOT 4
- contentState is giving error HOT 1
- Cannot read property 'cache' of undefined HOT 1
- CSS style is not working... HOT 2
- Image is not rendering. Does anybody faced this problem? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-draftjs-render.