CODEWITHSUNDEEP
androidstylesstylesheetreact-native
Rohan Patel
Rohan Patel

Reputation: 1858

How to inherit stylesheet?

To provide a customization in app, i am making a separate file for styles.

As below

'uses strict'

import {StyleSheet} from 'react-native'

const Styles = StyleSheet.create({
  welcome_page_style:{
    backgroundColor : 'red'
  },
  welcome_page_indicator_style:{
    backgroundColor : 'grey'
  },
  welcome_page_selected_indicator_style:{
    backgroundColor : 'black'
  },
  welcome_page_content_style : {
    flex : 1,
    justifyContent : 'center',
    alignItems : 'center',
    color : 'black',
    fontSize : 15
  }
}
);

Now from other class, i am inheriting above style and using it as below.

import {StyleSheet, View, Text} from 'react-native';
import React, {Component, PropTypes} from 'react';
import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';
var Styles = require('./Theme')

export default class ViewPagerPage extends Component {
  static propTypes = {
      contentList : PropTypes.arrayOf(PropTypes.string).isRequired
  }

  constructor(props){
    super(props)
  }
    render() {
          return (
            <View style={{flex:1}}>
                <IndicatorViewPager
                    style={{flex:1}}
                    indicator={this._renderDotIndicator()}>
                    <View style={Styles.welcome_page_style}>
                       <Text style={Styles.welcome_page_content_style}>{this.props.contentList[0]}</Text>
                   </View>
                </IndicatorViewPager>
                </View>
              );
    }
    _renderDotIndicator() {
          return <PagerDotIndicator pageCount={this.props.contentList.length} dotStyle={Styles.welcome_page_indicator_style}/>;
      }
    }
module.exports = ViewPagerPage;

There is no effect of style.

How do I apply style from another class?

Upvotes: 0

Views: 136

Answers (1)

while1
while1

Reputation: 3370

There is no export call in your Theme.js file. Your code should be:

export const Styles = StyleSheet.create(....

Also in your component file. You can use following as es6 code:

import Style from "./Theme"

Upvotes: 2

Related Questions