Skip to content

Instantly share code, notes, and snippets.

@debreuil

debreuil/protostyle_react.js

Created April 14, 2015 02:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save debreuil/ede6f54bf189dc633f72 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save debreuil/ede6f54bf189dc633f72 to your computer and use it in GitHub Desktop.
Download ZIP
protostyle_react.js
Raw
protostyle_react.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
ScrollView,
TouchableWithoutFeedback,
Animation,
} = React;
var propertyKind = require('./pxEngine').propertyKind;
var animateProperty = require('./pxEngine').animateProperty;
var springProperty = require('./pxEngine').springProperty;
var Test = React.createClass({
getInitialState: function() {
return {
root: { position:'absolute', left:0, top:0, width:320, height:568 },
bG: { position:'absolute', left:0, top:0, width:320, height:568, backgroundColor:'#ffbd05' },
mainColor: { position:'absolute', left:0, top:136, width:320, height:320, backgroundColor:'#ffe3e3' },
facetemplatePng: { position:'absolute', left:0, top:136, width:320, height:320 },
midOptions: { position:'absolute', left:0, top:136, width:320, height:320 },
midopt: { position:'absolute', left:0, top:0, width:1280, height:320 },
eyes: { position:'absolute', left:0, top:0, width:1920, height:320 },
topOptions: { position:'absolute', left:0, top:136, width:320, height:320 },
topopt: { position:'absolute', left:0, top:0, width:320, height:320 },
hair: { position:'absolute', left:0, top:0, width:1920, height:320 },
tops: { position:'absolute', left:0, top:136, width:320, height:320 },
top1: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
top2: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
top3: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
top4: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
accessories: { position:'absolute', left:0, top:136, width:320, height:320 },
a1: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
a2: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
a3: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
a4: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
a5: { position:'absolute', opacity:0, left:0, top:0, width:320, height:320 },
botOptions: { position:'absolute', left:0, top:136, width:320, height:320 },
botopt: { position:'absolute', left:0, top:0, width:1280, height:320 },
mouths: { position:'absolute', left:0, top:0, width:1920, height:320 },
popupBg: { position:'absolute', left:0, top:136, width:320, height:320 },
controls: { position:'absolute', left:0, top:136, width:320, height:320 },
btleft: { position:'absolute', left:-30, top:0, width:30, height:90 },
excess5: { position:'absolute', left:-51, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
bmleft: { position:'absolute', left:-30, top:110, width:30, height:90 },
excess4: { position:'absolute', left:-51, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
bbleft: { position:'absolute', left:-30, top:220, width:30, height:90 },
excess3: { position:'absolute', left:-51, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
btright: { position:'absolute', left:320, top:0, width:30, height:90 },
excess2: { position:'absolute', left:30, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
bmright: { position:'absolute', left:320, top:110, width:30, height:90 },
excess1: { position:'absolute', left:30, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
bbright: { position:'absolute', left:320, top:220, width:30, height:90 },
excess: { position:'absolute', left:30, top:0, width:51, height:90, backgroundColor:'#ff4a1f' },
statusBar: { position:'absolute', left:0, top:0, width:320, height:20, backgroundColor:'#ff4a1f' },
popup: { position:'absolute', left:0, top:466, width:320, height:361 },
bottomBorder: { position:'absolute', left:0, top:456, width:320, height:50 },
xNewLayer8: { position:'absolute', left:0, top:25, width:320, height:128, backgroundColor:'#ffbd05' },
menu: { position:'absolute', left:0, top:493, width:320, height:75 },
navAccess: { position:'absolute', left:109, top:5, width:104, height:70 },
navTops: { position:'absolute', left:216, top:5, width:104, height:70 },
navSkintone: { position:'absolute', left:0, top:5, width:104, height:70 },
colorSelect: { position:'absolute', left:0, top:569, width:320, height:130 },
bg1: { position:'absolute', left:0, top:20, width:320, height:110, backgroundColor:'#ff4a1f' },
bg: { position:'absolute', left:0, top:0, width:320, height:94 },
color1: { position:'absolute', left:5, top:30, width:46, height:59 },
color2: { position:'absolute', left:58, top:30, width:46, height:59 },
color3: { position:'absolute', left:111, top:30, width:46, height:59 },
color4: { position:'absolute', left:163, top:30, width:46, height:59 },
color5: { position:'absolute', left:216, top:30, width:46, height:59 },
color6: { position:'absolute', left:268, top:30, width:46, height:59 },
accessoriesSelect: { position:'absolute', left:0, top:569, width:320, height:130 },
bg3: { position:'absolute', left:0, top:20, width:320, height:110, backgroundColor:'#ff4a1f' },
bg2: { position:'absolute', left:0, top:0, width:320, height:94 },
btnA1: { position:'absolute', left:12, top:29, width:50, height:50 },
btnA2: { position:'absolute', left:72, top:29, width:50, height:50 },
btnA3: { position:'absolute', left:134, top:29, width:50, height:50 },
btnA4: { position:'absolute', left:196, top:29, width:50, height:50 },
btnA5: { position:'absolute', left:258, top:29, width:50, height:50 },
topsSelect: { position:'absolute', left:0, top:569, width:320, height:130 },
bgCopy1: { position:'absolute', left:0, top:20, width:320, height:110, backgroundColor:'#ff4a1f' },
bgCopy: { position:'absolute', left:0, top:0, width:320, height:94 },
btnT1: { position:'absolute', left:14, top:29, width:73, height:50 },
btnT2: { position:'absolute', left:92, top:29, width:74, height:50 },
btnT3: { position:'absolute', left:171, top:29, width:50, height:50 },
btnT4: { position:'absolute', left:231, top:29, width:72, height:50 },
tapArea: { position:'absolute', opacity:0, left:0, top:0, width:320, height:459 },
topbarPng: { position:'absolute', left:0, top:20, width:320, height:44 },
lockdown: { position:'absolute', left:75, top:20, width:170, height:44 },
splash: { position:'absolute', left:0, top:0, width:320, height:568 },
introFacePng: { position:'absolute', left:135, top:255, width:50, height:58 },
};
},
// PXViewExtension.SetImageNamed("btn-left.png", this.Btleft, 0);
// PXViewExtension.SetImageNamed("btn-left.png", this.Bmleft, 0);
// PXViewExtension.SetImageNamed("btn-left.png", this.Bbleft, 0);
// PXViewExtension.SetImageNamed("btn-right.png", this.Btright, 0);
// PXViewExtension.SetImageNamed("btn-right.png", this.Bmright, 0);
// PXViewExtension.SetImageNamed("btn-right.png", this.Bbright, 0);
// PXViewExtension.SetImageNamed("bottom-border.png", this.BottomBorder, 0);
// PXViewExtension.SetImageNamed("menu-bar.png", this.Menu, 0);
handleSplashTap: function(){
console.log("handleSplashTap");
this.state.popupBg.alpha = 0;
springProperty(propertyKind.x, 0, this.refs.Btleft, 1, 0.8);
springProperty(propertyKind.x, 0, this.refs.Bmleft, 1.2, 0.8);
springProperty(propertyKind.x, 0, this.refs.Bbleft, 1.4, 0.8);
springProperty(propertyKind.y, 136, this.refs.Popup, 0.8, 0.8);
this.state.popup.alpha = 0;
animateProperty(propertyKind.alpha, 0, this.refs.Splash, 0.3, 0.2);
animateProperty(propertyKind.scale, 0.8, this.refs.IntroFacePng, 0, 0.2);
animateProperty(propertyKind.scale, 100, this.refs.IntroFacePng, 0.2, 0.5);
animateProperty(propertyKind.alpha, 0, this.refs.IntroFacePng, 0.5, 0.2);
this.forceUpdate();
},
handleLockdownTap: function(){
console.log("handleLockdownTap");
if(this.Controls.Alpha == 1) {
animateProperty(propertyKind.alpha, 0, this.refs.Controls, 0, 0.1);
}
else {
animateProperty(propertyKind.alpha, 1, this.refs.Controls, 0, 0.1);
}
if(this.Menu.Frame.Location.Y != 493) {
springProperty(propertyKind.y, 493, this.refs.Menu, 0, 0.8);
}
else {
springProperty(propertyKind.y, 580, this.refs.Menu, 0, 0.8);
}
this.forceUpdate();
},
handleTapAreaTap: function(){
console.log("handleTapAreaTap");
springProperty(propertyKind.y, 580, this.refs.ColorSelect, 0, 0.8);
springProperty(propertyKind.y, 580, this.refs.AccessoriesSelect, 0, 0.8);
springProperty(propertyKind.y, 580, this.refs.TopsSelect, 0, 0.8);
this.state.tapArea.alpha = 0;
this.forceUpdate();
},
handleBtnT4Tap: function(){
console.log("handleBtnT4Tap");
if(this.Top4.Alpha == 0) {
this.state.top4.alpha = 1;
}
else {
this.state.top4.alpha = 0;
}
this.state.top1.alpha = 0;
this.state.top2.alpha = 0;
this.state.top3.alpha = 0;
this.forceUpdate();
},
handleBtnT3Tap: function(){
console.log("handleBtnT3Tap");
if(this.Top3.Alpha == 0) {
this.state.top3.alpha = 1;
}
else {
this.state.top3.alpha = 0;
}
this.state.top1.alpha = 0;
this.state.top2.alpha = 0;
this.state.top4.alpha = 0;
this.forceUpdate();
},
handleBtnT2Tap: function(){
console.log("handleBtnT2Tap");
if(this.Top2.Alpha == 0) {
this.state.top2.alpha = 1;
}
else {
this.state.top2.alpha = 0;
}
this.state.top1.alpha = 0;
this.state.top3.alpha = 0;
this.state.top4.alpha = 0;
this.forceUpdate();
},
handleBtnT1Tap: function(){
console.log("handleBtnT1Tap");
if(this.Top1.Alpha == 0) {
this.state.top1.alpha = 1;
}
else {
this.state.top1.alpha = 0;
}
this.state.top2.alpha = 0;
this.state.top3.alpha = 0;
this.state.top4.alpha = 0;
this.forceUpdate();
},
handleColor6Tap: function(){
console.log("handleColor6Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.8, 0.74, 1), mainColor, 0);
this.forceUpdate();
},
handleColor5Tap: function(){
console.log("handleColor5Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.89, 0.78, 1), mainColor, 0);
this.forceUpdate();
},
handleColor4Tap: function(){
console.log("handleColor4Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.93, 0.8, 1), mainColor, 0);
this.forceUpdate();
},
handleColor3Tap: function(){
console.log("handleColor3Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.95, 0.8, 1), mainColor, 0);
this.forceUpdate();
},
handleColor2Tap: function(){
console.log("handleColor2Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.86, 0.82, 1), mainColor, 0);
this.forceUpdate();
},
handleColor1Tap: function(){
console.log("handleColor1Tap");
// PXViewExtension.SetColor(UIColor.FromRGBA(1, 0.89, 0.89, 1), mainColor, 0);
this.forceUpdate();
},
handleBtnA5Tap: function(){
console.log("handleBtnA5Tap");
if(this.A5.Alpha == 0) {
this.state.a5.alpha = 1;
}
else if(this.A5.Alpha == 1) {
this.state.a5.alpha = 0;
}
this.forceUpdate();
},
handleBtnA4Tap: function(){
console.log("handleBtnA4Tap");
if(this.A4.Alpha == 0) {
this.state.a4.alpha = 1;
}
else if(this.A4.Alpha == 1) {
this.state.a4.alpha = 0;
}
this.forceUpdate();
},
handleBtnA3Tap: function(){
console.log("handleBtnA3Tap");
if(this.A3.Alpha == 0) {
this.state.a3.alpha = 1;
}
else if(this.A3.Alpha == 1) {
this.state.a3.alpha = 0;
}
this.forceUpdate();
},
handleBtnA2Tap: function(){
console.log("handleBtnA2Tap");
if(this.A2.Alpha == 0) {
this.state.a2.alpha = 1;
}
else if(this.A2.Alpha == 1) {
this.state.a2.alpha = 0;
}
this.forceUpdate();
},
handleBtnA1Tap: function(){
console.log("handleBtnA1Tap");
if(this.A1.Alpha == 0) {
this.state.a1.alpha = 1;
}
else if(this.A1.Alpha == 1) {
this.state.a1.alpha = 0;
}
this.forceUpdate();
},
handleNavSkintoneTap: function(){
console.log("handleNavSkintoneTap");
springProperty(propertyKind.y, 474, this.refs.ColorSelect, 0, 0.8);
this.state.tapArea.alpha = 1;
this.forceUpdate();
},
handleNavTopsTap: function(){
console.log("handleNavTopsTap");
springProperty(propertyKind.y, 474, this.refs.TopsSelect, 0, 0.8);
this.state.tapArea.alpha = 1;
this.forceUpdate();
},
handleNavAccessTap: function(){
console.log("handleNavAccessTap");
springProperty(propertyKind.y, 474, this.refs.AccessoriesSelect, 0, 0.8);
this.state.tapArea.alpha = 1;
this.forceUpdate();
},
handleBbrightTap: function(){
console.log("handleBbrightTap");
if(this.Botopt.Frame.Location.X <= -1600) {
animateProperty(propertyKind.x, -1280, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X <= -1280) {
animateProperty(propertyKind.x, -960, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X <= -960) {
animateProperty(propertyKind.x, -640, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X <= -640) {
animateProperty(propertyKind.x, -320, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X <= -320) {
animateProperty(propertyKind.x, 0, this.refs.Botopt, 0, 0.2);
}
if(this.Botopt.Frame.Location.X >= -1600) {
springProperty(propertyKind.x, 0, this.refs.Bbleft, 0, 0.8);
}
if(this.Botopt.Frame.Location.X == -320) {
springProperty(propertyKind.x, 320, this.refs.Bbright, 0, 0.8);
}
this.forceUpdate();
},
handleBmrightTap: function(){
console.log("handleBmrightTap");
if(this.Midopt.Frame.Location.X <= -1600) {
animateProperty(propertyKind.x, -1280, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X <= -1280) {
animateProperty(propertyKind.x, -960, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X <= -960) {
animateProperty(propertyKind.x, -640, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X <= -640) {
animateProperty(propertyKind.x, -320, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X <= -320) {
animateProperty(propertyKind.x, 0, this.refs.Midopt, 0, 0.2);
}
if(this.Midopt.Frame.Location.X >= -1600) {
springProperty(propertyKind.x, 0, this.refs.Bmleft, 0, 0.8);
}
if(this.Midopt.Frame.Location.X == -320) {
springProperty(propertyKind.x, 320, this.refs.Bmright, 0, 0.8);
}
this.forceUpdate();
},
handleBtrightTap: function(){
console.log("handleBtrightTap");
if(this.Topopt.Frame.Location.X <= -1600) {
animateProperty(propertyKind.x, -1280, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X <= -1280) {
animateProperty(propertyKind.x, -960, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X <= -960) {
animateProperty(propertyKind.x, -640, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X <= -640) {
animateProperty(propertyKind.x, -320, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X <= -320) {
animateProperty(propertyKind.x, 0, this.refs.Topopt, 0, 0.2);
}
if(this.Topopt.Frame.Location.X >= -1600) {
springProperty(propertyKind.x, 0, this.refs.Btleft, 0, 0.8);
}
if(this.Topopt.Frame.Location.X == -320) {
springProperty(propertyKind.x, 320, this.refs.Btright, 0, 0.8);
}
this.forceUpdate();
},
handleBbleftTap: function(){
console.log("handleBbleftTap");
if(this.Botopt.Frame.Location.X >= 320) {
animateProperty(propertyKind.x, 0, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X >= 0) {
animateProperty(propertyKind.x, -320, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X >= -320) {
animateProperty(propertyKind.x, -640, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X >= -640) {
animateProperty(propertyKind.x, -960, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X >= -960) {
animateProperty(propertyKind.x, -1280, this.refs.Botopt, 0, 0.2);
}
else if(this.Botopt.Frame.Location.X >= -1280) {
animateProperty(propertyKind.x, -1600, this.refs.Botopt, 0, 0.2);
}
if(this.Botopt.Frame.Location.X == -1280) {
springProperty(propertyKind.x, -30, this.refs.Bbleft, 0, 0.8);
}
if(this.Botopt.Frame.Location.X <= 0) {
springProperty(propertyKind.x, 290, this.refs.Bbright, 0, 0.8);
}
this.forceUpdate();
},
handleBmleftTap: function(){
console.log("handleBmleftTap");
if(this.Midopt.Frame.Location.X >= 320) {
animateProperty(propertyKind.x, 0, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X >= 0) {
animateProperty(propertyKind.x, -320, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X >= -320) {
animateProperty(propertyKind.x, -640, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X >= -640) {
animateProperty(propertyKind.x, -960, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X >= -960) {
animateProperty(propertyKind.x, -1280, this.refs.Midopt, 0, 0.2);
}
else if(this.Midopt.Frame.Location.X >= -1280) {
animateProperty(propertyKind.x, -1600, this.refs.Midopt, 0, 0.2);
}
if(this.Midopt.Frame.Location.X == -1280) {
springProperty(propertyKind.x, -30, this.refs.Bmleft, 0, 0.8);
}
if(this.Midopt.Frame.Location.X <= 0) {
springProperty(propertyKind.x, 290, this.refs.Bmright, 0, 0.8);
}
this.forceUpdate();
},
handleBtleftTap: function(){
console.log("handleBtleftTap");
if(this.Topopt.Frame.Location.X >= 320) {
animateProperty(propertyKind.x, 0, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X >= 0) {
animateProperty(propertyKind.x, -320, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X >= -320) {
animateProperty(propertyKind.x, -640, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X >= -640) {
animateProperty(propertyKind.x, -960, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X >= -960) {
animateProperty(propertyKind.x, -1280, this.refs.Topopt, 0, 0.2);
}
else if(this.Topopt.Frame.Location.X >= -1280) {
animateProperty(propertyKind.x, -1600, this.refs.Topopt, 0, 0.2);
}
if(this.Topopt.Frame.Location.X == -1280) {
springProperty(propertyKind.x, -30, this.refs.Btleft, 0, 0.8);
}
if(this.Topopt.Frame.Location.X <= 0) {
springProperty(propertyKind.x, 290, this.refs.Btright, 0, 0.8);
}
this.forceUpdate();
},
render: function() {
return (
<View id='1' ref='root' style={this.state.root}>
<View id='2' ref='BG' style={this.state.bG}/>
<View id='3' ref='MainColor' style={this.state.mainColor}/>
<Image id='4' ref='FacetemplatePng' style={this.state.facetemplatePng}
source={require('image!facetemplate')}/>
<View id='5' ref='MidOptions' style={this.state.midOptions}>
<View id='6' ref='Midopt' style={this.state.midopt}>
<Image id='7' ref='Eyes' style={this.state.eyes}
source={require('image!eyes')}/>
</View>
</View>
<View id='8' ref='TopOptions' style={this.state.topOptions}>
<View id='9' ref='Topopt' style={this.state.topopt}>
<Image id='10' ref='Hair' style={this.state.hair}
source={require('image!hair')}/>
</View>
</View>
<View id='11' ref='Tops' style={this.state.tops}>
<Image id='12' ref='Top1' style={this.state.top1}
source={require('image!top1')}/>
<Image id='13' ref='Top2' style={this.state.top2}
source={require('image!top3')}/>
<Image id='14' ref='Top3' style={this.state.top3}
source={require('image!top2')}/>
<Image id='15' ref='Top4' style={this.state.top4}
source={require('image!top4')}/>
</View>
<View id='16' ref='Accessories' style={this.state.accessories}>
<Image id='17' ref='A1' style={this.state.a1}
source={require('image!access-glasses')}/>
<Image id='18' ref='A2' style={this.state.a2}
source={require('image!access-bow')}/>
<Image id='19' ref='A3' style={this.state.a3}
source={require('image!access-daisy')}/>
<Image id='20' ref='A4' style={this.state.a4}
source={require('image!access-earings')}/>
<Image id='21' ref='A5' style={this.state.a5}
source={require('image!access-scarf')}/>
</View>
<View id='22' ref='BotOptions' style={this.state.botOptions}>
<View id='23' ref='Botopt' style={this.state.botopt}>
<Image id='24' ref='Mouths' style={this.state.mouths}
source={require('image!mouths')}/>
</View>
</View>
<Image id='25' ref='PopupBg' style={this.state.popupBg}
source={require('image!popup-bg')}/>
<View id='26' ref='Controls' style={this.state.controls}>
<TouchableWithoutFeedback onPress={this.handleBtleftTap}>
<View id='27' ref='Btleft' style={this.state.btleft}>
<View id='28' ref='Excess5' style={this.state.excess5}/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBmleftTap}>
<View id='29' ref='Bmleft' style={this.state.bmleft}>
<View id='30' ref='Excess4' style={this.state.excess4}/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBbleftTap}>
<View id='31' ref='Bbleft' style={this.state.bbleft}>
<View id='32' ref='Excess3' style={this.state.excess3}/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtrightTap}>
<View id='33' ref='Btright' style={this.state.btright}>
<View id='34' ref='Excess2' style={this.state.excess2}/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBmrightTap}>
<View id='35' ref='Bmright' style={this.state.bmright}>
<View id='36' ref='Excess1' style={this.state.excess1}/>
</View>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBbrightTap}>
<View id='37' ref='Bbright' style={this.state.bbright}>
<View id='38' ref='Excess' style={this.state.excess}/>
</View>
</TouchableWithoutFeedback>
</View>
<Image id='39' ref='StatusBar' style={this.state.statusBar}
source={require('image!Status-Bar')}/>
<Image id='40' ref='Popup' style={this.state.popup}
source={require('image!popup')}/>
<View id='41' ref='BottomBorder' style={this.state.bottomBorder}>
<View id='42' ref='xNewLayer8' style={this.state.xNewLayer8}/>
</View>
<View id='43' ref='Menu' style={this.state.menu}>
<TouchableWithoutFeedback onPress={this.handleNavAccessTap}>
<View id='44' ref='NavAccess' style={this.state.navAccess}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleNavTopsTap}>
<View id='45' ref='NavTops' style={this.state.navTops}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleNavSkintoneTap}>
<View id='46' ref='NavSkintone' style={this.state.navSkintone}/>
</TouchableWithoutFeedback>
</View>
<View id='47' ref='ColorSelect' style={this.state.colorSelect}>
<View id='48' ref='Bg1' style={this.state.bg1}/>
<Image id='49' ref='Bg' style={this.state.bg}
source={require('image!color-picker')}/>
<TouchableWithoutFeedback onPress={this.handleColor1Tap}>
<View id='50' ref='Color1' style={this.state.color1}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleColor2Tap}>
<View id='51' ref='Color2' style={this.state.color2}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleColor3Tap}>
<View id='52' ref='Color3' style={this.state.color3}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleColor4Tap}>
<View id='53' ref='Color4' style={this.state.color4}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleColor5Tap}>
<View id='54' ref='Color5' style={this.state.color5}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleColor6Tap}>
<View id='55' ref='Color6' style={this.state.color6}/>
</TouchableWithoutFeedback>
</View>
<View id='56' ref='AccessoriesSelect' style={this.state.accessoriesSelect}>
<View id='57' ref='Bg3' style={this.state.bg3}/>
<Image id='58' ref='Bg2' style={this.state.bg2}
source={require('image!accessories')}/>
<TouchableWithoutFeedback onPress={this.handleBtnA1Tap}>
<View id='59' ref='BtnA1' style={this.state.btnA1}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnA2Tap}>
<View id='60' ref='BtnA2' style={this.state.btnA2}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnA3Tap}>
<View id='61' ref='BtnA3' style={this.state.btnA3}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnA4Tap}>
<View id='62' ref='BtnA4' style={this.state.btnA4}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnA5Tap}>
<View id='63' ref='BtnA5' style={this.state.btnA5}/>
</TouchableWithoutFeedback>
</View>
<View id='64' ref='TopsSelect' style={this.state.topsSelect}>
<View id='65' ref='BgCopy1' style={this.state.bgCopy1}/>
<Image id='66' ref='BgCopy' style={this.state.bgCopy}
source={require('image!top-picker')}/>
<TouchableWithoutFeedback onPress={this.handleBtnT1Tap}>
<View id='67' ref='BtnT1' style={this.state.btnT1}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnT2Tap}>
<View id='68' ref='BtnT2' style={this.state.btnT2}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnT3Tap}>
<View id='69' ref='BtnT3' style={this.state.btnT3}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleBtnT4Tap}>
<View id='70' ref='BtnT4' style={this.state.btnT4}/>
</TouchableWithoutFeedback>
</View>
<TouchableWithoutFeedback onPress={this.handleTapAreaTap}>
<View id='71' ref='TapArea' style={this.state.tapArea}/>
</TouchableWithoutFeedback>
<Image id='72' ref='TopbarPng' style={this.state.topbarPng}
source={require('image!topbar')}/>
<TouchableWithoutFeedback onPress={this.handleLockdownTap}>
<View id='73' ref='Lockdown' style={this.state.lockdown}/>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={this.handleSplashTap}>
<Image id='74' ref='Splash' style={this.state.splash}
source={require('image!start-screen')}/>
</TouchableWithoutFeedback>
<Image id='75' ref='IntroFacePng' style={this.state.introFacePng}
source={require('image!intro-face')}/>
</View>
);
}
});
AppRegistry.registerComponent('Test', () => Test);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment