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
