Skip to content

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

Updating UI

parent 34d57dcd
Hide whitespace changes
Inline Side-by-side
Showing with 285 additions and 228 deletions
App.js
View file @ 569d01b9
...@@ -156,30 +156,11 @@ class App extends React.PureComponent { ...@@ -156,30 +156,11 @@ class App extends React.PureComponent {
<Stack.Screen <Stack.Screen
name="4" name="4"
component={MetronomeSkill} component={MetronomeSkill}
options={({navigation}) => ({ options={{
title: 'Metronome', title: ' ',
//title: 'C Major',
headerTransparent: true, headerTransparent: true,
headerStyle: { headerLeft: null,
backgroundColor: '#81C9C9', }}
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginLeft: '5%',
},
headerBackImage: () => (
<Image
style={{height: 50, width: 50}}
source={closeIcon}
onPress={() => {
Orientation.lockToPortrait();
navigation.navigate('1');
}}
/>
),
})}
/> />
<Stack.Screen <Stack.Screen
name="5" name="5"
......
media/img/img_level_layer1.png
View replaced file @ 34d57dcd View file @ 569d01b9
media/img/img_level_layer1.png

1.12 MB | W: | H:

media/img/img_level_layer1.png

833 KB | W: | H:

media/img/img_level_layer1.png
media/img/img_level_layer1.png
media/img/img_level_layer1.png
media/img/img_level_layer1.png
  • 2-up
  • Swipe
  • Onion skin
screens/listening.js
View file @ 569d01b9
...@@ -550,7 +550,7 @@ class Listen extends React.Component { ...@@ -550,7 +550,7 @@ class Listen extends React.Component {
<Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/> <Image style={{width:'70%', height:'90%', paddingHorizontal: width * 0.04, paddingVertical: height * 0.03}} source={rightIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{backgroundColor:'#9F9F9F'}}> <View style={{backgroundColor:'#9F9F9F', position: 'absolute'}}/>
<View style={styles.screenA}> <View style={styles.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => ( {NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle} <TouchableHighlight style={ keywordsList.find((element) => element === item.name) ? styles.selectedKeywordStyle : styles.buttonStyle}
...@@ -567,7 +567,6 @@ class Listen extends React.Component { ...@@ -567,7 +567,6 @@ class Listen extends React.Component {
</TouchableHighlight> </TouchableHighlight>
))} ))}
</View> </View>
</View>
</View> </View>
<View style={styles.screen}> <View style={styles.screen}>
......
screens/metronome.js
View file @ 569d01b9
...@@ -43,6 +43,8 @@ const tapIcon = require('../media/img/btn_tap.png'); ...@@ -43,6 +43,8 @@ const tapIcon = require('../media/img/btn_tap.png');
const tsIcon = require('../media/img/btn_t.s..png'); const tsIcon = require('../media/img/btn_t.s..png');
const openIcon = require('../media/img/btn_down.png'); const openIcon = require('../media/img/btn_down.png');
const resetIcon = require('../media/img/btn_reset.png'); const resetIcon = require('../media/img/btn_reset.png');
const rotateLeftIcon = require('../media/img/btn_rotateleft.png');
const rotateRightIcon = require('../media/img/btn_rotateright.png');
const musicIcon = require('../media/img/icon_4thnote_black.png'); const musicIcon = require('../media/img/icon_4thnote_black.png');
const note1 = require('../media/img/icon_wholenote_white.png'); const note1 = require('../media/img/icon_wholenote_white.png');
...@@ -66,6 +68,9 @@ const sound4 = require('../media/sound/sound4.wav'); ...@@ -66,6 +68,9 @@ const sound4 = require('../media/sound/sound4.wav');
const sound5 = require('../media/sound/sound5.wav'); const sound5 = require('../media/sound/sound5.wav');
const nosound = require('../media/sound/nosound.mp3'); const nosound = require('../media/sound/nosound.mp3');
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
const barTempo = [ const barTempo = [
{name :1,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]}, {name :1,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]},
{name :2,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]}, {name :2,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]},
...@@ -161,18 +166,23 @@ class MetronomeSkill extends React.Component { ...@@ -161,18 +166,23 @@ class MetronomeSkill extends React.Component {
color:'black', color:'black',
tempoBar: barTempo, tempoBar: barTempo,
noteimage: note33, noteimage: note33,
pHorizontal: 0.003,
}; };
} }
homeExit = async () => { homeExit = async () => {
this.props.navigation.navigate('1'); this.props.navigation.navigate('1');
this.stopPlay(); // this.stopPlay();
this.setState({
playing: false,
});
}; };
backAction = () => { backAction = () => {
this.props.navigation.navigate('1'); this.props.navigation.navigate('1');
Orientation.lockToPortrait(); this.setState({
this.stopPlay(); playing: false,
});
}; };
componentDidMount() { componentDidMount() {
...@@ -214,14 +224,14 @@ class MetronomeSkill extends React.Component { ...@@ -214,14 +224,14 @@ class MetronomeSkill extends React.Component {
beatDown = async () => { beatDown = async () => {
let index = -1; let index = -1;
if (this.state.beat === 1) { if (this.state.beat === 1) {
this.setState({beat: 1}); this.setState({beat: 1, pHorizontal: 0.02});
if ((index = this.state.tempoBar.map(item => item.name).indexOf(this.state.beat - 1) !== -1)) { if ((index = this.state.tempoBar.map(item => item.name).indexOf(this.state.beat - 1) !== -1)) {
this.state.tempoBar.splice(-index, 1); this.state.tempoBar.splice(-index, 1);
miniBar.splice(-index, 1); miniBar.splice(-index, 1);
} }
} }
else { else {
this.setState({beat: this.state.beat - 1}); this.setState({beat: this.state.beat - 1, pHorizontal: 0.003 + 0.0004});
// find = {name: this.state.beat - 1}; // find = {name: this.state.beat - 1};
if ((index = this.state.tempoBar.map(item => item.name).indexOf(this.state.beat) !== -1)) { if ((index = this.state.tempoBar.map(item => item.name).indexOf(this.state.beat) !== -1)) {
this.state.tempoBar.splice(-index, 1); this.state.tempoBar.splice(-index, 1);
...@@ -235,9 +245,10 @@ class MetronomeSkill extends React.Component { ...@@ -235,9 +245,10 @@ class MetronomeSkill extends React.Component {
this.setState({beat: 16}); this.setState({beat: 16});
} }
else { else {
this.setState({beat: this.state.beat + 1}); this.setState({beat: this.state.beat + 1, pHorizontal: 0.003 - 0.0004});
this.state.tempoBar.push({name :this.state.beat + 1,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]}); this.state.tempoBar.push({name :this.state.beat + 1,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]});
miniBar.push({image:this.state.image}); miniBar.push({image:this.state.image});
console.log('mini Bar :',miniBar.length);
} }
}; };
...@@ -851,227 +862,262 @@ getRotationAnimation = () => { ...@@ -851,227 +862,262 @@ getRotationAnimation = () => {
} }
} }
showSetting(){
if (this.state.showSet === true){
render() { return (
var imgSource = this.state.showImg ? playIcon : stopIcon; <Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{backgroundColor: '#FFFBF0',marginTop:'105%',height:'50%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
{/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{backgroundColor: '#FFFBF0',marginTop:'100%',height:'50%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
<SafeAreaView> <SafeAreaView>
<View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}> <View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}>
<TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showSet: false})}> <TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showSet: false})}>
<Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity> <Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity>
<Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:80, fontFamily:'Gilroy-Bold', lineHeight:25}}>Setting</Text> <Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:80, fontFamily:'Gilroy-Bold', lineHeight:25}}>Setting</Text>
</View> </View>
<View style={{backgroundColor:'#EFEFEF', borderRadius:24, marginHorizontal:25, marginTop:'2%'}}> <View style={{backgroundColor:'#EFEFEF', borderRadius:24, marginHorizontal:25, marginTop:'2%'}}>
<Text style={{fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#3B3A39', paddingVertical:13, paddingHorizontal:25}}>Tips: This setting is to change different tones and switch visual block</Text> <Text style={{fontFamily:'Gilroy-Light', fontSize:12, lineHeight:16, color:'#3B3A39', paddingVertical:13, paddingHorizontal:25}}>Tips: This setting is to change different tones and switch visual block</Text>
</View> </View>
<View <View
style={{ flexDirection: 'row', style={{ flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
width: config.deviceWidth, width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.04, marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1, marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12}}> marginBottom: config.deviceHeight * 0.12}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.02, height:'20%', marginBottom: 15}}> <View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.02, height:'20%', marginBottom: 15}}>
<Text style={{marginVertical:20,fontFamily:'Gilroy-Light',fontSize:16, lineHeight: 19, color: '#3B3A39'}}>Tone</Text> <Text style={{marginVertical:20,fontFamily:'Gilroy-Light',fontSize:16, lineHeight: 19, color: '#3B3A39'}}>Tone</Text>
<TouchableOpacity style={{marginLeft: 60, marginTop:3,backgroundColor:'#81C9C9', width:'15%', height:'130%',borderRadius:8, alignItems: 'center'}} onPress={this.toneDown}> <TouchableOpacity style={{marginLeft: 60, marginTop:3,backgroundColor:'#81C9C9', width:'15%', height:'130%',borderRadius:8, alignItems: 'center'}} onPress={this.toneDown}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>-</Text> <Text style={{fontSize:25, color:'#FFFBF0'}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<View style={{backgroundColor:'#3D9090', marginLeft:10, marginRight:10, borderRadius:5, height:'180%', width:'25%', alignItems: 'center'}}> <View style={{backgroundColor:'#3D9090', marginLeft:10, marginRight:10, borderRadius:5, height:'180%', width:'25%', alignItems: 'center'}}>
<Text style={{fontSize:20, color:'#FFFBF0',lineHeight:23, fontFamily:'Gilroy-Light', marginLeft:20, marginRight:20, paddingVertical:12}}>{this.state.toneSound}</Text> <Text style={{fontSize:20, color:'#FFFBF0',lineHeight:23, fontFamily:'Gilroy-Light', marginLeft:20, marginRight:20, paddingVertical:12}}>{this.state.toneSound}</Text>
</View> </View>
<TouchableOpacity style={{backgroundColor:'#81C9C9', marginTop:3, width:'15%', height:'130%',borderRadius:8, alignItems: 'center'}} onPress={this.toneUp}> <TouchableOpacity style={{backgroundColor:'#81C9C9', marginTop:3, width:'15%', height:'130%',borderRadius:8, alignItems: 'center'}} onPress={this.toneUp}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>+</Text> <Text style={{fontSize:25, color:'#FFFBF0'}}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06, height:'20%', marginTop: config.deviceHeight * 0.06}}> <View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06, height:'20%', marginTop: config.deviceHeight * 0.06}}>
<Text style={{fontSize:16, marginRight:10, fontFamily:'Gilroy-Light'}}>Visual Block</Text> <Text style={{fontSize:16, marginRight:10, fontFamily:'Gilroy-Light'}}>Visual Block</Text>
<View style={{width:config.deviceWidth * 0.55}}> <View style={{width:config.deviceWidth * 0.55}}>
<Switch <Switch
trackColor={{ false: '#BDBDBD', true: '#BDBDBD' }} trackColor={{ false: '#BDBDBD', true: '#BDBDBD' }}
thumbColor={this.state.isEnabled ? '#3CBA54' : '#DB3236'} thumbColor={this.state.isEnabled ? '#3CBA54' : '#DB3236'}
onValueChange={this.toggleSwitch} onValueChange={this.toggleSwitch}
value={this.state.isEnabled} value={this.state.isEnabled}
/> />
</View> </View>
</View> </View>
</View> </View>
</SafeAreaView> </SafeAreaView>
</View> </View>
</Modal> </Modal>
);
}
{/* Modal 2*/} else {
<Modal transparent={true} visible={this.state.showList} animationType="none"> return null;
}
}
showList(){
if (this.state.showList === true){
return (
<Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{backgroundColor: '#FFFBF0',marginTop:'45%',height:'100%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}> <View style={{backgroundColor: '#FFFBF0',marginTop:'45%',height:'100%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
<SafeAreaView> <SafeAreaView>
<View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}> <View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}>
<TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showList: false})}> <TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showList: false})}>
<Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity> <Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity>
<Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:65, fontFamily:'Gilroy-Bold', lineHeight:25}}>Music List</Text> <Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:65, fontFamily:'Gilroy-Bold', lineHeight:25}}>Music List</Text>
</View> </View>
<ScrollView> <ScrollView>
<View style={{ <View style={{
marginBottom: config.deviceHeight * 0.12, marginBottom: config.deviceHeight * 0.12,
}}> }}>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.money()}> <TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.money()}>
<View style={{flexDirection : 'row', marginTop:5}}> <View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row', width:'25%'}}> <View style={{flexDirection: 'row', width:'25%'}}>
<Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={musicIcon}/> <Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={musicIcon}/>
<Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>126</Text> <Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>126</Text>
</View> </View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>7/4</Text> <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>7/4</Text>
<Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Money - Pink Floyd</Text></View> <Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Money - Pink Floyd</Text></View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.jude()}> <TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.jude()}>
<View style={{flexDirection : 'row',marginTop:5}}> <View style={{flexDirection : 'row',marginTop:5}}>
<View style={{flexDirection: 'row',width:'25%'}}> <View style={{flexDirection: 'row',width:'25%'}}>
<Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={musicIcon}/> <Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={musicIcon}/>
<Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>74</Text> <Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>74</Text>
</View> </View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16,color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>4/4</Text> <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16,color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>4/4</Text>
<Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Hey Jude - Beatles</Text></View> <Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Hey Jude - Beatles</Text></View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.cajon()}> <TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.cajon()}>
<View style={{flexDirection : 'row', marginTop:5}}> <View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row',width:'25%'}}> <View style={{flexDirection: 'row',width:'25%'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={musicIcon}/> <Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={musicIcon}/>
<Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>300</Text> <Text style={{fontSize:24, color:'#3B3A39', marginTop:5, fontFamily:'Gilroy-Bold'}}>300</Text>
</View> </View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16,color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>8/4</Text> <View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:16,color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>8/4</Text>
<Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Cajon Rhythm</Text></View> <Text style={{fontSize:16, color:'#3B3A39', fontFamily:'Gilroy-Bold'}}>Cajon Rhythm</Text></View>
</View> </View>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
</View> </View>
</Modal> </Modal>
);
{/* Modal 3*/} }
<Modal transparent={true} visible={this.state.showNotes} animationType="none"> else {
return null;
}
}
showBeatNotes(){
if (this.state.showNotes === true){
return (
<Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{backgroundColor: '#FFFBF0',marginTop:'60%',height:'80%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}> <View style={{backgroundColor: '#FFFBF0',marginTop:'60%',height:'80%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
<SafeAreaView> <SafeAreaView>
<View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}> <View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}>
<TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showNotes: false})}> <TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showNotes: false})}>
<Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity> <Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity>
<Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:80, fontFamily:'Gilroy-Bold', lineHeight:25}}>Set T.S.</Text> <Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:80, fontFamily:'Gilroy-Bold', lineHeight:25}}>Set T.S.</Text>
</View> </View>
<View style={{backgroundColor:'#EFEFEF', borderRadius:24, marginHorizontal:20, marginTop:'2%'}}> <View style={{backgroundColor:'#EFEFEF', borderRadius:24, marginHorizontal:20, marginTop:'2%'}}>
<Text style={{fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#3B3A39', marginTop:15, textAlign: 'center'}}>Tips:</Text> <Text style={{fontFamily:'Gilroy-Light', fontSize:12, lineHeight:16, color:'#3B3A39', marginTop:15, textAlign: 'center'}}>Tips:</Text>
<Text style={{fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#3B3A39', paddingHorizontal:20}}>4/4 : Number of beats per measure</Text> <Text style={{fontFamily:'Gilroy-Light', fontSize:12, lineHeight:16, color:'#3B3A39', paddingHorizontal:20}}>4/4 : Number of beats per measure</Text>
<Text style={{fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#3B3A39', marginBottom:15,paddingHorizontal:20}}>4/4 : The type of note that gets the beat</Text> <Text style={{fontFamily:'Gilroy-Light', fontSize:12, lineHeight:16, color:'#3B3A39', marginBottom:15,paddingHorizontal:20}}>4/4 : The type of note that gets the beat</Text>
</View> </View>
<View style={{alignItems:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.88,height: config.deviceHeight * 0.15,marginLeft: config.deviceWidth * 0.03,marginRight: config.deviceWidth * 0.02}}> <View style={{alignItems:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.88,height: config.deviceHeight * 0.15,marginLeft: config.deviceWidth * 0.03,marginRight: config.deviceWidth * 0.02}}>
<Text style={{color:'#3B3A39',fontFamily:'Gilroy-Light', lineHeight:19, fontSize:16, marginLeft:140, marginTop: 10,marginBottom:5, textAlign: 'center'}}>Accent</Text> <Text style={{color:'#3B3A39',fontFamily:'Gilroy-Light', lineHeight:19, fontSize:16, marginLeft:140, marginTop: 5,marginBottom:5, textAlign: 'center'}}>Accent</Text>
<View style={{marginHorizontal:10,borderRadius:12,backgroundColor:'#3D9090',flexDirection: 'row',flexWrap: 'wrap', height:'50%', width:'100%'}}> <View style={{marginHorizontal:9,borderRadius:12,backgroundColor:'#3D9090',flexDirection: 'row', flexWrap: 'wrap',height:'70%', width:'100%'}}>
{miniBar.map((item, id) => ( {miniBar.map((item, id) => (
<View key={id} style={{paddingVertical:15, paddingHorizontal:15}}> <View key={id} style={{paddingVertical:5, paddingHorizontal:8}}>
<Image style={{height:25, width:20, padding:5}} source={item.image}/> <Image style={{height:25, width:20}} source={item.image}/>
</View> </View>
))} ))}
</View> </View>
</View> </View>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.88,height: config.deviceHeight * 0.15,marginBottom: config.deviceHeight * 0.01, alignContent: 'center'}}> <View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.88,height: config.deviceHeight * 0.13,marginBottom: config.deviceHeight * 0.01, alignContent: 'center'}}>
<Text style={{color:'#3B3A39',fontFamily:'Gilroy-Light', lineHeight:19, fontSize:16, marginLeft:140, marginTop: 5,marginBottom:5, textAlign: 'center'}}>T.S.</Text> <Text style={{color:'#3B3A39',fontFamily:'Gilroy-Light', lineHeight:19, fontSize:16, marginLeft:120, marginTop: 5,marginBottom:5, textAlign: 'center'}}>T.S.</Text>
<View style={{marginLeft:140,borderRadius:8,backgroundColor:'#3D9090',flexDirection: 'row',flexWrap: 'wrap', height:'50%', width:'25%'}}> <View style={{marginLeft:122,borderRadius:8,backgroundColor:'#3D9090',flexDirection: 'row',flexWrap: 'wrap', height:'50%', width:'35%'}}>
<Text style={{fontFamily:'Gilroy-Light', lineHeight:23, textAlign: 'center', color: '#FFFBF0', fontSize:20,paddingVertical:15, paddingHorizontal:20}}>{this.state.beat}/{this.state.note}</Text> <Text style={{fontFamily:'Gilroy-Light', lineHeight:23, textAlign: 'center', color: '#FFFBF0', fontSize:20,paddingVertical:11, paddingHorizontal:25}}>{this.state.beat}/{this.state.note}</Text>
</View> </View>
</View> </View>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.025,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.12,height:'40%'}}> <View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.025,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.12,height:'40%'}}>
<View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.4,marginLeft: config.deviceWidth * 0.03,marginRight: config.deviceWidth * 0.04,marginBottom: config.deviceHeight * 0.02}}> <View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.4,marginLeft: config.deviceWidth * 0.03,marginRight: config.deviceWidth * 0.04,marginBottom: config.deviceHeight * 0.02}}>
<ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.25}}> <ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.26}}>
<Text style={{fontSize:16, lineHeight:19, color:'#3B3A39', fontFamily:'Gilroy-Light',marginLeft:27, marginRight:20}}>Beat</Text> <Text style={{fontSize:16, lineHeight:19, color:'#3B3A39', fontFamily:'Gilroy-Light',marginLeft:27, marginRight:20}}>Beat</Text>
</ImageBackground> </ImageBackground>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:15}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:15}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginRight:15}} onPress={this.beatDown}> <TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginRight:15}} onPress={this.beatDown}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>-</Text> <Text style={{fontSize:25, color:'#FFFBF0'}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginLeft:15}} onPress={this.beatUp}> <TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginLeft:15}} onPress={this.beatUp}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>+</Text> <Text style={{fontSize:25, color:'#FFFBF0'}}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.4,marginRight: config.deviceWidth * 0.02,marginBottom: config.deviceHeight * 0.02}}> <View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.4,marginRight: config.deviceWidth * 0.02,marginBottom: config.deviceHeight * 0.02}}>
<ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.25}}> <ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.26}}>
<Text style={{fontSize:16, lineHeight:19, color:'#3B3A39', fontFamily:'Gilroy-Light', marginLeft:27, marginRight:20}}>Note</Text> <Text style={{fontSize:16, lineHeight:19, color:'#3B3A39', fontFamily:'Gilroy-Light', marginLeft:27, marginRight:20}}>Note</Text>
</ImageBackground> </ImageBackground>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:20}}> <View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:20}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginRight:15}} onPress={this.noteDown}> <TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginRight:15}} onPress={this.noteDown}>
<Text style={{color:'#FFFBF0', fontSize:25}}>-</Text> <Text style={{color:'#FFFBF0', fontSize:25}}>-</Text>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginLeft:15}} onPress={this.noteUp}> <TouchableOpacity style={{backgroundColor:'#81C9C9', width:'35%', height:'100%',borderRadius:8, alignItems: 'center', marginLeft:15}} onPress={this.noteUp}>
<Text style={{color:'#FFFBF0', fontSize:25}}>+</Text> <Text style={{color:'#FFFBF0', fontSize:25}}>+</Text>
</TouchableOpacity> </TouchableOpacity>
</View>
</View>
</View> </View>
</View> </SafeAreaView>
</View>
</SafeAreaView>
</View> </View>
</Modal> </Modal>
);
{/* Modal 4*/} }
<Modal transparent={true} visible={this.state.showkeypad} animationType="none"> else {
return null;
}
}
showKeypad(){
if (this.state.showkeypad === true){
return (
<Modal transparent={true} visible={this.state.showkeypad} animationType="none">
<View style={{backgroundColor: '#FFFBF0',marginTop:'45%',height:'100%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}> <View style={{backgroundColor: '#FFFBF0',marginTop:'45%',height:'100%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
<SafeAreaView> <SafeAreaView>
<View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}> <View style={{backgroundColor:'#FCF4DD',alignItems: 'center', borderTopRightRadius: 24, borderTopLeftRadius: 24, flexDirection: 'row'}}>
<TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showkeypad: false})}> <TouchableOpacity style={{marginLeft:10, height:55, width:55}} onPress={() => this.setState({showkeypad: false})}>
<Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity> <Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity>
<Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:65, fontFamily:'Gilroy-Bold', lineHeight:25}}>Set Tempo</Text> <Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:65, fontFamily:'Gilroy-Bold', lineHeight:25}}>Set Tempo</Text>
<TouchableOpacity style={{height:55, width:55}} onPress={() => this.setState({tempoText: 0})}> <TouchableOpacity style={{height:55, width:55}} onPress={() => this.setState({tempoText: 0})}>
<Image style={{height:50, width:50, padding:15}} source={resetIcon}/></TouchableOpacity> <Image style={{height:50, width:50, padding:15}} source={resetIcon}/></TouchableOpacity>
</View> </View>
<View style={{backgroundColor:'#3D9090', borderRadius:8, marginTop:'5%',alignItems: 'center', width:'91%', height:'8%', marginHorizontal:17}}> <View style={{backgroundColor:'#3D9090', borderRadius:8, marginTop:'5%',alignItems: 'center', width:'91%', height:'8%', marginHorizontal:17}}>
<Text style={{fontSize:24, fontFamily:'Gilroy-Bold', lineHeight:30, paddingVertical:13, color:'#FFFBF0'}} maxLength={3}>{this.state.tempoText}</Text> <Text style={{fontSize:24, fontFamily:'Gilroy-Bold', lineHeight:30, paddingVertical:13, color:'#FFFBF0'}} maxLength={3}>{this.state.tempoText}</Text>
</View> </View>
<View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'3.5%', marginHorizontal:16, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'3.5%', marginHorizontal:16, justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(7)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>7</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(7)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>7</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(8)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>8</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(8)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>8</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(9)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>9</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(9)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>9</Text></TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16,justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16,justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center',marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(4)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>4</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center',marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(4)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>4</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(5)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>5</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(5)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>5</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(6)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>6</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(6)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>6</Text></TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16, justifyContent: 'space-between'}}> <View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16, justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(1)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>1</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(1)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>1</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(2)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>2</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(2)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>2</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(3)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>3</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(3)}><Text style={{color:'#FFFBF0',fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>3</Text></TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16,justifyContent: 'center'}}> <View style={{flexDirection: 'row', marginBottom:'2%',marginTop:'2%', marginHorizontal:16,justifyContent: 'center'}}>
<TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(0)}><Text style={{color:'#FFFBF0', fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>0</Text></TouchableOpacity> <TouchableOpacity style={{backgroundColor:'#81C9C9', height:'100%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempoText(0)}><Text style={{color:'#FFFBF0', fontSize:20, fontFamily:'Gilroy-Bold', lineHeight:25, paddingVertical:15, paddingHorizontal:15}}>0</Text></TouchableOpacity>
</View> </View>
<View style={{marginHorizontal:16, marginVertical:8}}> <View style={{marginHorizontal:16, marginVertical:8}}>
<TouchableOpacity style={{backgroundColor:'#EF476F', height:'30%', width:'98%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempo(this.state.tempoText)}> <TouchableOpacity style={{backgroundColor:'#EF476F', height:'30%', width:'98%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:8}} onPress={() => this.setTempo(this.state.tempoText)}>
<Text style={{paddingVertical:18,fontSize:16, fontFamily:'Gilroy-Bold', lineHeight:20, color:'#FFFBF0'}}>Set</Text></TouchableOpacity> <Text style={{paddingVertical:18,fontSize:16, fontFamily:'Gilroy-Bold', lineHeight:20, color:'#FFFBF0'}}>Set</Text></TouchableOpacity>
</View> </View>
</SafeAreaView> </SafeAreaView>
</View> </View>
</Modal> </Modal>
);
}
else {
return null;
}
}
render() {
var imgSource = this.state.showImg ? playIcon : stopIcon;
return (
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
{this.showSetting()}
{this.showList()}
{this.showBeatNotes()}
{this.showKeypad()}
<StatusBar hidden />
<SafeAreaView> <SafeAreaView>
<View style={{height: '70%',marginTop:50}}> <View style={styles.viewTitle}>
<TouchableOpacity style={{marginHorizontal:width * 0.002}} onPress={() => this.backAction()}>
<Image style={styles.closeIcon} source={closeIcon} />
</TouchableOpacity>
<Text style={styles.textTitle}>Metronome</Text>
</View>
<View style={{height: '70%'}}>
<View style={{height:'60%', width:'100%'}}> <View style={{height:'60%', width:'100%'}}>
<View style={{alignItems:'center'}}> <View style={{alignItems:'center'}}>
<View style={{backgroundColor:'white', height:'95%', width:'95%', marginLeft:10, marginRight:10, marginTop:10, borderRadius:10}}> <View style={{backgroundColor:'white', height:'95%', width:'95%', marginLeft:10, marginRight:10, marginTop:10, borderRadius:10}}>
...@@ -1094,7 +1140,7 @@ getRotationAnimation = () => { ...@@ -1094,7 +1140,7 @@ getRotationAnimation = () => {
</View> </View>
<View> <View>
<TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showkeypad: true})}> <TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showkeypad: true})}>
<Image style={{height:20, width:20}} source={openIcon}/> <Image style={{height:20, width:20, marginTop:'5%'}} source={openIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{width:'25%', alignItems: 'center'}}> <View style={{width:'25%', alignItems: 'center'}}>
...@@ -1102,7 +1148,7 @@ getRotationAnimation = () => { ...@@ -1102,7 +1148,7 @@ getRotationAnimation = () => {
</View> </View>
<View> <View>
<TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showNotes: true})}> <TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showNotes: true})}>
<Image style={{height:20, width:20}} source={openIcon}/> <Image style={{height:20, width:20, marginTop:'5%'}} source={openIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ marginLeft:'5%',width:'10%', alignItems: 'center'}}> <View style={{ marginLeft:'5%',width:'10%', alignItems: 'center'}}>
...@@ -1110,7 +1156,7 @@ getRotationAnimation = () => { ...@@ -1110,7 +1156,7 @@ getRotationAnimation = () => {
</View> </View>
<View> <View>
<TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showNotes: true})}> <TouchableOpacity style={{marginTop:5,backgroundColor:'#FFC107', borderRadius:8, width:24, height:24}} onPress={() => this.setState({showNotes: true})}>
<Image style={{height:20, width:20}} source={openIcon}/> <Image style={{height:20, width:20,marginTop:'5%'}} source={openIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
...@@ -1122,7 +1168,7 @@ getRotationAnimation = () => { ...@@ -1122,7 +1168,7 @@ getRotationAnimation = () => {
} }
onPress={() => this.changeSound(item)}> onPress={() => this.changeSound(item)}>
{item.s.map((it, i) => ( {item.s.map((it, i) => (
<View key={i} style={{marginTop:it.top, marginBottom:1.5, marginLeft:1, marginRight:1,flexDirection: 'row', backgroundColor:item.active ? item.color : this.state.color,width: config.deviceWidth * 0.45 / this.state.tempoBar.length, height:this.state.miniBar / 3}}/> <View key={i} style={{marginTop:it.top, marginBottom:1.5, marginHorizontal: width * this.state.pHorizontal,flexDirection: 'row', backgroundColor:item.active ? item.color : this.state.color,width: config.deviceWidth * 0.45 / this.state.tempoBar.length, height:this.state.miniBar / 3}}/>
))} ))}
</TouchableOpacity> </TouchableOpacity>
))} ))}
...@@ -1132,19 +1178,20 @@ getRotationAnimation = () => { ...@@ -1132,19 +1178,20 @@ getRotationAnimation = () => {
</View> </View>
</View> </View>
<View style={{backgroundColor: '#81C9C9',height: '120%', width:'100%'}}> <View style={{backgroundColor: '#81C9C9',height: '120%', width:'100%'}}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}> <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.015}}>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'15%', height:'125%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.6, borderRadius:8}} onPress={() => this.setState({showSet: true})}> <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'17%', height:'100%', marginLeft : config.deviceWidth * 0.025, borderRadius:8}} onPress={() => this.setState({showSet: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={settingsIcon}/></TouchableOpacity> <Image style={{height:60, width:60}} source={settingsIcon}/></TouchableOpacity>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'15%', height:'125%',borderRadius:8}} onPress={() => this.setState({showList: true})}> <Image style={{height:40, width:40, marginHorizontal: width * 0.25, marginTop:'6%'}} source={rotateLeftIcon}/>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/> <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'17%', height:'100%',borderRadius:8}} onPress={() => this.setState({showList: true})}>
<Image style={{height:60, width:60}} source={listIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
<View style={{ alignItems:'center'}}> <View style={{ alignItems:'center'}}>
<Animated.Image <Animated.Image
source={tempoIcon} source={tempoIcon}
style={{ style={{
height:320, height:height * 0.426,
width:310, width:width * 0.86,
position: 'absolute', position: 'absolute',
transform: [ transform: [
this.getRotationAnimation(), this.getRotationAnimation(),
...@@ -1157,12 +1204,13 @@ getRotationAnimation = () => { ...@@ -1157,12 +1204,13 @@ getRotationAnimation = () => {
<TouchableOpacity style={{position: 'absolute',top:100}} onPress={() => this.stopPlay()} ><Image style={{height:120, width:120}} source={imgSource}/></TouchableOpacity> <TouchableOpacity style={{position: 'absolute',top:100}} onPress={() => this.stopPlay()} ><Image style={{height:120, width:120}} source={imgSource}/></TouchableOpacity>
</View> </View>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}> <View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.42}}>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'20%', height:'120%', marginLeft : config.deviceWidth * 0.05, marginRight : config.deviceWidth * 0.51, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}> <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'20%', height:'92%', marginLeft : config.deviceWidth * 0.025, borderRadius:8,alignItems: 'center'}} onPress={() => this.setState({showNotes: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={tsIcon}/> <Image style={{height:65, width:65, alignItems: 'center', paddingHorizontal: width * 0.02}} source={tsIcon}/>
</TouchableOpacity> </TouchableOpacity>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}> <Image style={{height:40, width:40, marginHorizontal: width * 0.22, marginTop:'5%'}} source={rotateRightIcon}/>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={tapIcon}/> <TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'20%', height:'90%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}>
<Image style={{height:65, width:65, alignItems: 'center', paddingHorizontal: width * 0.02}} source={tapIcon}/>
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
......
style/styleMetronome.js
View file @ 569d01b9
...@@ -6,12 +6,41 @@ const config = { ...@@ -6,12 +6,41 @@ const config = {
deviceHeight: Dimensions.get('window').height, deviceHeight: Dimensions.get('window').height,
}; };
const height = Dimensions.get('window').height;
const width = Dimensions.get('window').width;
export default StyleSheet.create({ export default StyleSheet.create({
imagebackground: {
width: '100%', viewTitle: {
height: '100%', flexDirection: 'row',
width:width,
height: height * 0.06,
},
textTitle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginLeft: width * 0.17,
paddingVertical: height * 0.012,
},
closeIcon: {
height: 50,
width: 50,
padding:10,
}, },
modal1:{ modal1:{
backgroundColor: '#545252', backgroundColor: '#545252',
marginTop:296, marginTop:296,
......
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