React Native global styles
If you just wanted to set some global variables you could try.
AppStyles.js
export default AppStyles = {
colour: {
background: '#f4f9fd',
font: '#434e5a',
primary: '#ff3b30'
}
}
index.ios.js
import AppStyles from './AppStyles';
const styles = StyleSheet.create({
container: {
backgroundColor: AppStyles.colour.background
}
});
You may create a reusable stylesheet. Example:
style.js
'use strict';
import { StyleSheet } from 'react-native';
module.exports = StyleSheet.create({
alwaysred: {
backgroundColor: 'red',
height: 100,
width: 100,
},
});
In your component:
const s = require('./style');
...then:
<View style={s.alwaysred} ></View>
Create a file for your styles (I.E., Style.js
).
Here is an example:
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
container: {
flex: 1
},
welcome: {
fontSize: 20
}
});
In any of the files you want to use your style, add the following:
import styles from './Style'
You may also try react-native-extended-stylesheet that supports global styling variables:
// app.js
EStyleSheet.build({
buttonColor: 'green'
});
// component.js
var styles = EStyleSheet.create({
button: {
backgroundColor: '$buttonColor',
...
}
});