How to Override Default Indicator Styles

[yyalim]

I want to move dots upper and make them bigger. I can do it by editing, DefaultViewPageIndicator.js file under the node modules but i know it is not right way. Is there better solution for this?

[race604]

You can implement your own indicator similar DefaultViewPageIndicator, and set the renderPageIndicator prop of ViewPager to use it.

[yyalim]

I tried what you say like this;

first copied DefaultViewPageIndicator to my project folders, then code like this...

import ViewPager from 'react-native-viewpager';
import ViewPageIndicator from './Helpers/ViewPageIndicator';

// ...

class Welcome extends React.Component {
// ...
    render() {
        return (
            <ViewPager
                style={styles.ViewPager}
                dataSource={this.state.dataSource}
                renderPage={this._renderPage}
                isLoop={false}
                autoPlay={false}
                renderPageIndicator={ViewPageIndicator}
            />
        );
    }
// ...
}

// etc...

But i got error that says;

Error: Can't add property props, object is not extensible
 stack: 
  Object.Constructor [as renderPageIndicator]                                  index.ios.bundle?…:22611
  React.createClass.renderPageIndicator                                        index.ios.bundle?…:54147
  React.createClass.render                                                     index.ios.bundle?…:54241
  ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext  index.ios.bundle?…:11718
  ReactCompositeComponentMixin._renderValidatedComponent                       index.ios.bundle?…:11740
  wrapper [as _renderValidatedComponent]                                       index.ios.bundle?…:2740
  ReactCompositeComponentMixin.mountComponent                                  index.ios.bundle?…:11237
  wrapper [as mountComponent]                                                  index.ios.bundle?…:2740
  Object.ReactReconciler.mountComponent                                        index.ios.bundle?…:3945
  ReactCompositeComponentMixin.mountComponent                                  index.ios.bundle?…:11243
 URL: undefined
 line: undefined
 message: Can't add property props, object is not extensible

Am i doing it wrong?

[race604]

The renderPageIndicator prop should be a function. In your case, you should use like this:

class Welcome extends React.Component {
    renderIndicator() {
        return <ViewPageIndicator />
    },
    render() {
        return (
            <ViewPager
                style={styles.ViewPager}
                dataSource={this.state.dataSource}
                renderPage={this._renderPage}
                isLoop={false}
                autoPlay={false}
                renderPageIndicator={this.renderIndicator}
            />
        );
    }
// ...
}

[yyalim]

Thank you. This solved my problem.

You should document this, otherwise people like me will never know how to do that.

[amibition521]

I met the same problem with you, could you let me have a look viewpagerindicator code?

[yyalim]

I used default indicator, just edited style. It is here on repo.

[amibition521]

you edit style? which style? Is viewpager style?

[amibition521]

Thanks !!! I solve the question.Thank you answer my question.This is the first I use github.
var styles = StyleSheet.create({
indicators: {
flex: 1,
alignItems: 'center',
position: 'absolute',
top:180,
//bottom: 10,
left: 0,
right: 0,
backgroundColor: 'transparent',
},
});

[yyalim]

No problem, have fun!