React nativeStyles and positioning

More!

We’ll at each of these in much more detail later.

See the tutorials at https://facebook.github.io/react-native/docs/styleAndhttps://facebook.github.io/react-native/docs/stylesheet

Styles

• style your application using CSS/JavaScript. • All of the core components accept a prop named style. • style names and values usually match CSS• except names are written using camel casing, e.g backgroundColor rather

than background-color.• The style prop can be a plain old JavaScript object• You can also use an array of styles • the last style in the array has precedence• so you can use this to inherit styles.

Importing stylesheets…this is in styles.js

• The stylesheet is in a file named “styles.js” in same directory as App.js

import { StyleSheet } from 'react-native';

export default homeStyles = StyleSheet.create({vCenter: {

alignItems: 'center',marginTop: 100,

}, bigblue: {color: 'blue',fontWeight: 'bold',fontSize: 30,

}, red: {color: 'red',

}, });

Must import StyleSheet

Must export the stylesheet

Must must give the stylesheet a name

Importing stylesheetsimport React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';import homeStyles from './styles';

class MyClass extends Component {constructor(props) {super(props);this.state = {isShowingText: true};

}

render() {let display = this.state.isShowingText ? this.props.text : ' ';return (

<View><Text style={homeStyles.red}>{display}</Text>

</View>);

}}

export default class styleApp extends Component {render() {return (<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'space-

between', alignItems: 'center', marginTop: 200, }}><MyClass text='Ask not what your country can do for you' /><MyClass text='To Be or Not To Be' />

</View>);

}}

Class or component name must start with capital

Must import the stylesheet. Note the stylesheet is imported by name, e.g., homeStyles.Note that we must indicate the file name and that it is in the same directory as App.js in quotes

this is in App.js

Importing styles…this is in App.jsimport React from 'react';

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

import Home from './home';export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<Home origText = "Ask not what your country can do for you" textStyle={styles.bigblue} />

<Home origText = "To be or not to be" textStyle={styles.red} />

</View>

);

}

}

const styles = StyleSheet.create({container: {

flex: 1,backgroundColor: '#fff',alignItems: 'center',justifyContent: 'center',

}, vCenter: {

alignItems: 'center',marginTop: 100,

}, bigblue: {

color: 'blue',fontWeight: 'bold',fontSize: 30,

}, red: {

color: 'red',},

});Pass a style that is defined in the file

We create 2 instances of the Home class each with different original text and text styles

file ./home.js

import React, { Component } from 'react';import { AppRegistry, Text, View } from 'react-native';

export default class Home extends Component {constructor(props){

super(props);this.state = { myState: this.props.origText, isOrig: true};

}updateState = () => {

if (this.state.isOrig){this.setState({ myState: 'ask what you can do for

your country', isOrig: false })}else{

this.setState({ myState: this.props.origText, isOrig: true })

}; };

render() {return (

<Text style={this.props.textStyle} onPress= {this.updateState}>

{this.state.myState}</Text>

); }

}

The style was passed as a property.Note that using this.styles.bigBluewould give an error

Height and widthimport React, { Component } from 'react';import { AppRegistry, View } from 'react-native';

export default class FixedDimensionsBasics extends Component {render() {

return (<View>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /><View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />

<View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /></View>

);}

}

Flex

• flex style will expand and shrink dynamically based on available space. • flex: 1, tells a component to fill all available space, shared evenly amongst

each other component with the same parent. • The larger the flex given, the higher the ratio of space a component will take

compared to its siblings.• A component can only expand to fill available space if its parent has

dimensions greater than 0. • If a parent does not have either a fixed width and height or flex, the parent

will have dimensions of 0 and the flex children will not be visible.

Fleximport React, { Component } from 'react';import { AppRegistry, View } from 'react-native';export default class FlexDimensionsBasics extends Component {

render() {return (

// Try removing the `flex: 1` on the parent View.// The parent will not have dimensions, so the children can't expand.// What if you add `height: 300` instead of `flex: 1`?<View style={{flex: 1}}>

<View style={{flex: 1, backgroundColor: 'powderblue'}} /><View style={{flex: 2, backgroundColor: 'skyblue'}} /><View style={{flex: 3, backgroundColor: 'steelblue'}} />

</View>); }. }

Layout with Flexbox

• A component can specify the layout of its children using flexbox.• Flexbox will provide a consistent layout on different screen sizes.• Use a combination of• flexDirection,• alignItems, and• justifyContent

flexdirection

• determines the primary axis of layout• horizontally (row) or vertically

(column)• defaults to column

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {

render() {

return (

// Try setting `flexDirection` to `column`.

<View style={{flex: 1, flexDirection: 'row'}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View>

);

}

};

justifyContent

• determines distribution of children along the primary axis. • options are

• flex-start,• center,• flex-end,• space-around,• space-between and• space-evenly.

import React, { Component } from 'react';

import { AppRegistry, View } from 'react-native';

export default class JustifyContentBasics extends Component {

render() {

return (

// Try setting `justifyContent` to `center`.

// Try setting `flexDirection` to `row`.

<View style={{

flex: 1,

flexDirection: 'column',

justifyContent: 'space-between',

}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />

<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />

</View>

); }. };

alignItems• determines

the alignment of children along the secondary axis• if the primary axis

is row, then the secondary is column, and vice versa

• options:• flex-start,• center,• flex-end, and• stretch.

import React, { Component } from 'react';import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {render() {

return (// Try setting `alignItems` to 'flex-start'// Try setting `justifyContent` to `flex-end`.// Try setting `flexDirection` to `row`.<View style={{

flex: 1,

flexDirection: 'column',justifyContent: 'center',alignItems: 'stretch',

}}><View style={{width: 50, height: 50, backgroundColor: 'powderblue'}}

/><View style={{height: 50, backgroundColor: 'skyblue'}} /><View style={{height: 100, backgroundColor: 'steelblue'}} />

</View>); }. };

props

• For a list of all properties for Flexbox see https://facebook.github.io/react-native/docs/layout-props

• For more examples see https://www.tutorialspoint.com/react_native/react_native_flexbox.htm

Styles via classes

• MVC: model-view-controller• Separate code by it’s purpose• Sometimes called container-presentation components in React

• Common method for achieving cascading stylesheet affect• Create a class that applies a style to a Text field• Can use the class in lieu of a Text• Not so useful if adding event handlers

Exampleimport React from 'react';

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

import Home from './Home';

export default class App extends React.Component {

render() {

return (

<View style={styles.container}>

<Home origText = "Ask not what your country can do for you" />

<Home origText = "To be or not to be" />

</View>

); } }

const styles = StyleSheet.create({

container: {

flex: 1,

backgroundColor: '#fff',

alignItems: 'center',

justifyContent: 'center',

},

vCenter: {

alignItems: 'center',

marginTop: 100,

},

bigblue: {

color: 'blue',

fontWeight: 'bold',

fontSize: 30,

},

red: {

color: 'red',

},

});

This code is in App.js

The main class

Create 2 instances of HomePass different textNote that we want 2 different models, e.g., classes that store different data

Example (cont)import React, { Component } from 'react'import { View } from 'react-native'import PresentationalComponent from './PresentationalComponent'

export default class Home extends Component {state = {

myState: this.props.origText}render() {

return (<View>

<PresentationalComponent myState = {this.state.myState}/></View>

)}

}

This code is in Home.js

The model or container class

Store the passed property in the state

Pass the state to the presentation component.Note that we could have just passed the props

Example (cont)import React, { Component } from 'react'

import { Text, View, StyleSheet } from 'react-native'

export default class PresentationalComponentextends Component{

render() {

return (

<Text style = {styles.myState}>

{this.props.myState}

</Text>

)

}

}

const styles = StyleSheet.create ({

myState: {

marginTop: 20,

textAlign: 'center',

color: 'blue',

fontWeight: 'bold',

fontSize: 20

}

});

This code is in PresentationComponent.js

The controller

or presentation

class

The style is created here, not in the model class (e.g., Home)

Anytime Home wants to create text with this style, create an instance of this class.