Common styles

In React Native, each component is styled using inline styles. This means that it becomes slightly tricky to share styles as you can in web.

In web, we write a class

.btn {
  padding: 10;
  border: '1px solid black';
}

Now if we want to apply this class to two different divs we will do so as follows:

<div class='btn first-btn'>First button</div>
<div class='btn second-btn'>Second button</div>

The same is possible in React Native in the following way:

styles.js

import { StyleSheet } from 'react-native';
export default StyleSheet.create({
  btn: {
    padding: 10,
    borderWidth: 1
  },
  firstBtn:{
    ...
    ...
  },
  secondBtn:{
    ...
    ...
  }
});

and we will add styles to our View by:

import styles from './styles.js';
...
...
...
<View>
  <View style={[styles.btn, styles.firstBtn]}>First button</View>
  <View style={[styles.btn, styles.secondBtn]}>Second button</View>
</View>

This solves the problem only if the style objects are in the same component because in RN we do not import styles from other components (each component has its own style). But in web, we could have just reused the class anywhere (since css is global).

To solve the problem of reusable styles in React Native, we introduce another file named app/style/common.style.js This is where we will write our mixins/common styles.

Hence, if all the buttons in our app have a similar style we can write a style with similar properties inside the common.style.js

app/style/common.style.js

import { StyleSheet } from 'react-native';
export default StyleSheet.create({
  btn: {
    padding: 10,
    borderWidth: 1
  }
});

And we can just import this in our component style files and reuse them directly like this:

styles.js

import { StyleSheet } from 'react-native';
import common from '../style/common.style.js';
export default StyleSheet.create({
  firstBtn:{
    ...common.btn,
    backgroundColor: 'blue'
  },
  secondBtn:{
    ...common.btn,
    backgroundColor: 'red'
  }
});

and we will add styles to our View like this:

import styles from './styles.js';
...
...
...
<View>
  <View style={styles.firstBtn}>First button</View>
  <View style={styles.secondBtn}>Second button</View>
</View>

This way our mixins/common style file will provide us the base styles which are common across the app and we write component specific styles in the component style file. This allows significant style reuse and avoids code duplication.

common style 기능을 사용해보려고 하는데요.

app/style/common.style.js 를 만들 때 app 폴더에 style 폴더를 만들고 common.style.js 를 만들라는건지 좀 헷갈려서요;;

그리고 styles.js 는 sparta-myhoneytip-eun 폴더에서 만들고 진행하면 될까요?