CS47SI: Cross-Platform Mobile Development

Lecture 2A: Basic React Native Components + Stylesheets

James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu

cs47si.slack.com Winter 2018

Notes
I thought this was a great lecture. Great job illustrating the different components
Assignment 1 is due
midnight

Email or Slack us
the screenshot
 https://cs47si.stanford.edu

To access lectures use Stanford email

Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts
 Vanilla React Native uses
Babel as a preprocessor

ES6 + JSX
ECMAScript 6 Extension
 Vanilla React Native uses
Babel as a preprocessor

ES6 + JSX
ECMAScript 6 Extension
ES6 (ECMAScript 6)
Cleaner (fat arrow) functions.
var _this = this;

var foo = function foo() {

return 'bar';

const foo = () => 'bar' };

const baz = (x) => { var baz = function baz(x) {

return x + 1 return x + 1;

} };

this.items.map(x => this.doSomethingWith(x)) this.items.map(function (x) {

return _this.doSomethingWith(x);
});
 Vanilla React Native uses
Babel as a preprocessor

ES6 + JSX
ECMAScript 6 Extension
let textLayer = CATextLayer()
...

self.view.layer.addSublayer(textLayer)
const ourNestedView = (
<View
foo='bar'>
<Text>42</Text>
</View>
)
 const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Basically “CSS” brought to a mobile platform

https://github.com/vhpoet/react-native-styling-cheat-sheet
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts.

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2.
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2.
Components
Different classes that inherit from the React Component class
Components
Different classes that inherit from the React Component class

Importance: renderable!
Components
Different classes that inherit from the React Component class

Importance: renderable!

Common Components:

- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
Components
Different classes that inherit from the React Component class

Importance: renderable!

Common Components:

- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
View
Most common visual styles

backgroundColor: “red” borderWidth: 2 borderColor: “green” borderRadius: 10 opacity: 0.3

Common uses: wrapper around images, background, layout control

View
Using the different styles we can get pretty interesting shapes
Text
Not the most interesting component, but still useful...

color: “red” fontWeight: “bold” fontSize: 16 fontFamily: “Helvatica”

backgroundColor: “black”
Text
Text allows nesting
<Text style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
Text
Has an onPress and onLongPress handlers

<Text onPress=() => console.log(“bold clicked”)

style={{fontWeight: 'bold'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
Image
Surprise! Used to display images

Uses URI or Assets to display the photos

<Image style={{width: 50, height: 50}}

source={{uri:
'https://facebook.github.io/react-native/
docs/assets/favicon.png'}}/>
Image
Surprise! Used to display images

Uses URI or Assets to display the photos

<Image source={require('/react-native/img/favicon.png')}/>
Image
You can specify the resize mode of the image

- <Image resizeMode=“stretch” source={{...}}/>

- <Image resizeMode=“cover” source={{...}}/>
- <Image resizeMode=“contain” source={{...}}/>
- <Image resizeMode=“repeat” source={{...}}/>
Components
Different classes that inherit from the React Component class

Importance: renderable!

Common Components:

- View
- Text
- Image
- Lists
- Scrollviews
- Touchables
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
 Coordinates

Container: {
position: ‘absolute’,
start: 0,
top: 0,
width: 50,
height: 50
.
.
.
}
Coordinates
Coordinates
 Relative, percentages

Container: {
start: ‘10%’,
top: ‘10%’,
width: ‘5%’,
height: ‘5%’
.
.
.
}
Relative, percentages
Relative, percentages
 Relative, percentages

Appropriate margins?
Screen ratio change?
Safe area around?
 Flexboxes

Container: {
justifyContent: ‘space-around’,
alignItems: ‘center’,
.
.
.
}
Flexboxes
Flexboxes
 Flexboxes

Property Default Options

flexDirection column row, column

justifyContent flex-start flex-start, center, flex-end,

space-around, space-between

alignItems stretch flex-start, center, flex-end,

stretch

http://www.reactnativeexpress.com/flexbox
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
From design to code
From design to code
From design to code

➔ Break down the design.

➔ Choose components for each part.

➔ Code out the components tree and style it.

From design to code: Exercise
From design to code: Exercise
From design to code: Exercise
Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
Assignment 2
 Assignment 2
● Building the main screen of Tinder.
 Assignment 2
● Building the main screen of Tinder.

● Focuses on the UI.

● Exploring a bit of functionality.

● Out tonight. Due Tuesday 1/16.

Last lecture
● Introduced the “modern” JavaScript used in React Native.
● Introduced JSX expressions (for rendering components).
● Created an application applying these concepts

Overview for today

● Introduce core React Native components.
● Layouts and flexboxes.
● Experiment with common layouts, and how to achieve them.
● Introduce assignment 2
Next lecture
● Manipulating components: props and states.
● Creating your own components.
● Dealing with networking requests.
CS47SI: Cross-Platform Mobile Development
Lecture 2A: Basic React Native Components + Stylesheets

James Landay
Santiago Gutierrez
Abdallah AbuHashem
https://cs47si.stanford.edu

cs47si.slack.com Winter 2018