Skip to content

P
pianoApp
Commit f297bc97 authored by norhalimah's avatar norhalimah
Browse files
Options

updating

parent f4f3a657
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 54 deletions
screens/metronome.js
View file @ f297bc97
......@@ -16,7 +16,7 @@ import {
TouchableOpacity,
BackHandler,
//Pressable,
TextInput,
//TextInput,
SafeAreaView,
Dimensions,
ScrollView,
......@@ -105,7 +105,7 @@ class MetronomeSkill extends React.Component {
//if (Moved > 10 ) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
console.log('move');
//console.log('move');
// this.setState({tempo: this.state.tempo + 1});
// this.rightUp();
this.leftDown();
......@@ -114,7 +114,7 @@ class MetronomeSkill extends React.Component {
// if (Moved > -80 && Moved < -10) {
var Tm = Moved / 360;
this._rotationAnimation.setValue(Tm);
console.log('move anti');
// console.log('move anti');
//this.setState({tempo: this.state.tempo - 1});
// this.leftDown();
this.rightUp();
......@@ -165,18 +165,20 @@ class MetronomeSkill extends React.Component {
isEnabled: true,
showPendulum:true,
barTempoH : config.deviceHeight * 0.09,
showkeypad:false,
tempoText: 0,
// num : 0,
};
}
toggleKeyword = (keyword) => {
console.log(keyword);
/*toggleKeyword = (keyword) => {
// console.log(keyword);
};
onSubmit = () => {
console.log('Submit');
};
}; */
homeExit = async () => {
this.props.navigation.navigate('1');
......@@ -190,14 +192,14 @@ class MetronomeSkill extends React.Component {
componentDidMount() {
//this.animate();
//this.removeArray();
this.removeArray();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
Orientation.lockToPortrait();
// this.displayData();
}
componentWillUnmount() {
// this.removeArray();
// this.removeArray();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//clearInterval(this.interval);
// Orientation.lockToLandscape();
......@@ -205,8 +207,29 @@ class MetronomeSkill extends React.Component {
';';
//reset
removeArray = () => {
console.log('Remove');
removeArray = () => {
let index = -1;
// console.log(barTempo.length);
// console.log(this.state.beat);
if (barTempo.length < 4) {
for (var j = barTempo.length; j < 4; j++) {
barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
}
this.setState({beat: barTempo.length});
}
else {
this.setState({beat: 4});
for (var j = barTempo.length; j > this.state.beat; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
}
}}
barTempo.map((item,id) => {
item.active = true;
});
};
//beat
......@@ -230,8 +253,8 @@ class MetronomeSkill extends React.Component {
miniBar.splice(-index, 1);
}
}
console.log(this.state.beat);
console.log(barTempo);
// console.log(this.state.beat);
// console.log(barTempo);
};
beatUp = async () => {
......@@ -242,7 +265,7 @@ class MetronomeSkill extends React.Component {
this.setState({beat: this.state.beat + 1});
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}],active:true});
miniBar.push({image:this.state.image});
console.log(barTempo);
// console.log(barTempo);
}
};
......@@ -511,10 +534,10 @@ class MetronomeSkill extends React.Component {
}
keepTap = async () => {
randomTempo = Math.floor(Math.random() * 300);
console.log(randomTempo);
randomTempo = Math.floor(Math.random() * 400) + 10;
//console.log(randomTempo);
this.setState({tempo:randomTempo});
if (this.state.tempo > 10 && this.state.tempo <= 19){
if (this.state.tempo > 10 && this.state.tempo <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (this.state.tempo > 19 && this.state.tempo <= 40){
......@@ -575,7 +598,7 @@ class MetronomeSkill extends React.Component {
//note
toneDown = () => {
console.log('Down');
// console.log('Down');
if (this.state.toneSound === 1) {
this.setState({toneSound: 1, soundName: sound1});
}
......@@ -635,73 +658,182 @@ getRotationAnimation = () => {
money = async() =>{
let index = -1;
console.log('money');
// console.log('money');
//console.log(barTempo);
this.setState({tempo:126});
this.setState({tempoName:'Allegro'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
if (barTempo.length < 7) {
for (var j = barTempo.length; j < 7; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
}
this.setState({beat: barTempo.length});
// this.setState({beat: barTempo.length});
}
if (barTempo.length > 7){
console.log(barTempo.length);
//console.log(barTempo);
for (var j = barTempo.length; j > 7; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
}
this.setState({beat: 7});
// console.log(barTempo);
};
jude = async () =>{
console.log('hey jude');
jude = async() =>{
// console.log('hey jude');
// console.log(barTempo);
this.setState({tempo:74});
this.setState({tempoName:'Andante'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1;
if (barTempo.length < 4) {
for (var j = barTempo.length; j < 4; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active:true});
barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active:true});
miniBar.push({image:this.state.image});
}
this.setState({beat: barTempo.length});
//this.setState({beat: barTempo.length});
}
if (barTempo.length > 4){
// console.log(barTempo.length);
for (var j = barTempo.length; j > 4; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
console.log(barTempo.length);
}
this.setState({beat: 4});
// console.log(barTempo);
};
cajon = async () =>{
console.log('cajon rhythm');
//console.log('cajon rhythm');
//console.log(barTempo);
this.setState({tempo:300});
this.setState({tempoName:'Prestissimo'});
this.setState({note:4});
this.setState({image: note3});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1;
if (barTempo.length < 8) {
for (var j = barTempo.length; j < 8; j++) {
barTempo.push({name :this.state.beat + 1,note:[{id:1}, {id:2},{id:3}], active :true});
barTempo.push({name :barTempo.length + 1,note:[{id:1}, {id:2},{id:3}], active :true});
miniBar.push({image:this.state.image});
}
this.setState({beat: barTempo.length});
// this.setState({beat: barTempo.length});
}
if (barTempo.length > 8){
// console.log(barTempo.length);
for (var j = barTempo.length; j > 8; j--) {
if ((index = barTempo.map(item => item.name).indexOf(j) !== -1)) {
barTempo.splice(-index, 1);
miniBar.splice(-index, 1);
}
}
this.setState({beat: barTempo.length});
console.log(barTempo.length);
}
this.setState({beat: 8});
// console.log(barTempo);
};
setTempoText(textT){
// console.log(textT.toString());
// console.log(this.state.tempoText.length);
if (this.state.tempoText.length === 3) {
console.log('Limit 3');
}
else {
if (this.state.tempoText === 0 ) {
this.setState({tempoText: textT});
}
else {
this.setState({tempoText: this.state.tempoText.toString().concat(textT.toString())});
}
}
//console.log(this.state.tempo);
}
setTempo(tempoT) {
// console.log(tempoT);
if (tempoT < 10) {
this.setState({tempo:10, tempoText:10});
this.setState({tempoName:'Larghissimo'});
console.log(this.state.tempo);
}
else if (tempoT > 500) {
this.setState({tempo:500, tempoText:500});
this.setState({tempoName:'Prestissimo'});
console.log(this.state.tempo);
}
else { this.setState({tempo:tempoT, tempoText:tempoT});
console.log(this.state.tempo);
if (tempoT > 10 && tempoT <= 19){
this.setState({tempoName:'Larghissimo'});
}
if (tempoT > 19 && tempoT <= 40){
this.setState({tempoName:'Grave'});
}
if (tempoT > 40 && tempoT <= 45){
this.setState({tempoName:'Lento'});
}
if (tempoT > 45 && tempoT <= 50){
this.setState({tempoName:'Largo'});
}
if (tempoT > 50 && tempoT <= 55){
this.setState({tempoName:'Larghetto'});
}
if (tempoT > 55 && tempoT <= 65){
this.setState({tempoName:'Adagio'});
}
if (tempoT > 65 && tempoT <= 69){
this.setState({tempoName:'Adagietto'});
}
if (tempoT > 69 && tempoT <= 72){
this.setState({tempoName:'Andante moderato'});
}
if (tempoT > 72 && tempoT <= 77){
this.setState({tempoName:'Andante'});
}
if (tempoT > 77 && tempoT <= 83){
this.setState({tempoName:'Andantino'});
}
if (tempoT > 83 && tempoT <= 85){
this.setState({tempoName:'Marcia moderato'});
}
if (tempoT > 85 && tempoT <= 97){
this.setState({tempoName:'Moderato'});
}
if (tempoT > 97 && tempoT <= 109){
this.setState({tempoName:'Allegretto'});
}
if (tempoT > 109 && tempoT <= 132){
this.setState({tempoName:'Allegro'});
}
if (tempoT > 132 && tempoT <= 140){
this.setState({tempoName:'Vivace'});
}
if (tempoT > 140 && tempoT <= 150){
this.setState({tempoName:'Vivacissmo'});
}
if (tempoT > 150 && tempoT <= 167){
this.setState({tempoName:'Allegrissma'});
}
if (tempoT > 167 && tempoT <= 177){
this.setState({tempoName:'Presto'});
}
if (tempoT > 177 && tempoT <= 500){
this.setState({tempoName:'Prestissimo'});
}
}
this.setState({showkeypad: false, tempoText:0});
}
toggleSwitch = () => {
if (this.state.isEnabled === false)
{this.setState({isEnabled: true, showPendulum: true, barTempoH:config.deviceHeight * 0.09});}
......@@ -712,7 +844,7 @@ getRotationAnimation = () => {
pendulum (){
const movingMargin = this.animatedValue.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 300, 1],
outputRange: [0, 290, 1],
});
if (this.state.showPendulum){
return (
......@@ -721,6 +853,7 @@ getRotationAnimation = () => {
<Animated.Image
style={{
marginLeft: this.state.showImg ? 0 : movingMargin,
marginRight:10,
height: '180%',
width: '8%',
backgroundColor: 'black', position: 'absolute'}} />
......@@ -747,7 +880,7 @@ getRotationAnimation = () => {
{/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'60%', width:'93%', marginRight:30}}>
<View style={{ backgroundColor: 'gainsboro',marginTop:296,height:'60%', width:'93%', marginRight:35}}>
<SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>Settings</Text>
</View>
......@@ -796,7 +929,7 @@ getRotationAnimation = () => {
{/* Modal 2*/}
<Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:296,height:'80%',width:'93%', marginLeft:30}}>
<View style={{ backgroundColor: 'gainsboro',marginTop:296,height:'80%',width:'93%', marginLeft:25}}>
<SafeAreaView>
<View style={{alignItems: 'center', marginTop:10}}><Text style={{ fontSize:25, color: 'gray'}}>List</Text>
</View>
......@@ -850,12 +983,12 @@ getRotationAnimation = () => {
{/* Modal 3*/}
<Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{ backgroundColor: '#545252',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<View style={{ backgroundColor: 'gainsboro',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.1,marginRight: config.deviceWidth * 0.1,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Beat</Text>
<Text style={{fontSize:18, marginLeft:20, marginRight:20}}>Beat</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.beatDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
......@@ -866,15 +999,15 @@ getRotationAnimation = () => {
</View>
</View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>T.S.</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'40%',borderRadius:8}}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:18, marginLeft:20, marginRight:20}}>T.S.</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'120%', height:'50%',borderRadius:8}}>
<Text style={{marginLeft:10, fontSize:25}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.05,marginRight: config.deviceWidth * 0.01,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:20, marginLeft:20, marginRight:20}}>Note</Text>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.2,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:18, marginLeft:20, marginRight:20}}>Note</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'35%', height:'100%',borderRadius:10}} onPress={this.noteDown}>
<Text style={{marginLeft:8, fontSize:25}}>-</Text>
......@@ -886,13 +1019,13 @@ getRotationAnimation = () => {
</View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.05}}>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.8,marginLeft: config.deviceWidth * 0.01,marginRight: config.deviceWidth * 0.8,marginBottom: config.deviceHeight * 0.01}}>
<Text style={{fontSize:20, marginLeft:100, marginRight:40,marginBottom:20}}>ACCENT</Text>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center'}}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'130%',borderRadius:8}}>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'150%',borderRadius:8}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}>
{miniBar.map((item, id) => (
<Image key={id} style={{height:35, width:15, marginTop:5}} source={item.image}/>
<Image key={id} style={{height:20, width:15, marginTop:5}} source={item.image}/>
))}
</View>
</TouchableOpacity>
......@@ -908,6 +1041,42 @@ getRotationAnimation = () => {
</View>
</Modal>
{/* Modal 4*/}
<Modal transparent={true} visible={this.state.showkeypad} animationType="none">
<View style={{ backgroundColor: 'gainsboro',marginTop:'35%',height:'85%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={{backgroundColor:'white',marginTop:'5%',alignItems: 'center', marginLeft:'38%', width:'25%'}}>
<Text style={{fontSize:35}} maxLength={3}>{this.state.tempoText}</Text>
</View>
<View style={{backgroundColor:'black',alignItems: 'center', alignContent:'center', marginLeft:35, marginRight:35, marginTop:10, height:'72%'}}>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(7)}><Text style={{fontSize:25}}>7</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(8)}><Text style={{fontSize:25}}>8</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(9)}><Text style={{fontSize:25}}>9</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(4)}><Text style={{fontSize:25}}>4</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(5)}><Text style={{fontSize:25}}>5</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center',margin:5}} onPress={() => this.setTempoText(6)}><Text style={{fontSize:25}}>6</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(1)}><Text style={{fontSize:25}}>1</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(2)}><Text style={{fontSize:25}}>2</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(3)}><Text style={{fontSize:25}}>3</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:55}}>
<TouchableOpacity style={{backgroundColor:'red', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setState({tempoText: 0})}><Text style={{fontSize:25}}>C</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempoText(0)}><Text style={{fontSize:25}}>0</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'200%', width:'30%', alignItems: 'center', margin:5}} onPress={() => this.setTempo(this.state.tempoText)}><Text style={{fontSize:25}}>SET</Text></TouchableOpacity>
</View>
</View>
<TouchableOpacity style={{backgroundColor:'white', width:'15%', height:'5%', marginTop:'5%', marginLeft:'45%',borderRadius:5}} onPress={() => this.setState({showkeypad: false})}>
<Text style={{marginLeft:11}}>Back</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</Modal>
<StatusBar hidden />
<SafeAreaView>
......@@ -918,17 +1087,23 @@ getRotationAnimation = () => {
<View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
<Text>TEMPO</Text>
<Text/>
<Text style={{marginLeft:110}}>T.S.</Text>
<Text style={{marginLeft:105}}>T.S.</Text>
<Text>SUB DIV.</Text>
</View>
<View style={{flexDirection: 'row', marginTop:1, justifyContent: 'space-between'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/>
<Image style={{height:30, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/>
<TouchableOpacity onPress={() => this.setState({showkeypad: true})}>
<Text style={{fontSize:35}}>{this.state.tempo}</Text>
<Text style={{fontSize:12, marginTop:15, marginRight:25, width: 70}}>{this.state.tempoName}</Text>
<Text style={{fontSize:35, marginRight:25}}>{this.state.beat}/{this.state.note}</Text>
<Image style={{height:35, width:20, marginTop:10, marginRight:30}} source={this.state.image}/>
</TouchableOpacity>
<Text style={{fontSize:12, marginTop:15, width: 70}}>{this.state.tempoName}</Text>
<TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Text style={{fontSize:35}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Image style={{height:30, width:20, marginTop:10, marginRight:30}} source={this.state.image}/>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
{barTempo.map((item, id) => (
<TouchableOpacity key={id} style={{backgroundColor:item.active ? '#7eb9db' : 'cyan',borderColor:'black', borderWidth:1,width: config.deviceWidth * 0.5 / barTempo.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}}>
<Text/></TouchableOpacity>
......@@ -939,7 +1114,7 @@ getRotationAnimation = () => {
</View>
</View>
<View style={{borderWidth:3, borderColor:'black', width:'95%', marginLeft:10, marginRight:10}}/>
<View style={{backgroundColor:'gray', height: '120%', width:'100%', marginTop:5}}>
<View style={{backgroundColor:'gainsboro', height: '120%', width:'100%', marginTop:5}}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'15%', height:'135%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity>
......@@ -966,7 +1141,7 @@ getRotationAnimation = () => {
</View>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:35, marginTop:10}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}><Text style={{fontSize:25, marginTop:15}}>{this.state.beat}/{this.state.note}</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#7eb9db', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
</View>
</View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment