React Native's version of HTML, CSS

Ways to make a mobile app

Advantage

Responsive Web app

Mobile framework (React Native, Flutter)

Native code (Swift, Java, Kotlin)

Free

✅

Easy to learn

✅

😐

❌

Shareable code

✅

😐

❌

Fastest performance

❌

😐

✅

Fully featured

❌

😐

✅

The three horsemen of the modern web

The three fourth horseman of the modern web

The horseman of cross-platform mobile apps

Flavors of HTML

Plain HTML

The backbone of every web page. Public standard created by World Wide Web Consortium (W3C).

<body> <div> <p> <img>

Core JSX

Extra tags ("components") that come with React Native.

<App> <View> <Text> <Image>

Custom JSX

Custom tags ("components") you create for use with React Native.

<PetScreen> <PetCard> <PetPhoto>

HTML

🎗 Close tags twice

1. Close every tag with an "end angle" >


	<div>

2a. Close start tags with an "end tag" that has a slash /


	<div>Welcome to my page!</div>

or

2b. Close a tag that has no children with a slash / before the final end angle.


	<img src="puppy.jpg" />

Flavors of CSS

CSS Grid

❌

2-dimensional layout standard that can be used in any web page. Can't be used in React Native.

display: grid

CSS Flex

✅

1-dimensional layout standard that can be used in any web page. Can be used in React Native.

display: flex

id, class, and tag selectors

❌

Work on web pages, not in React Native.

div {...}

.cat {...}

#grumpy {...}

Style objects

✅

CSS written as JavaScript objects, used in React Native.


const styles = StyleSheet.create({
	container: {
		backgroundColor: 'cadetblue',
		...
	}
});

Flavors of JavaScript

Plain JavaScript

Runs almost every web page. Public standard created by World Wide Web Consortium (W3C).

React

Runs many websites that require updated data. Made by Facebook, but open source.

React Native

Runs a number of prominent mobile apps. Made by Facebook, but open source.

node

A powerful JavaScript engine that can act like a server, even on your own computer.

npm (node package manager) />

Installs essential files.

JSON (JavaScript Object Notation) />

Format for data passed over the Internet.

NoSQL

JSON stored on a server. Used in databases like Google's Firebase.

React JSX ("JavaScript XML")

Used to make ordinary websites.

JavaScript variables in JSX have {}s.

Uses ordinary HTML tags like <div>, but you can make custom tag combinations, called "components."

React Native JSX

Used to make mobile apps.

No HTML tags--only React Native tags like <View> or custom components.

JSX Default components

<View> (like <div>)
<Text> (like <span>)
<Image> (like <img>)
<TextInput> (like <input>)
<Linking> (like <a>)

Typical high-level custom components

<Header>
<Card>
<Button>
<Form>
<Input>

Each custom component is typically defined in a dedicated JavaScript file, eg

Header.js
Card.js
Button.js
Form.js
Input.js

The master file is typically App.js.

Styling a React Native app

Similarities to Web styles

Many properties and values are the same as CSS.
Styles are still attached to tags via a style attribute.

Differences to Web styles

Styles are an object instead of CSS.

Punctuation for React Native styles

Note both parentheses ( ) and braces { } in StyleSheet definition.


const styles = StyleSheet.create( {...} ) ;

Object keys replace id or class selectors, so you need a colon :

✅ textStyle: { is good.
❌ textStyle { is bad.


const styles = StyleSheet.create( {
	textStyle: {
	}
} )

Properties are CamelCase.

✅ backgroundColor: "red" is good.
❌ background-color: "red" is bad.


const styles = StyleSheet.create( {
	textStyle: {
		backgroundColor: "darkcyan"
	}
} )

Strings are quoted and case sensitive

✅ "lightyellow" is good.
❌ lightyellow is bad.
❌ "lightYellow" is bad.


const styles = StyleSheet.create( {
	textStyle: {
		backgroundColor: "darkcyan"
	}
} )

Semicolons turn into commas, with none for last line.


const styles = StyleSheet.create( {
	card: {
		backgroundColor: "darkcyan",
		color: "paleturquoise"
	}
} )

Numbers have no units and don't need quotes, except for percentages.

✅ 12 is good.
✅ "50%" is good.
❌ 50% is bad.
❌ "12px" is bad.

They represent viewport sizes independent of pixel density.

An iPhone XR viewport is 414 by 896.

Percentage support is still iffy, but you can fake it with flex.


const styles = StyleSheet.create( {
	heading: {
		backgroundColor: "darkcyan",
		width: 300,
		height: 30
	}
} )

The style attribute takes { }s instead of ""s.


<Text style = {textStyle} >Hi there!</Text>

Flex works better than absolute or relative positioning.

You can't easily refer to a style in a different JavaScript component, unlike external CSS stylesheets.