Class: EStyleSheetClass
Constructors
new EStyleSheetClass()
new EStyleSheetClass():
EStyleSheetClass
Constructor
Returns
Defined in
Properties
absoluteFill
absoluteFill:
RegisteredStyle<AbsoluteFillStyle> =StyleSheet.absoluteFill
Defined in
absoluteFillObject
absoluteFillObject:
AbsoluteFillStyle=StyleSheet.absoluteFillObject
Defined in
child()
child: <
T>(styles,styleName,index,count) =>AnyStyle
Returns styles with pseudo classes :first-child, :nth-child-even, :last-child according to index and count.
Type Parameters
• T = StyleSet<any>
Parameters
• styles: T
• styleName: string
• index: number
Index of item for style
• count: number
Total count of items
Returns
AnyStyle
styles
Defined in
compose()
compose: <
T,U,V>(style1,style2) =>StyleProp<T> =StyleSheet.compose
Combines two styles such that style2 will override any styles in style1. If either style is falsy, the other one is returned without allocating an array, saving allocations and maintaining reference equality for PureComponent checks.
Type Parameters
• T extends ImageStyle | TextStyle | ViewStyle
• U extends ImageStyle | TextStyle | ViewStyle
• V extends ImageStyle | TextStyle | ViewStyle
Parameters
• style1: StyleProp<U> | StyleProp<U>[]
• style2: StyleProp<V> | StyleProp<V>[]
Returns
StyleProp<T>
Defined in
flatten()
flatten: <
T>(style?) =>Textends infer U[] ?U:T=StyleSheet.flatten
Flattens an array of style objects, into one aggregated style object.
Example:
const styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
color: 'white'
},
selectedListItem: {
color: 'green'
}
});
StyleSheet.flatten([styles.listItem, styles.selectedListItem])
// returns { flex: 1, fontSize: 16, color: 'green' }
Type Parameters
• T
Parameters
• style?: StyleProp<T>
Returns
T extends infer U[] ? U : T
Defined in
hairlineWidth
hairlineWidth:
number=StyleSheet.hairlineWidth
Defined in
setStyleAttributePreprocessor()
setStyleAttributePreprocessor: (
property,process) =>void=StyleSheet.setStyleAttributePreprocessor
WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will not be reliably announced. The whole thing might be deleted, who knows? Use at your own risk.
Sets a function to use to pre-process a style property value. This is used internally to process color and transform values. You should not use this unless you really know what you are doing and have exhausted other options.
Parameters
• property: string
• process
Returns
void
Defined in
Methods
build()
build<
TGlobalVariablesObject>(globalVars?):void
Calculates all stylesheets.
Type Parameters
• TGlobalVariablesObject
Parameters
• globalVars?: TGlobalVariables<TGlobalVariablesObject>
Global variables for all stylesheets
Returns
void
Defined in
clearCache()
clearCache():
void
Clears all cached styles.
Returns
void
Defined in
create()
create<
T>(source):TNamedStyles<T>
Creates extended stylesheet object that will be calculated after build.
Type Parameters
• T
Parameters
• source: TExtendedNamedStyles<T>
Source style
Returns
TNamedStyles<T>
Extended stylesheet object
Defined in
subscribe()
subscribe(
event,listener):void
Subscribe to event. Currently, only 'build' event is supported.
Parameters
• event: string
• listener: TListener
Returns
void
void
This method is useful when you want to pre-render some component on init.
As extended style is calculated after call of EStyleSheet.build(),
it is not available instantly after creation so you should wrap pre-render
info listener to build event:
const styles = EStyleSheet.create({
button: {
width: '80%',
},
});
// this will NOT work as styles.button is not calculated yet
let Button = <View style={styles.button}></View>;
// but this will work
let Button;
EStyleSheet.subscribe('build', () => {
Button = <View style={styles.button}></View>;
});
Defined in
unsubscribe()
unsubscribe(
event,listener):void
Unsubscribe from event. Currently, only 'build' event is supported.
Parameters
• event: string
• listener: TListener
Returns
void
Defined in
value()
value(
expr,prop?):any
Calculates particular expression. For some values you need to pass prop (e.g. percent).
Parameters
• expr: Readonly<TValueExpr>
Value
• prop?: string
Property for which value is calculated. For example, to calculate percent values the function should know is it 'width' or 'height' to use proper reference value.
Returns
any
Calculated result
Please note that in most cases EStyleSheet.value() should be used inside function, not directly:
const styles = EStyleSheet.create({
button1: {
width: () => EStyleSheet.value('$contentWidth') + 10, // <-- Correct!
},
button2: {
width: EStyleSheet.value('$contentWidth') + 10, // <-- Incorrect. Because EStyleSheet.build() may occur later and $contentWidth will be undefined at this moment.
},
});