Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit c4ab15b

Browse files
authored
chapter 8.2 complete with examples (#9)
1 parent d0b24b1 commit c4ab15b

File tree

3 files changed

+173
-1
lines changed

3 files changed

+173
-1
lines changed

‎book/8-styling/8.1-theme-variables.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,3 +179,6 @@ Our app should now look like this:
179179
<img src="/assets/images/8/8.1/8.1-theme-variables.png" style="width: 40%;display:inline-block;" hspace="40">
180180
</div>
181181
<br>
182+
183+
184+
The code till here can be found in the **branch** `chapter/8/8.1`

‎book/8-styling/8.2-common-styles-mixins.md‎

Lines changed: 170 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,5 +106,174 @@ import styles from './styles.js';
106106
</View>
107107
```
108108

109-
This way our mixins/common style file will provide us the base styles which are common across the app and we write componeny t specific styles in the component style file.
109+
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.
110110
Thus allowing significant style reuse and avoiding code duplication.
111+
112+
113+
## Integrating common/mixin styles into our NoteTaker demo
114+
115+
Before we go into common styles , lets modify our code a bit to add another component for entering title for our note.
116+
Modify the following files as follows:
117+
118+
**`app/components/Home/Home.component.js`**
119+
120+
```js
121+
import React, {Component} from 'react';
122+
import {View, Text, TextInput} from 'react-native';
123+
import styles from './Home.component.style';
124+
import TextArea from '../TextArea/TextArea.component';
125+
126+
class Home extends Component {
127+
state = {
128+
title: '' // adding the state here temporarily for illustration purposes
129+
}
130+
setTitle = (title) => this.setState({title})
131+
render () {
132+
return (
133+
<View style={styles.container}>
134+
<Text style={styles.titleHeading}> Note Title</Text>
135+
<TextInput style={styles.titleTextInput}
136+
onChangeText={this.setTitle} value={this.state.title} />
137+
<Text style={styles.textAreaTitle}> Please type your note below </Text>
138+
<TextArea style={styles.textArea}/>
139+
</View>
140+
);
141+
}
142+
}
143+
144+
export default Home;
145+
```
146+
147+
**`app/components/Home/Home.component.style.js`**
148+
149+
```js
150+
import {StyleSheet} from 'react-native';
151+
import theme from '../../styles/theme.style';
152+
153+
export default StyleSheet.create({
154+
container: {
155+
flex: 1,
156+
paddingVertical: theme.CONTAINER_PADDING,
157+
alignItems: 'center'
158+
},
159+
titleHeading: {
160+
fontSize: theme.FONT_SIZE_MEDIUM,
161+
alignSelf: 'flex-start',
162+
padding: 10,
163+
fontWeight: theme.FONT_WEIGHT_BOLD,
164+
},
165+
titleTextInput: {
166+
padding: theme.TEXT_INPUT_PADDING,
167+
backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
168+
alignSelf: 'stretch'
169+
},
170+
textAreaTitle: {
171+
fontSize: theme.FONT_SIZE_MEDIUM,
172+
alignSelf: 'flex-start',
173+
padding: 10,
174+
fontWeight: theme.FONT_WEIGHT_LIGHT,
175+
fontStyle: 'italic'
176+
},
177+
textArea: {
178+
padding: theme.TEXT_INPUT_PADDING,
179+
backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
180+
alignSelf: 'stretch',
181+
flex: 1
182+
}
183+
});
184+
185+
```
186+
187+
**`app/styles/theme.style.js`**
188+
```js
189+
export default {
190+
PRIMARY_COLOR: '#2aabb8',
191+
FONT_SIZE_SMALL: 12,
192+
FONT_SIZE_MEDIUM: 14,
193+
FONT_SIZE_LARGE: 16,
194+
FONT_WEIGHT_LIGHT: '200',
195+
FONT_WEIGHT_MEDIUM: '500',
196+
FONT_WEIGHT_BOLD: '700',
197+
BACKGROUND_COLOR_LIGHT: '#f0f6f7',
198+
CONTAINER_PADDING: 20,
199+
TEXT_INPUT_PADDING: 10
200+
};
201+
```
202+
203+
Our app should now look like this:
204+
<br>
205+
<div style="text-align:center">
206+
<img src="/assets/images/8/8.2/8.2-before-common.png" style="width: 40%;display:inline-block;" hspace="40">
207+
</div>
208+
<br>
209+
210+
211+
If you notice, even though we have theme file, our style code has lot of duplicated code. Primarily because we are repeating our styling for text input and also for the heading.
212+
213+
The solution to this problem as discussed before is common styles/ mixins
214+
215+
Lets create the file `common.style.js`
216+
**`app/styles/common.style.js`**
217+
```js
218+
import theme from './theme.style';
219+
220+
export const headingText = {
221+
fontSize: theme.FONT_SIZE_MEDIUM,
222+
alignSelf: 'flex-start',
223+
padding: 10,
224+
fontWeight: theme.FONT_WEIGHT_BOLD,
225+
};
226+
227+
export const textInput = {
228+
padding: theme.TEXT_INPUT_PADDING,
229+
backgroundColor: theme.BACKGROUND_COLOR_LIGHT,
230+
alignSelf: 'stretch'
231+
};
232+
```
233+
234+
And modify our component style files to include the `common.style.js`
235+
236+
**`app/components/Home/Home.component.style.js`**
237+
238+
```js
239+
import {StyleSheet} from 'react-native';
240+
import theme from '../../styles/theme.style';
241+
import {headingText, textInput} from '../../styles/common.style';
242+
243+
export default StyleSheet.create({
244+
container: {
245+
flex: 1,
246+
paddingVertical: theme.CONTAINER_PADDING,
247+
alignItems: 'center'
248+
},
249+
titleHeading: {
250+
...headingText
251+
},
252+
titleTextInput: {
253+
...textInput
254+
},
255+
textAreaTitle: {
256+
...headingText,
257+
fontWeight: theme.FONT_WEIGHT_LIGHT,
258+
fontStyle: 'italic'
259+
},
260+
textArea: {
261+
...textInput,
262+
flex: 1
263+
}
264+
});
265+
```
266+
267+
If you see our style code looks much more consice and we are resuing the styles for similar components with slight style changes.
268+
Hence, we import our base styles for the components from common.style.js and add our custom styles later on top of it.
269+
This way we reduce our work and minimize code duplication.
270+
271+
We see no change in the output but our code becomes much much cleaner.
272+
<br>
273+
<div style="text-align:center">
274+
<img src="/assets/images/8/8.2/8.2-before-common.png" style="width: 40%;display:inline-block;" hspace="40">
275+
</div>
276+
<br>
277+
278+
279+
The code till here can be found in the **branch** `chapter/8/8.2`
57.5 KB
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /