{this.props.list.map(createCardRow)}
        </ScrollView>
      );
      return verticalScrollView;
    }
}


var styles = StyleSheet.create({

  container: {
    // flex: 1,
    height: 90,
    backgroundColor:'#ffffff',
    // flexDirection: 'row',
  },

  image: {
    flex: 1,
    height: 70,
    width: 70,
    // borderRadius: 1,
    // borderWidth: 2,
    // borderColor: '#FF1492',
    justifyContent: 'space-between',
    flexDirection: 'row',
    marginLeft: 10,
    marginTop: 10,
  },
});
Beispiel #2
0
        console.log("Rendered Bounds....");
        console.log(renderedBounds);
        return(
            <View style={styles.container}>
                <Image
                    style={styles.image}
                    source={{ uri: this.source }}
                >
                {
                    renderedBounds
                }
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%'
    },
    image: {
        flex: 1,
        width: '100%'
    }
});
let formStyles = StyleSheet.create({
  form:{

  },
  alignRight:{
    marginTop: 7, position:'absolute', right: 10
  },
  noBorder:{
    borderTopWidth: 0,
    borderBottomWidth: 0
  },
  separatorContainer:{
    // borderTopColor: '#C8C7CC',
    // borderTopWidth: 1,
    paddingTop: 35,
    borderBottomColor: '#C8C7CC',
    borderBottomWidth: 1,

  },
  separator:{

    paddingLeft: 10,
    paddingRight: 10,
    color: '#6D6D72',
    paddingBottom: 7

  },
  fieldsWrapper:{
    // borderTopColor: '#afafaf',
    // borderTopWidth: 1,
  },
  horizontalContainer:{
    flexDirection: 'row',
    justifyContent: 'flex-start'
  },
  fieldContainer:{
    borderBottomWidth: 1,
    borderBottomColor: '#C8C7CC',
    backgroundColor: 'white',
    justifyContent: 'center',
    height: 45
  },
  fieldValue:{
    fontSize: 34/2,
    paddingLeft: 10,
    paddingRight: 10,
    marginRight:10,
    paddingTop: 4,
    justifyContent: 'center',

    color: '#C7C7CC'
  },
  fieldText:{
    fontSize: 34/2,
    paddingLeft: 10,
    paddingRight: 10,
    justifyContent: 'center',
    lineHeight: 32
  },
  input:{
    paddingLeft: 10,
    paddingRight: 10,

  },
  helpTextContainer:{
    marginTop:9,
    marginBottom: 25,
    paddingLeft: 20,
    paddingRight: 20,

  },
  helpText:{
    color: '#7a7a7a'
  }
});
  FORGOT_PASSWORD
} = require('../lib/constants').default;

/**
 * ## Styles
 */
var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1
  },
  inputs: {
    marginTop: 10,
    marginBottom: 10,
    marginLeft: 10,
    marginRight: 10
  },
  forgotContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 10,
    marginLeft: 10,
    marginRight: 10
  }
});
/**
 * ## Redux boilerplate
 */
const actions = [
  authActions,
  globalActions
const styles = StyleSheet.create({
    style_image: {
        borderRadius: 35,
        height: 70,
        width: 70,
        marginTop: 40,
        marginBottom: 30,
        alignSelf: 'center',
    },
    style_user_input: {
        backgroundColor: '#fff',
        height: 35,
    },
    style_pwd_input: {
        backgroundColor: '#fff',
        height: 35,
    },
    style_view_commit: {
        marginTop: 15,
        marginLeft: 10,
        marginRight: 10,
        backgroundColor: '#29B9ff',
        height: 35,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    style_view_unlogin: {
        fontSize: 12,
        color: '#63B8FF',
        marginLeft: 10,
    },
    style_view_register: {
        fontSize: 12,
        color: '#63B8FF',
        marginRight: 10,
        alignItems: 'flex-end',
        flex: 1,
        flexDirection: 'row',
        textAlign: 'right',
    }
});
          </Button>
          <Text onPress={this.onSignUpPress} style={buttonStyles.link}>Sign Up</Text>
        </View>
      </View>
    );
  }
}

LoginView.propTypes = {
  isAuthenticating: PropTypes.bool.isRequired,
  actions: PropTypes.object.isRequired,
  loginFormValue: PropTypes.object.isRequired
};

const styles = StyleSheet.create({
  form: {
    padding: 20,
  }
});

const mapStateToProps = (state) => ({
  isAuthenticating: state.auth.isAuthenticating,
  loginFormValue: state.auth.loginFormValue
});

const mapDispatchToProps = (dispatch) => ({
  actions: bindActionCreators(authActions, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(LoginView);
Beispiel #7
0
import { FormattedMessage, Button, TextInput } from '../app/components';
import { StyleSheet, View } from 'react-native';
import { ValidationError } from '../../common/lib/validation';
import { connect } from 'react-redux';
import { fields } from '../../common/lib/redux-fields';
import { injectIntl, intlShape } from 'react-intl';
import { resetPassword, signIn, signUp } from '../../common/lib/redux-firebase/actions';

const styles = StyleSheet.create({
  legend: {
    fontSize: theme.fontSizeH4,
    marginVertical: theme.fontSize * 2,
    textAlign: 'center',
  },
  buttons: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    marginVertical: theme.fontSize * 2,
  },
  recoveryEmailSent: {
    color: theme.brandInfo,
  },
});

class Email extends React.Component {

  static propTypes = {
    disabled: React.PropTypes.bool.isRequired,
    error: React.PropTypes.instanceOf(Error),
    fields: React.PropTypes.object.isRequired,
    intl: intlShape.isRequired,
Beispiel #8
0
  }
});

var styles = StyleSheet.create({
  loggin: {
    
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#faf5ec'
  },
  category: {
    fontSize: 30,
  },
  input: {
    fontSize: 23,
    borderWidth: 1,
    borderRadius: 5,
    height: 40,
    width: 120,
    margin: 10,
    textAlign: 'center',
    marginBottom: 15,
    color: '#8c8c8c',
    borderColor: '#ecd794',
    backgroundColor: '#fcfbd9'
  }
});
import React from 'react';
import { Text, View, Platform, StyleSheet, Animated } from 'react-native';

const AnimatedText = Animated.Text;

const HeaderTitle = ({ style, ...rest }) => (
  <AnimatedText
    numberOfLines={1}
    {...rest}
    style={[styles.title, style]}
    accessibilityTraits="header"
  />
);

const styles = StyleSheet.create({
  title: {
    fontSize: Platform.OS === 'ios' ? 17 : 20,
    fontWeight: Platform.OS === 'ios' ? '700' : '500',
    color: 'rgba(0, 0, 0, .9)',
    textAlign: Platform.OS === 'ios' ? 'center' : 'left',
    marginHorizontal: 16,
  },
});

export default HeaderTitle;
import { StyleSheet } from 'react-native';
import * as colors from 'ReactNativeTutorial/app/constants/colors';

const styles = StyleSheet.create({
  container: {
    height: 75,
    padding: 10,
    borderBottomWidth: 1,
    borderBottomColor: colors.$gray,
  },
  author: {
    fontSize: 20,
    color: colors.$purple,
  },
  text: {
    fontSize: 15,
    color: colors.$black,
  },
});

export default styles;
Beispiel #11
0
 * Create instances for the keys of each structure in snowflake
 * @returns {Object} object with 4 keys
 */
function getInitialState() {
    const _initState = {
        auth: new authInitialState,
        device: (new deviceInitialState).set('isMobile', true),
        global: (new globalInitialState),
        profile: new profileInitialState
    };
    return _initState;
}

const styles = StyleSheet.create({
    tabBar: {
        height: 70
    }
});

/**
 * ## TabIcon
 *
 * Displays the icon for the tab w/ color dependent upon selection
 */

class TabIcon extends React.Component {
    render() {
        var color = this.props.selected ? '#FF3366' : '#FFB3B3';
        return (
            <View style={{flex:1, flexDirection:'column', alignItems:'center', alignSelf:'center'}}>
                <Icon style={{color: color}} name={this.props.iconName} size={30}/>
Beispiel #12
0
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
    marginTop: 20,
    flexDirection: 'column',
    padding: 4,
  },
  row: {
    flexDirection: 'row',
  },
  tile: {
    borderWidth: 1,
    borderColor: 'rgba(0,0,0,0.16)',
    padding: 8,
    margin: 4,
  },
  halfTile: {
    width: deviceWidth / 2 - 12,
    height: deviceWidth / 2 - 12,
  },
  frontDoorLockButton: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  tileText: {
    fontSize: 22,
    letterSpacing: 1,
    fontWeight: '400',
  },
  tileLabel: {
    position: 'absolute',
    fontSize: 12,
    bottom: 8,
    left: 8,
    right: 8,
    textAlign: 'right',
  },
  thermostat: {
    width: deviceWidth - 16,
    height: deviceWidth / 2 - 12,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  thermostatStatus: {
    flex: 3,
    alignItems: 'center',
  },
  thermostatTemperature: {
    fontSize: 58,
    fontWeight: '300'
  },
  thermostatMode: {
    fontSize: 16,
  },
  thermostatAction: {
    flex: 1,
    alignItems: 'center',
    paddingVertical: 20,
    backgroundColor: 'rgba(0,0,0,0.2)',
    borderRadius: 8,
    marginLeft: 8,
  },
  thermostatActionText: {
    color: 'white',
    fontSize: 22,    
    fontWeight: '900',
  },
});
Beispiel #13
0
    _this = this;
    VoxImplant.SDK.connect();    
  }

  componentDidUpdate() {
    if (this.state.page == "useragent") {
      VoxImplant.SDK.setCameraResolution(320,240);
    }
  }

  _login(accnameValue, appnameValue, usernameValue, passwordValue) {
    VoxImplant.SDK.login(usernameValue +
      "@" + appnameValue +
      "." + accnameValue +
      ".voximplant.com", passwordValue);
  }

  render() {
    var ui = <Loader />;
    if (this.state.page == "login") ui = <LoginForm login={(...params) => this._login(...params)} ref={(component) => formInstance = component}/>;
    else if (this.state.page == "useragent") ui = <UserAgent uaDisplayName={uaDisplayName} />;
    return (ui);
  }

}

var styles = StyleSheet.create({ 
  
});

AppRegistry.registerComponent('VoximplantDemo', () => VoximplantDemo);
import { StyleSheet } from 'react-native';

export default StyleSheet.create({
  logo: {
    height: 100,
    width: 100,
  },
  intro: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: '#3ca2e0',
    borderColor: 'transparent',
  },
  white: {
    color: 'white',
  },
});
 permission of salesforce.com, inc.
 
 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
 IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
 FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR
 CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
 DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
 WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY
 WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */
 
'use strict';

import {
    StyleSheet
} from 'react-native';

module.exports = StyleSheet.create({
  container: {
    height:60,
    padding:10,
    paddingLeft:10,
    paddingRight:10,
    marginBottom:40,
    flex:1,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'space-around',
  }
});
/**
 * Whitesmith React Native UI Extensions
 * @flow
 */

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

const styles = StyleSheet.create({

});

module.exports = React.createClass({
  render: function() {
    return (
      <TextInput {...this.props}>
      </TextInput>
    );
  }
});
Beispiel #17
0
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },

    calendarWeek: {
        flex: 1,
        flexDirection: 'row'
    },

    topbar: {
        height: 80,
        justifyContent: 'flex-end',
        backgroundColor: '#44aaee',
    },

    toolbar: {
        height: 50,
        backgroundColor: '#44aaee',        
    },

    topbarTitle: {
        fontSize: 25,
        textAlign: 'center',
        margin: 10,
        color: 'white'
    }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
    backgroundColor: 'white'
  },
  imageView: {
    marginTop: 20
  },
  descriptionView: {
    flex: 1,
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  image: {
    height: 300
  },
  priceButton: {
    backgroundColor: '#f7b700',
    padding: 5
  },
  price: {
    fontSize: 30,
    color: 'white'
  },
  productTitle: {
    fontSize: 20
  }
});
Beispiel #19
0
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection:'column',
        backgroundColor: '#666666',
    },
    header: { 
        justifyContent:'center',
        alignItems: 'center',
        height:120,
        backgroundColor: '#434343'
    },
    row: {
      flex: 1,  
      justifyContent:'center',
      height:60,
    },
    themeText: {
      fontSize: 19,
      textAlign: 'left',
      color: '#FFFFFF',
      flexWrap: 'wrap',
      marginLeft: 20,  
    },
    headerFont: {
      fontSize: 25,
      textAlign: 'left',
      color: '#FFFFFF',
      flexWrap: 'wrap',
    }
});
Beispiel #20
0
        builds = ["X1101教室1", "X1102教室", "X1103教室", "X1104教室", "X1105教室", "X1106教室", "X1107教室", "X1108教室", "X1109教室"]; 
        return (
            <View style={styles.contrainer}>
                <DropdownNew build={builds}></DropdownNew>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    contrainer: {
        flex: 1,
        backgroundColor: "white",
    },
    contrainerDrop: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height-144,
        backgroundColor: "red",
    },
    containerSelect: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height-144,
        backgroundColor: "white",
    },
    containerSCon: {
        width: Dimensions.get('window').width,
        height: Dimensions.get('window').height-214,
        backgroundColor: "red",
        marginTop: 10,
    }
});
import React, {
  View,
  StyleSheet,
  Text
} from 'react-native'

var CalculatorScreen = React.createClass({
  render() {
    return (
      <View>
        <Text style={styles.screenLabel}>
          {this.props.screenValues}
        </Text>
      </View>
    )
  }
});

const styles = StyleSheet.create({

  screenLabel : {
    marginTop: 15,
    height: 50,
    fontSize : 30
  }

});

export default CalculatorScreen
Beispiel #22
0
const style = StyleSheet.create({
  row: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: colors.light2,
    paddingLeft: 16,
    paddingRight: 16,
    paddingTop: 10,
    paddingBottom: 10,
    borderBottomWidth: 1 / PixelRatio.get(),
    borderBottomColor: colors.border
  },
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: colors.light1,
    padding: 8,
    marginTop: 5,
    marginBottom: 5
  },
  separator: {
    height: 10,
    backgroundColor: colors.light3,
  },
  text: {
    flex: 1,
    color: colors.dark1,
    fontSize: 14
  },
  icon: {
    marginLeft: 8,
    marginRight: 16,
  },
  hint: {
    flex: 1,
    fontSize: 12,
    paddingTop: 4,
    textAlign: 'right',
    color: colors.dark1
  },
  count: {
    fontSize: 14,
    color: colors.border
  }
});
        console.log(data);
      this.setState(data);
    });
  }
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'stretch',
    backgroundColor: '#f5fcff'
  },
  map: {
    flex: 2,
    marginTop: 30
  },
  textWrapper: {
    flex: 1,
    alignItems: 'center'

  },
  text: {
    fontSize: 30
  }
});


// Do in the root component
AppRegistry.registerComponent('weather', () => Weather);
Beispiel #24
0
import React, {Component, PropTypes} from "react";
import {Dimensions, Platform, StyleSheet, WebView} from "react-native";
import IPropTypes from "react-immutable-proptypes";
import shallowCompare from "react-addons-shallow-compare";

import readingsDailyAggregatesToHighchartsData from "../lib/readings-daily-aggregates-to-highcharts-data";
import {lineForecast, lineReading, lineStandby} from "../lib/colors";

const styles = StyleSheet.create({
    webView: {
        marginBottom: -5,
        marginRight: -5
    }
});

export default class Highcharts extends Component {

    static propTypes = {
        aggregates: IPropTypes.map.isRequired,
        charts: PropTypes.arrayOf(PropTypes.shape({
            sensorId: PropTypes.string,
            source: PropTypes.string,
            measurementType: PropTypes.string,
            day: PropTypes.string
        }).isRequired).isRequired,
        height: PropTypes.number.isRequired
    }

    constructor (props) {
        super(props);
        this.state = {
module.exports = StyleSheet.create({
  menu_icon: {
    padding: 10,
    paddingLeft: 5,
    width: W_width*0.05, 
    height: W_height*0.04,
  },
  page_title: {
    flex: 1,
    fontSize: 24,
    paddingRight: W_width*0.08,
    paddingTop: 10,
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    color: 'white',
  },
  bg:{
    width: W_width,
    height: W_height,
    flex: 1
  },
  container_title: {
    flexDirection: 'row',
    height: W_height*0.085,
    backgroundColor: '#ffc300',
  },
  page_title: {
    flex: 1,
    fontSize: 24,
    paddingRight: W_width*0.08,
    paddingTop: 10,
    textAlign: 'center',
    backgroundColor: '#ffc300',
    color: 'white',
  },
  containerMenu: {
    flex: 1,
    width: W_width*0.95,
    margin:9
  },
  img:{
    width: W_width*0.95, 
    height: W_height*0.30,
  },
  rowStyle: {
    flexDirection: 'row',
  },
  title: {
    fontSize: 24,
    backgroundColor: 'gray',
    color: 'white',
    width: W_width*0.975,
    padding: 3,
  },
  img_rank: {
    width: W_width*0.055, 
    height: W_height*0.03,
    position: 'absolute',
    right: 12,
  },
  img_share: {
    width: W_width*0.13, 
    height: W_height*0.08,
    position: 'absolute',
    right: 20,
    bottom: 0,
  },
  price: {
    fontSize: 20,
    paddingTop:5,
    backgroundColor: 'rgba(0,0,0,0)',
    color: '#ffc300',
    fontWeight: 'bold',
  },
  bottom_a: {
    borderWidth: 3,
    borderColor: '#ffc300',
    marginTop: 5,
    marginRight: 3,
    flex: 0.5,
  },
  bottom_a_text: {
    fontSize: 20,
    textAlign: 'center',
    color: '#ffc300',
    fontWeight: 'bold',
  },
  bottom_b: {
    backgroundColor: '#ffc300',
    marginTop: 5,
    marginLeft: 3,
    flex: .5,
  },
  bottom_b_text: {
    fontSize: 20,
    textAlign: 'center',
    paddingTop: 3,
  },
  description: {
    fontSize: 15,
    color: '#494949',
    textAlign: 'justify',
    marginTop: 5,
  },

});
export default class Line extends React.Component{

  static navigationOptions = {
    title: 'Line',
  };

  render(){

    const path = ART.Path();
    path.moveTo(1,1); //将起始点移动到(1,1) 默认(0,0)
    path.lineTo(300,1); //连线到目标点(300,1)

    return(
      <View style={styles.container}>
        <ART.Surface width={300} height={2}>
          <ART.Shape d={path} stroke="#000000" strokeWidth={1} />
        </ART.Surface>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
const localStyles = StyleSheet.create({
  toolbar: {
    flexDirection: 'row',
    alignItems: 'center',
    //paddingHorizontal: 32,
    //justifyContent: 'center',
    //backgroundColor: theme.toolbar ? theme.toolbar : theme[0].color,
    height: 56,
  },
  left: {
    flex: 3,
    //alignItems: 'flex-end',
    alignSelf: 'center',
    justifyContent: 'center',
  },
  right: {
    flex: 3,
    alignItems: 'flex-end',
    alignSelf: 'center',
    justifyContent: 'flex-end',
    flexDirection: 'row',
    //flexWrap: 'nowrap',
  },
  center: {
    flex: 4,
    //alignItems: 'center',
    //alignSelf: 'center',
    //justifyContent: 'center',
  },
  inner: {
    flex: 1,
    height: 56,
    alignItems: 'center',
    flexWrap: 'nowrap',
    flexDirection: 'row',
  },
  avatarContainer: {
    flex: 1,
    alignItems: 'center',
  },
  avatar: {
    width: 24,
    height: 24,
  },
  title: {
    textAlign: 'center',
    color: 'white',
    fontSize: 18,
  },
  button: {
    //flex: 1,
    height: 40,
    width: 40,
  },
  navButton: {
    height: 56,
    width: 56,
  },
  navIcon: {
    margin: 16,
    height: 24,
    width: 24,
  },
  buttonImage: {
    margin: 8,
    //marginVertical: 16,
    //marginHorizontal: 8,
    height: 24,
    width: 24,
  }
});
Beispiel #28
0
    var defaultComponent = HomeComponent;
    return (
      <Navigator
            initialRoute={{name: defaultName, component: defaultComponent}}
            configureScene={(route) => {
              return Navigator.SceneConfigs.VerticalDownSwipeJump;
            }}
            renderScene={(route, navigator) => {
              let Component = route.component;
              return <Component {...route.params} navigator={navigator} />
            }}/>
    );
  }
}


const styles = StyleSheet.create({
  wrapper: {
    borderRadius: 5,
    marginBottom: 15,
    marginTop:25,
  },
  button: {
    backgroundColor: '#eeeeee',
    padding: 10,
    borderRadius: 5,
  },
});

AppRegistry.registerComponent('myjoking', () => myjoking);
Beispiel #29
0
        <Text style={styles.welcome}>
          calendar page!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  text:{
    marginTop:10,
    fontSize:20,
  }
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'stretch'
  },
  list: {
    flex: 1
  },
  toolbar: {
    height: 44,
    backgroundColor: '#f8f8f8',
    flexDirection: 'row',
    alignItems: 'center',
    padding: 20
  },
  spacer: {
    flex: 1
  },
  messageContainer: {
    flexDirection: 'row',
    position: 'absolute',
    top: 0,
    bottom: 44,
    left: 0,
    right: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  message: {
    opacity: 0.7,
    fontSize: 16,
    fontWeight: '300'
  }
});