Cannot get Paragraph to render

[tinashe96]

I've been testing out the different components available but cannot get a Paragraph component to render. I have tried to copy and paste the examples without changing anything and can get all the other components to render except paragraph.

The paragraph takes up more space as I increase lineNumber but does not render.

import Placeholder from 'rn-placeholder';

  render() {
    return (
      <View style={styles.container}>
        <Placeholder.Paragraph
          lineNumber={3}
          textSize={16}
          lineSpacing={5}
          color="#ff0000"
          width="100%"
          lastLineWidth="70%"
          firstLineWidth="50%"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
});

[mfrachet]

Thank you for levering this issue.

It's super weird, the code you provide doesn't work. But the following does:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Placeholder from 'rn-placeholder';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Placeholder.Paragraph
        lineNumber={3}
        textSize={16}
        lineSpacing={5}
        color="#ff0000"
        width="100%"
        lastLineWidth="70%"
        firstLineWidth="50%"
        onReady={false}
      >
        <Text>Placeholder finished</Text>
      </Placeholder.Paragraph>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
});

It seems that using an object instead of React Native stylesheet makes the job 🤔 . I need to invest some time to understand what's going on here. Is this viable / possible for you to use <View style={{ flex: 1 }}/> instead of react native stylesheet as long as I find a solution ?

Thank you again for this 👍

[tinashe96]

You are right, using stylesheet seems to be the problem. I will use inline styling for now.

Another bug which may be related to this is when using the ImageContent with the animate prop while the parent View is styled with Stylesheet causes the component to not render properly. It only renders image box without the lines.

However, If the parent View uses inline styling with animate prop, everything works fine.

If you don't user the animate prop altogether everything works fine regardless of whether you use stylesheet or inline styling.

Example:

...
  render() {
    return (
      <View style={{ flex: 1}}>
        //this ImageContent renders correctly
        <View style={{ flex: 1}}>
          <Placeholder.ImageContent
            animate="shine"
            position="right"
            hasRadius={false}
            lineNumber={5}
            textSize={16}
            lineSpacing={10}
            color="#f7f7f7"
            width="100%"
            lastLineWidth="100%"
            firstLineWidth="70%"
          />
        </View>
        // this ImageContent renders only the image box without lines
        <View style={styles.container}>
          <Placeholder.ImageContent
            animate="shine"
            position="right"
            hasRadius={false}
            lineNumber={5}
            textSize={16}
            lineSpacing={10}
            color="#f7f7f7"
            width="100%"
            lastLineWidth="100%"
            firstLineWidth="70%"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
  },
});

[mfrachet]

Yeah , I thinks it's related, I ll check this too ! Thank you !

[mfrachet]

Ok so it seems the alignItems center kills the thing, remove it make it work on container on my side 😄

[tinashe96]

It works on my end as well when I remove alignItems center. Thank you! 👍

[janhesters]

I have the same bug.

After removing the StyleSheet styling the code worked.

Here is the code without the StyleSheet with inline styles:

<View style={{ flexDirection: "row", paddingVertical: 2 }}>
        <View style={styles.weekdayText}>
          <Placeholder.Line color={backgroundColor} width="80%" animate="fade" />
        </View>
        <View style={styles.hoursText}>
          <Placeholder.Line color={backgroundColor} width="50%" animate="fade" />
        </View>
      </View>

The inline styles of the view just basically where named container and created using StyleSheet.

So this bug is still out there.