How to use the react-native-web.View 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 / TabBarIOS / TabBarContentIOS.js View on Github external
function TabBarContentIOS(props){_classCallCheck(this,TabBarContentIOS);return _possibleConstructorReturn(this,(TabBarContentIOS.__proto__||Object.getPrototypeOf(TabBarContentIOS)).call(this,
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 PaulLeCam / react-native-electron / lib / index.js View on Github external
get: function get() {
    return _reactNativeWeb.View;
  }
});
github Beven91 / react-native-on-web / lib / Components / Navigator / index.js View on Github external
}},{key:'render',value:function render()
{var _this6=this;
var newRenderedSceneMap=new Map();
var scenes=this.state.routeStack.map(function(route,index){
var renderedScene=_this6._renderedSceneMap.has(route)&&index!==_this6.state.presentedIndex?
_this6._renderedSceneMap.get(route):
_this6._renderScene(route,index);

newRenderedSceneMap.set(route,renderedScene);
return renderedScene;
});
this._renderedSceneMap=newRenderedSceneMap;

return(
_react2.default.createElement(_reactNativeWeb.View,{style:this.props.style,__source:{fileName:_jsxFileName,lineNumber:446}},
scenes[this.state.presentedIndex]));


}},{key:'navigationContext',get:function get(){if(!this._navigationContext){this._navigationContext=new _context2.default();}return this._navigationContext;}}]);return Navigator;}(_react2.default.Component);process.env.NODE_ENV!=="production"?Navigator.propTypes={configureScene:PropTypes.func,renderScene:PropTypes.func.isRequired,initialRoute:PropTypes.object,initialRouteStack:PropTypes.arrayOf(PropTypes.object),navigator:PropTypes.object}:void 0;
github Beven91 / react-native-on-web / lib / Components / Navigator / index.js View on Github external
}},{key:'_renderScene',value:function _renderScene(

route,i){
var disabledSceneStyle=null;
if(i!==this.state.presentedIndex){
disabledSceneStyle=styles.disabledScene;
}
return(
_react2.default.createElement(_reactNativeWeb.View,{
key:'scene_'+getRouteID(route),
style:[styles.baseScene,this.props.sceneStyle,disabledSceneStyle],__source:{fileName:_jsxFileName,lineNumber:426}},
this.props.renderScene(route,this)));


}},{key:'render',value:function render()
{var _this6=this;
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarIOS.js View on Github external
}},{key:"render",value:function render()




{var _renderContents2=
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;
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarItemIOS.js View on Github external
}},{key:"render",value:function render()

{var _props=
this.props,style=_props.style,selected=_props.selected;
var textColor=selected?{color:this.props.tintColor}:{color:this.props.unselectedTintColor};
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;
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarContentIOS.js View on Github external
}_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;
github Beven91 / react-native-on-web / lib / components / TabBarIOS / TabBarIOS.js View on Github external
}},{key:"render",value:function render()




{var _renderContents2=
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;