Full-Stack React Projects - Second Edition

StyleSheet

The StyleSheet API from React Native can also be used in React 360 to define several styles in one place rather than adding styles to individual components. The styles can be defined using StyleSheet, as shown in the following code:

const styles = StyleSheet.create({  subView: {    width: 10,    borderColor: '#d6d7da',  },  text: {    fontSize: '1em',    fontWeight: 'bold',  }})

These style objects defined using StyleSheet.create can be added to components as required, as shown in the following code:

<View style={styles.subView}>  <Text style={styles.text}>hello</Text></View>

This will apply the CSS styles to the View and Text components accordingly.

The default distance units for CSS properties, such as width and height, are in meters when mapping ...