R E A C T N AT I V E D E V E L O P M E N T

D A N I E L G R A H A M P H D

Let make this splash screen

B O X O F S P E C I F I C H E I G H T

A N D W I D T H

C O N TA I N I N G B O X W I T H B A C K G R O U N D

Just focusing on The Top Section

1 5 8 Title

Author

The Image’s Margin The Contains Padding

V I E W S A R E G O O D F O R T W O T H I N G S

Layout and Drawing shapes

import * as React from 'react';import { View } from 'react-native';

export default class App extends React.Component { render() { return ( <View > </View> ); }}

W I L L N O T S H O W A N Y T H I N G B E C A U S E T H E Y S TA R T O F D I M E N S I O N L E S S

export default class App extends React.Component { render() { return ( <View style={{width: 100, height: 100, backgroundColor:"black"}} >

</View> ); }}

View start of in the top left corner

B U T P H O N E S H AV E D I F F E R E N T S C R E E N S I Z E S W E M I G H T WA N T H A R D

C O D E D E T E N T I O N

export default class App extends React.Component { render() { return ( <View style={{width:100, height:100, backgroundColor:"green"}} /> <View style={{width:100, height:100, backgroundColor:"black"}} /> ); }}

Render takes a single JSX element We are returning two

This will result in an error

export default class App extends React.Component { render() { return ( <View style={{width:300, height:500, backgroundColor:"green"}} > <View style={{width:100, height:100, backgroundColor:"black"}} /> </View> ); }}

W E C A N U S E M U LT I P L E V I E W I F W E N E S T B E C A U S E W E W O U L D B E R E T U R N I N G A

S I N G L E J S X E L E M E N T

T H E V I E W S TA R T S I N T H E T O P L E F T

import * as React from 'react';import { View , StyleSheet} from 'react-native';

export default class App extends React.Component { render() { return ( <View style={styles.bigBox} > <View style={styles.littleBox} /> </View> ); }}

const styles = StyleSheet.create({ bigBox: {width:300, height:500, backgroundColor:"green"}, littleBox: {width:100, height:100, backgroundColor:"black"}})

I M P O R T S T Y L E S H E E T

PA S S N E W S T Y L E S M E T H O D T O S T Y L E S H E E T

R E T U R N S A N O P T I M I Z E D S E T O F S T Y L E S

I N F O R M AT I O N O N S T Y L E S

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });

L AY O U T F O L L O W C S S S TA N D A R D S

Properties are similar to css properties exceptwith camel case naming

background-color => backgroundColor

C O M B I N I N G S T Y L E S

export default class App extends React.Component { render() { let color = "blue" return ( <View style={[styles.bigBox, {backgroundColor:color}]} > <View style={styles.littleBox} /> </View> ); }}

const styles = StyleSheet.create({ bigBox: {width:300, height:500, backgroundColor:"green"}, littleBox: {width:100, height:100, backgroundColor:"black"}})

D Y N A M I C A L A D D S T Y L E S

It will go through and assignall the properties the last one takes precedence

F L E X L AY O U T

T H R E E D E C I S I O N T O M A K E W I T H Y O U R F L E X L AY O U T

flexDirection

alignItems

justifyContent

https://snack.expo.io/@professorxii/flexboxdemo

F L E X B O X L AY O U T M O D E L

Container

Items

F L E X D I R E C T I O N

Row Flex Direction

Determines the primary axis

F L E X D I R E C T I O N

Column Flex Direction

J U S T I F Y C O N T E N T

Defines alignment along the primary axis

Flex start

Flex end

Flex Center

J U S T I F Y C O N T E N T

Space Between

Evenly Distributed starting and ending on the boundaries

Equal

J U S T I F Y C O N T E N T

S PA C E - A R O U N DDistributed evenlyEqual

Spaces not equal

space-evenl

Distributed evenlyNot Equal

Space Equal

A L I G N - C O N T E N T R E F E R S T O T H E S E C O N D A R Y A D D R E S S

Primary Axis Secondary Row Column Column Row

import * as React from 'react';import { Text, View, StyleSheet } from 'react-native';

export default class App extends React.Component { render() { // Primary Axis Options: column, row let flexDir = "row" //Distribution Primary Axis Options: flex-start, center, flex-end, space-around, space-between and space-evenly let justCont = "flex-end"

//Vertical Distribution secondary Axis: flex-start, center, flex-end, and stretch. let alignIt= "stretch" return ( <View style={{ flex: 1, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}> <View style={{width: 100, height: 100, backgroundColor: 'red'}} /> <View style={{width: 100, height: 100, backgroundColor: 'green'}} /> <View style={{width: 100, height: 100, backgroundColor: 'blue'}} /> </View> ); }}

Discussed in next lecture

<View style={{ flex: 1, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}>

Flex is short hand for

<View style={{ flexGrow: 1, flexShrink: 1, flexBasis: ‘auto’, flexDirection: flexDir, justifyContent: justCont, alignItems: alignIt, }}>

The component can grow

The component can shrink

Component is automatically size

F L E X G R O W / S H R I N K

11 1

21 1

Allows Elements to grow/shrink meet the requirements of the the layout

Order is used To determine

The space

All 1’s take up even Space

Some 1’s an 2 2 take up twice As much space

CSS Box Model

• Content - The content of the box, where text and images appear • Padding - Clears an area around the content. The padding is transparent • Border - A border that goes around the padding and content • Margin - Clears an area outside the border. The margin is transparen •

O R D E R P R O P E R T Y

1 2 3 4

- 1 1 2 3

Controls the Order properties are Laid out

2

F L E X B A S I S

Sets the initial size of the item

Flex-basis “auto” will use the Dimension of the element

Sets the initial size of the item

C O N T E N T

Flex-basis “auto” size Span to content

L E T ’ S W O R K O N S P L A S H S C R E E N

Let make this splash screen

Linear Gradient

Column Layout Center Justify and

Align

Get F

L I N E A R G R A D I E N T S N A C K

H T T P S : / / S N A C K . E X P O . I O / @ P R O F E S S O R X I I / S P L A S H - S C R E E N

import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; import { LinearGradient } from 'expo-linear-gradient';

export default class App extends React.Component {   render() {     return (        <LinearGradient            start={[1,1]}           end={[0.4, 0.3]}             colors={[ '#FFFFFF', '#000D0C', '#000D0C',]}              style={styles.gradientStyles}>           <Text style={styles.logo}> AckeePod </Text>       </LinearGradient>     );   } }

const styles = StyleSheet.create({   gradientStyles:{    flex: 1,     flexDirection: 'row',     justifyContent: 'center',     alignItems: 'center',   },   logo:{     color: 'white',     fontWeight: 'bold',     fontSize: 30,     height:100,   } })