Skip to content

Instantly share code, notes, and snippets.

@shinchit
Created Dec 15, 2019
Embed
What would you like to do?
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment