React-Native StyleSheet

Updated April 3, 2023

Introduction to React-Native StyleSheet

The following article provides am outline on React-Native StyleSheet. React Native StyleSheet is a way of styling an application using JavaScript code, the main function of react native StyleSheet is concerned with styling and structuring of components in an application, all components of react native make use of a prop known as style, names and properties values work in a similar way as the web StyleSheet.

Working of React-Native StyleSheet

Given below are two types of StyleSheet:

• Inline StyleSheets: Inline styles are implemented specific to each component through the style tag. Style property can be utilized to add inline style to components. But this approach is not considered as best practice as it makes code complex. The suggested way of applying style to react native components is using StyleSheet.create API.
• External StyleSheets: These style sheets are implemented using separate JavaScript file which can be imported into our existing code. External StyleSheets are standalone files and advantage associated with these files is that they can be reused multiple times.

In react native, we can use both external and inline styleSheets.

The following things to be kept in mind while using react native styleSheets:

• Avoid creation of new styleSheets always try to reuse existing styleSheets.
• Always keep style sheet code outside render method to provide better performance.
• StyleSheet is rendered only once inside render method.

Different methods that can be used along with react native stylesheets:

1. Compose(): This method is used to combine two different StyleSheets. Style specified in second argument will override any matching style in style specified in first argument.

Syntax:

compose(stylefirst: object, stylesecond: object): object | array<object>

2. Create(): This method is used to create a new stylesheet from given reference.

Syntax:

create(ref : object ): object

Apart from the above there are some other methods as well that can be used as per our requirement.

Examples of React-Native StyleSheet

Given below are the examples mentioned:

Example #1

In this example we will see how to use inline style as well as use of StyleSheet.create API.

Code:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
export default class StyleSheetDemo extends Component {
render() {
return (
<View>
<Text style={{ backgroundColor: '#a7a6a5', color: 'green', fontSize: 20 }}>This is Inline StyleSheet</Text>
<Text style={styles.greenstyle}>Hello from Educba</Text>
<Text style={styles.arrayval}>This is ReactNative.</Text>
<Text style={[styles.arrayval, styles.greenstyle]}>React Native StyleSheet Demo</Text>
<Text style={[styles.greenstyle, styles.arrayval]}>Thanks</Text>
</View>
);
}
}
const styles = StyleSheet.create({
arrayval: {
color: 'blue',
fontWeight: 'bold',
fontSize: 30,
},
greenstyle: {
color: 'red',
},
});

Output:

Example #2

In this example we will see how to use styling in react native using external StyleSheet. The external StyleSheet file will be imported into our existing react native code.

Here is the external javascript code which defines StyleSheet.

Code:

import React, { Component } from 'react'
import { Text, View, StyleSheet } from 'react-native'
const ExternalStyleSheet = (props) => {
return (
<View>
<Text style = {styles.currentState}>
{props.currentState}
</Text>
</View>
)
}
export default External StyleSheet
const styles = StyleSheet.create ({
currentState: {
marginTop: 30,
textAlign: 'center',
color: 'red',
fontWeight: 'bold',
fontSize: 25
}
})

Here is the main component which imports above defined StyleSheet.

Code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import ExternalStyleSheet from'./ExternalStyleSheet'
export default class App extends React.Component {
state = {
currentState: 'This is External React Native Style Sheet From Educba'
}
render() {
return (
<View>
<ExternalStyleSheet currentState = {this.state.currentState}/>
</View>
);
}
}

Output:

Example #3

In this example we will see how to use compose method in react native.

Code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default App = () => (
<View style={container_style}>
<Text style={text_style}>This is React native Demo</Text>
</View>
);
const first = StyleSheet.create({
containerfirst: {
flex: 1,
padding: 24
},
textfirst: {
fontSize: 40,
color: '#61dafb'
},
});
const second = StyleSheet.create({
containersecond: {
flex: 1,
backgroundColor: '#000',
},
itemsecond: {
fontStyle: 'italic',
fontWeight: 'bold'
},
});
const container_style = StyleSheet.compose(first.containerfirst, second.containersecond);
const text_style = StyleSheet.compose(first.textfirst, second.itemsecond);

Output:

Conclusion

The above article clearly explains how StyleSheets are used in react native. Also, various third party libraries are available to provide more customizations to our react native applications.

This is a guide to React-Native StyleSheet. Here we discuss the introduction to React-Native StyleSheet with examples for better understanding. You may also have a look at the following articles to learn more –

1. React Native Progress Bar
2. React-Native Border Style
3. React Native Image
4. React Native Animation