How to use the react-native-web.StyleSheet function in react-native-web

To help you get started, we’ve selected a few react-native-web examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Beven91 / react-native-on-web / lib / components / Modal / Modal.js View on Github external
return true;
}},{key:'emit',value:function emit(






handler){
if(typeof handler==='function'){for(var _len=arguments.length,args=Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key];}
return handler.apply(undefined,args);
}
}}]);return Modal;}(_react2.default.Component);Modal.isReactNativeComponent=true;Modal.defaultProps={visible:true};exports.default=Modal;process.env.NODE_ENV!=="production"?Modal.propTypes={animationType:_react.PropTypes.oneOf(['none','slide','fade']),transparent:_react.PropTypes.bool,visible:_react.PropTypes.bool,onRequestClose:_react.PropTypes.func,onShow:_react.PropTypes.func,animated:_react.PropTypes.bool,supportedOrientations:_react.PropTypes.arrayOf(_react.PropTypes.oneOf(['portrait','portrait-upside-down','landscape','landscape-left','landscape-right'])),onOrientationChange:_react.PropTypes.func}:void 0;


var styles=_reactNativeWeb.StyleSheet.create({
modal:{
position:'fixed',
left:0,
right:0,
bottom:0,
top:0,
backgroundColor:'#fff',
zIndex:10}});
github Beven91 / react-native-on-web / lib / components / ToastAndroid / ToastAndroid.js View on Github external
}},{key:'waiting',value:function waiting()




{
clearTimeout(this.timerId);
this.timerId=setTimeout(this.hide.bind(this),this.state.duration);
}}]);return Toast;}(_react2.default.Component);Toast.SHORT=SHORT;Toast.LONG=LONG;exports.default=Toast;process.env.NODE_ENV!=="production"?Toast.propTypes={message:_react.PropTypes.string.isRequired,duration:_react.PropTypes.number,timer:_react.PropTypes.number}:void 0;


if(typeof window!='undefined'){
Toast.init();
}

var styles=_reactNativeWeb.StyleSheet.create({
toast:{
position:'fixed',
zIndex:100,
width:'100%',
left:0,
bottom:'15%',
justifyContent:'center',
alignItems:'center'},

toastInner:{
fontSize:14,
lineHeight:22,
color:'#ffffff',
borderRadius:4,
display:'inline-block',
backgroundColor:'rgba(0,0,0,.65)',
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarContentIOS.js View on Github external
props));
}_createClass(TabBarContentIOS,[{key:"render",value:function render()




{
var inStyle={opacity:this.props.selected?1:0};
return(
_react2.default.createElement(_reactNativeWeb.View,_extends({},this.props,{style:[styles.tabContent,this.props.style,inStyle],__source:{fileName:_jsxFileName,lineNumber:32}}),this.props.children));

}}]);return TabBarContentIOS;}(_react2.default.Component);exports.default=TabBarContentIOS;process.env.NODE_ENV!=="production"?TabBarContentIOS.propTypes=_extends({},_reactNativeWeb.View.propTypes,{selected:_react.PropTypes.bool}):void 0;



var styles=_reactNativeWeb.StyleSheet.create({
tabContent:{
position:'absolute',
top:0,
bottom:0,
right:0,
left:0}});
github alloy / relational-theory / app / routes.tsx View on Github external
}, res.locals.networkLayer).then(({ data, props }) => {
    const content = ReactDOMServer.renderToString()
    const StyleSheet: any = ReactNative.StyleSheet
    const styleElement = StyleSheet.renderToString()
    res.send(`
      
      
        
        
        
        ${styleElement}
      
      
        <div id="root">${content}</div>
      
      
    `)
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarIOS.js View on Github external
this._renderContents(),tabContents=_renderContents2.tabContents,tabs=_renderContents2.tabs;
return(
_react2.default.createElement(_reactNativeWeb.View,{ref:"tabGroup",style:[styles.tabGroup,this.props.style],__source:{fileName:_jsxFileName,lineNumber:112}},
_react2.default.createElement(_reactNativeWeb.View,{ref:"tabContents",style:styles.tabContents,__source:{fileName:_jsxFileName,lineNumber:113}},
tabContents),

_react2.default.createElement(_reactNativeWeb.View,{ref:"bar",style:[styles.bar,this.getPropsStyle()],__source:{fileName:_jsxFileName,lineNumber:116}},
tabs)));



}}]);return TabBarIOS;}(_react2.default.Component);TabBarIOS.Item=_TabBarItemIOS2.default;exports.default=TabBarIOS;process.env.NODE_ENV!=="production"?TabBarIOS.propTypes=_extends({},_reactNativeWeb.View.propTypes,{unselectedTintColor:_reactNativeWeb.ColorPropType,tintColor:_reactNativeWeb.ColorPropType,barTintColor:_reactNativeWeb.ColorPropType,translucent:_react2.default.PropTypes.bool,itemPositioning:_react2.default.PropTypes.oneOf(['fill','center','auto'])}):void 0;



var styles=_reactNativeWeb.StyleSheet.create({
tabGroup:{
flex:1,
flexDirection:'column'},

bar:{
height:50,
flexDirection:'row',
flexWrap:'nowrap',
justifyContent:'space-around'},

tabContents:{
flex:1,
flexDirection:'row'}});
github PaulLeCam / react-native-electron / lib / index.js View on Github external
get: function get() {
    return _reactNativeWeb.StyleSheet;
  }
});
github Beven91 / react-native-on-web / lib / Components / Navigator / index.js View on Github external
'use strict';Object.defineProperty(exports,"__esModule",{value:true});var _jsxFileName='src\\Components\\Navigator\\index.js';var _extends=Object.assign||function(target){for(var i=1;i
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarItemIOS.js View on Github external
return(
_react2.default.createElement(_reactNativeWeb.View,{style:[styles.tab,style],__source:{fileName:_jsxFileName,lineNumber:87}},

this.props.badge?_react2.default.createElement(_reactNativeWeb.View,{style:styles.badge,__source:{fileName:_jsxFileName,lineNumber:89}},_react2.default.createElement(_reactNativeWeb.Text,{style:styles.badgeText,__source:{fileName:_jsxFileName,lineNumber:89}},this.props.badge)):'',

_react2.default.createElement(_reactNativeWeb.TouchableOpacity,{style:styles.link,onPress:this._onClick.bind(this),__source:{fileName:_jsxFileName,lineNumber:91}},
_react2.default.createElement(_reactNativeWeb.Image,{source:this.props.selected&&this.props.selectedIcon?this.props.selectedIcon:this.props.icon,style:styles.icon,__source:{fileName:_jsxFileName,lineNumber:92}}),

_react2.default.createElement(_reactNativeWeb.Text,{style:[styles.title,textColor],__source:{fileName:_jsxFileName,lineNumber:94}},this.props.title))));



}}]);return TabBarItemIOS;}(_react2.default.Component);exports.default=TabBarItemIOS;process.env.NODE_ENV!=="production"?TabBarItemIOS.propTypes=_extends({},_reactNativeWeb.View.propTypes,{badge:_react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string,_react2.default.PropTypes.number]),systemIcon:_react2.default.PropTypes.oneOf(['bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated']),icon:_PropTypes2.default.image,selectedIcon:_PropTypes2.default.image,onPress:_react2.default.PropTypes.func,renderAsOriginal:_react2.default.PropTypes.bool,selected:_react2.default.PropTypes.bool,title:_react2.default.PropTypes.string,unselectedTintColor:_reactNativeWeb.ColorPropType,tintColor:_reactNativeWeb.ColorPropType}):void 0;


var styles=_reactNativeWeb.StyleSheet.create({
tab:{
position:'relative',
overflow:'hidden',
width:50,
height:50,
justifyContent:'center',
alignItems:'center',
paddingTop:5},

link:{
width:'100%',
alignItems:'center',
outline:'none'},

badgeText:{
color:'#fff',