React Native By Example

StyleSheet as an imported module

In your component, you can import your styles, as shown:

import styles from './styles.js'; class Tasks extends Component {   render(){     return (       <View style = { styles.container }>         <Text style = { styles.welcome }>           Welcome to React Native!         </Text>       </View>     )   } } 

Then, you can define them in a separate file:

const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF'   },   welcome: {     fontSize: 20,     textAlign: 'center',     margin: 10   } )}; export default styles; 

This is much better. By encapsulating our style logic into its own file, we are separating our concerns and making it easier for everyone to read it.