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.

Optionally render page

See original GitHub issue

Which OS ?

iOS & Android, doesn’t matter.

Version

  • react-native-swiper v1.5.13 & v1.6.0@nightly.1
  • react-native v0.57.8

Expected behaviour

A page that should be optionally rendered doesn’t show up at all and reduces the total amount of pages to one less than if optional page is rendered.

Actual behaviour

An empty page is shown, but the slide should be skipped completely.

Steps to reproduce

<Swiper {...swiperProps}>

  <View style={stylePage}>
    <Text>Page 1 (always)</Text>
  </View>

  <View style={stylePage}>
    <Text>Page 2 (always)</Text>
  </View>

  { renderPage3 && // if this is set to "false", an empty page is shown
    <View style={stylePage}>
      <Text>Page 3 (optional)</Text>
    </View>
  } 

  <View style={stylePage}>
    <Text>Page 4 (always)</Text>
  </View>

</Swiper>

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10

github_iconTop GitHub Comments

1reaction
ArrayZoneYourcommented, Jul 1, 2019

@skizzo It is a missing feature, I will try to support it in this week : )

0reactions
ArrayZoneYourcommented, Jul 8, 2019

The logic of updating the current index also has some problem (when the index of the page which you want to remove is less than current index ), I will fix it in next nightly version.😄

Read more comments on GitHub >

github_iconTop Results From Across the Web

Conditional Rendering
Conditional Rendering. In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending ......
Read more >
7 Ways to Implement Conditional Rendering in React ...
Conditional rendering is a term to describe the ability to render different user interface (UI) markup if a condition is true or false....
Read more >
Six methods to achieve conditional rendering in React
Conditional rendering in React works the same way conditions work in JavaScript. In this article, we look at different ways to handle ...
Read more >
React conditional rendering: 9 methods with examples
In React, conditional rendering refers to the process of delivering elements and components based on certain conditions. There's more than one ...
Read more >
How to conditionally render a component from the property ...
Well I have a react dropdown component <Dropdown/> from Fluent UI, I want to display the component based in the dropdown selection, ...
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