Bottom Indicators are overlapped with a bar in iPhoneX.

[sairohithA007]

This library is very good one for creating swipeable pages. But, in iPhoneX the bottom indicators are being overlapped by the black bar of iPhoneX. I have fixed it in in src/components/indicator/index.js. I'm trying to push it to a separate branch and raise a pull request, but I'm facing with 403 error. I request you to provide the fix.

I have changed the view from this:

<View style={[styles.container, { flexDirection }, style]} {...props}> {dots} </View>

to this:

`<View style={[styles.container, { flexDirection }, style]} {...props}>

{dots}

`

and imported SafeAreaView in react-native.

[jdonald]

Your fix appeared to work for us, except the indicator wobbled up and down, along with something in a mysterious CPU spin loop that would randomly crash with the timeout errors in react-native#15941

We're now resorting to something hackier:

--- a/src/components/indicator/index.js
+++ b/src/components/indicator/index.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import { View, Animated, ViewPropTypes } from 'react-native';
+import { ifIphoneX } from 'react-native-iphone-x-helper';

 import styles from './styles';

@@ -63,7 +64,7 @@ export default class Indicator extends PureComponent {
         'column';

     return (
-      <View style={[styles.container, { flexDirection }, style]} {...props}>
+      <View style={[styles.container, style, { flexDirection, ...ifIphoneX({ bottom: 25 }) }]} {...props}>
         {dots}
       </View>
     );

(with npm install --save react-native-iphone-x-helper)

[n4kz]

Thanks for issue and sorry for delayed reply. I've added SafeAreaView to default page indicator container and released it in 0.9.0.

[sairohithA007]

Thanks for the fix.