Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

View has wrong space computing

See original GitHub issue

OS: All

React-pdf version: 1.0.0-alpha.17

Description: Hi, I have found very annoying problem with View component. When View is applied as a wrapping component, the space computing between components is wrong.

For example repeating this code inside Page component:

<Page style={styles.body} wrap>
    <Text style={styles.text}>
        Lorem ipsum
    </Text>
    <View style={styles.view}>
        <Image style={styles.image} src="/static/images/quijote2.png" />
        <Text style={styles.text}>
            Lorem ipsum
        </Text>
        <View wrap={false}>
            <Image style={styles.image} src="/static/images/quijote2.png" />
            <Text style={styles.text}>
                Lorem ipsum
            </Text>
        </View>
    </View>
</Page>

results in situation, that the View with wrap={false} is not applied to the page if the remaining space is not sufficient (which is correct), but the space which is skipped is not added to the next page for following components and overlaps them.

Repl sharing URL is currently not working for me, so the full code is as follows:

const Test= () => (
  <Document>
    <Page style={styles.body} wrap>
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	  
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	  
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	  
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	  
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	  
	  <Text style={styles.text}>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
	  </Text>
	  <View style={styles.view}>
		<Image
			style={styles.image}
			src="/static/images/quijote2.png"
		  />
		  <Text style={styles.text}>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
			Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		  </Text>
		  <View wrap={false}>
			<Image
				style={styles.image}
				src="/static/images/quijote2.png"
			  />
			<Text style={styles.text}>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
			</Text>
		  </View>
	  </View>
	 
    </Page>
  </Document>
);

Font.register(
  'https://fonts.gstatic.com/s/oswald/v13/Y_TKV6o8WovbUd3m_X9aAA.ttf',
  { family: 'Oswald' },
);

const styles = StyleSheet.create({
  body: {
    paddingTop: 35,
    paddingBottom: 65,
    paddingHorizontal: 35,
  },
  text: {
    margin: 12,
    fontSize: 14,
    textAlign: 'justify',
    fontFamily: 'Times-Roman'
  },
  image: {
    marginVertical: 15,
    marginHorizontal: 100,
  },
  view: {
	color: "red",
  },
});

ReactPDF.render(<Test/>);

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
diegomuracommented, Oct 9, 2018

Couldn’t see it yet sorry. I’m on vacations now for a few more days 😊 I’ll check it out as soon as I can after my return

0reactions
ozifgcommented, Dec 9, 2018

After upgrade to 1.0.0-alpha.25 I see no more overlapping. It seems to be solved in this version. Thank you for your help.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Free up drive space in Windows - Microsoft Support
Learn how you can free up drive space in Windows. Keep your PC running smoothly and up to date by increasing the disk...
Read more >
Ctrl + space giving error saying 'Computing additional info ...
So I am using Eclipse and I have installed Scala IDE. There when I press Ctrl + space , I get an error...
Read more >
How Space and Time Could Be a Quantum Error-Correcting ...
As a bonus, researchers hope holographic space-time might also point the way to scalable quantum computing, fulfilling the long-ago vision ...
Read more >
The computer errors from outer space - BBC Future
She knew immediately that something was wrong with her pacemaker, ... what's called space weather, an unnerving prospect looms: we could see ......
Read more >
Space and Time Could Be a Quantum Error-Correcting Code
Unlike binary bits of information in ordinary computers, “qubits” consist of quantum particles that have some probability of being in each ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

How to open rendered PDF in a new tab

Next page

"Cannot enlarge memory arrays" error when document is big.