React native Styles and positioning More! Well at each of these in - - PowerPoint PPT Presentation

React native

Styles 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/style And https://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 stylesheets

import 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.js

import 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.bigBlue would give an error

Height and width

import 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.

Flex

import 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

Example

import 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 Home Pass different text Note 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 PresentationalComponent extends 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

• r 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.