shinchit/App.js

## App.js
import React from 'react';
import {
  createAppContainer,
} from 'react-navigation';
import {
  createStackNavigator,
} from 'react-navigation-stack';
import { Provider } from 'mobx-react';

const stores = {
  styleStore: new StyleStore(),
};

const RootStack = createStackNavigator({ /* your routes here */ });
const App = createAppContainer(RootStack);
export default class Whatever extends React.Component {
  render() {
    return (
      <Provider {...stores}>
        <App />
      </Provider>
    );
  }
}

## SomeScreen.js
import React from 'react';
import {
  Container,
  Content,
  Text,
  Header,
  Body,
  Title,
} from 'react-native';
import { inject, observer } from 'mobx-react';

@inject('styleStore')
@observer
class SomeScreen extends React.Component {
  render() {
    const { styleStore } = this.props;

    return (
      <Container>
        <Header style={styleStore.styles.header}>
          <Body>
            <Title style={styleStore.styles.title}>Title</Title>
          </Body>
        </Header>
        <Content style={styleStore.styles.content}>
          <Text style={styleStore.styles.text}>Hello, World!!</Text>
        </Content>
      </Container>
    );
  }
}

## StyleStore.js
import { computed } from 'mobx';
import EStyleSheet from 'react-native-extended-stylesheet';

EStyleSheet.build({
  $primary100: 'rgba(168,219,168,1.00)',
  $primary50: 'rgba(168,219,168,0.50)',
  $dark087: 'rgba(117,117,117,0.87)',
  $dark026: 'rgba(117,117,117,0.26)',
  $titleFontSize: 15,
  $headerMarginBottom: 15,
});

class StyleStore {
  mainStyles = EStyleSheet.create({
    text: {
      color: '$dark087',
    },
    content: {
      flex: 1,
      width: '100%',
      backgroundColor: '$primary100',
    },
    title: {
      fontSize: '$titleFontSize',
      color: '$dark087',
    },
    header: {
      marginBottom: '$headerMarginBottom',
    },
  });

  @computed
  get styles() {
    return this.mainStyles;
  }
}

export default StyleStore;
	import React from 'react';
	import {
	createAppContainer,
	} from 'react-navigation';
	import {
	createStackNavigator,
	} from 'react-navigation-stack';
	import { Provider } from 'mobx-react';

	const stores = {
	styleStore: new StyleStore(),
	};

	const RootStack = createStackNavigator({ /* your routes here */ });
	const App = createAppContainer(RootStack);
	export default class Whatever extends React.Component {
	render() {
	return (
	<Provider {...stores}>
	<App />
	</Provider>
	);
	}
	}
	import React from 'react';
	import {
	Container,
	Content,
	Text,
	Header,
	Body,
	Title,
	} from 'react-native';
	import { inject, observer } from 'mobx-react';

	@inject('styleStore')
	@observer
	class SomeScreen extends React.Component {
	render() {
	const { styleStore } = this.props;

	return (
	<Container>
	<Header style={styleStore.styles.header}>
	<Body>
	<Title style={styleStore.styles.title}>Title</Title>
	</Body>
	</Header>
	<Content style={styleStore.styles.content}>
	<Text style={styleStore.styles.text}>Hello, World!!</Text>
	</Content>
	</Container>
	);
	}
	}
	import { computed } from 'mobx';
	import EStyleSheet from 'react-native-extended-stylesheet';

	EStyleSheet.build({
	$primary100: 'rgba(168,219,168,1.00)',
	$primary50: 'rgba(168,219,168,0.50)',
	$dark087: 'rgba(117,117,117,0.87)',
	$dark026: 'rgba(117,117,117,0.26)',
	$titleFontSize: 15,
	$headerMarginBottom: 15,
	});

	class StyleStore {
	mainStyles = EStyleSheet.create({
	text: {
	color: '$dark087',
	},
	content: {
	flex: 1,
	width: '100%',
	backgroundColor: '$primary100',
	},
	title: {
	fontSize: '$titleFontSize',
	color: '$dark087',
	},
	header: {
	marginBottom: '$headerMarginBottom',
	},
	});

	@computed
	get styles() {
	return this.mainStyles;
	}
	}

	export default StyleStore;