React-native-swiper: Hide dots and pagination

[JanOwiesniak]

Version

• react-native-swiper v1.5.13
• react-native: 0.50.3

Problem

I have 4 Views inside a Swiper component and showing 4 Dot, one Dot for each View.

I would like to keep 4 Views, but only show 3 Dot. 4th View should not be a visible element of the Pagination but should still be part of the Swiper component. Pagination should be hidden on the 4th View as well.

Example

4 Views but only 3 Dot

1st View

Pagination is _visible_ and has 3 Dots.

• 1st Dot is _active_.
• 2nd Dot is inactive.
• 3rd Dot is inactive.
• 4th Dot is not visible.

2nd View

Pagination is _visible_ and has 3 Dots.

• 1st Dot is inactive.
• 2nd Dot is _active_.
• 3rd Dot is inactive.
• 4th Dot is not visible.

3rd View

Pagination is _visible_ and has 3 Dots.

• 1st Dot is inactive.
• 2nd Dot is inactive.
• 3rd Dot is _active_.
• 4th Dot is not visible.

4th View

Pagination is _not visible_.

• 1st Dot is inactive.
• 2nd Dot is inactive.
• 3rd Dot is inactive.
• 4th Dot is not visible.

Research

It seems like this number is responsible for the number of visible Dot components. Here it is being used to build the Dot components.

Summary

Is there any better approach to achieve what i'm asking for without touching these lines?

Maybe a hidden feature i'm missing to hide / remove Dots and Pagination for a given View index?

[havinhthai]

+1

[mianusmankhalid]

It should be like this.

1st View
Pagination is visible and has 3 Dots.

1st Dot is active.
2nd Dot is inactive.
3rd Dot is inactive.
4th Dot is not visible.

2nd View
Pagination is visible and has 3 Dots.

1st Dot is inactive.
2nd Dot is active.
3rd Dot is inactive.
4th Dot is not visible.

3rd View
Pagination is visible and has 3 Dots. When select 3rd View it should slide to left

1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is active.
4th Dot is inactive.

4th View
Pagination is visible and has 3 Dots.
1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is inactive.
4th Dot is active.

[JanOwiesniak]

@mianusmankhalid can you visualize what you mean by that? I somehow don't get it.

3rd View
Pagination is visible and has 3 Dots. When select 3rd View it should slide to left

1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is active.
4th Dot is inactive.

4th View
Pagination is visible and has 3 Dots.
1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is inactive.
4th Dot is active.

[mianusmankhalid]

Sorry your use case is totally different. I was thinking different use case that is as below.

For example I have total 20 pages but I just want to show 5 dots on screen.
Dots for pages from 6 to 20 will be hidden/not visible on screen,
then if I will swipe right until page 5 then it should slide the paging bar to left to show sixth dot and hide first dot. reverse will be vice versa.

[havinhthai]

I used local state and check my condition in onIndexChanged props of Swiper, then use setState to visible or hidden.

[mianusmankhalid]

@havinhthai can you elaborate little bit more ?

[havinhthai]

@mianusmankhalid This is my code, hope it can help you.

`
export default class IntroSwipe extends Component {
state = {
showPaginate: true,
}

indexChanged = (index) => {
    if (index === 2) {
        this.setState({ showPaginate: false });
    } else {
        this.setState({ showPaginate: true });
    }
}

render() {
    return (
        <Swiper
            loop={false}
            activeDotStyle={{ backgroundColor: 'transparent', borderWidth: 1, borderColor: '#fff' }}
            onIndexChanged={index => this.indexChanged(index)}
            showsPagination={this.state.showPaginate}
        >
            <View><Text>Section one</Text></View>

            <View><Text>Section two</Text></View>

            <View><Text>Section three</Text></View>
        </Swiper>
    );
}

}
`

[mianusmankhalid]

But still 4th Dot will be visible because you are hiding whole pagination on index 2, not dot for last index.

[havinhthai]

@mianusmankhalid You can style them in activeDotStyle or dotStyle prop with condition.

[MuhammadAbdullah54321]

It should be like this.

1st View
Pagination is visible and has 3 Dots.

1st Dot is active.
2nd Dot is inactive.
3rd Dot is inactive.
4th Dot is not visible.

2nd View
Pagination is visible and has 3 Dots.

1st Dot is inactive.
2nd Dot is active.
3rd Dot is inactive.
4th Dot is not visible.

3rd View
Pagination is visible and has 3 Dots. When select 3rd View it should slide to left

1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is active.
4th Dot is inactive.

4th View
Pagination is visible and has 3 Dots.
1st Dot is not visible.
2nd Dot is inactive.
3rd Dot is inactive.
4th Dot is active.

and how would we implement this scenario ??