Skip to content

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

update UI

parent fc3d8b2a
Hide whitespace changes
Inline Side-by-side
Showing with 693 additions and 402 deletions
.vscode/settings.json
View file @ c73fb1a0
{
"java.configuration.updateBuildConfiguration": "automatic",
"xd.globalEditor": true,
"xd.lastPackage": "d:\\RNFolder\\Test\\PianoApp\\style\\Design-app"
"xd.lastPackage": "/d:/RNFolder/Test/PianoApp/style/Design-app"
}
\ No newline at end of file
App.js
View file @ c73fb1a0
/* eslint-disable react-native/no-inline-styles */
import React from 'react';
import {Image} from 'react-native';
import {Image, Dimensions} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {Icon} from 'react-native-elements';
......@@ -15,79 +15,87 @@ import Home from './screens/home';
import Quiz from './screens/quiz';
import MetronomeSkill from './screens/metronome';
import Orientation from 'react-native-orientation';
import {createMaterialTopTabNavigator} from '@react-navigation/material-top-tabs';
const Stack = createStackNavigator();
const Tab = createMaterialBottomTabNavigator();
const TabTop = createMaterialTopTabNavigator();
function LogBook() {
return (
<Tab.Navigator
activeColor="white"
inactiveColor="black"
barStyle={{backgroundColor: '#BDBDBD', fontSize: 10}}>
<Tab.Screen
<TabTop.Navigator
tabBarOptions={{
indicatorStyle: {
backgroundColor: 'transparent',
},
labelStyle: {
fontSize: 14,
fontFamily: 'Gilroy-Bold',
},
style: {backgroundColor: '#81C9C9'},
tabStyle: {
marginTop: Dimensions.get('window').height * 0.08,
marginBottom: Dimensions.get('window').height * 0.015,
marginHorizontal: Dimensions.get('window').width * 0.07,
width: '120%',
},
activeTintColor: '#F7F7F7',
inactiveTintColor: '#3B3A39',
}}>
<TabTop.Screen
name="Scale"
component={LogBookScale}
options={{
tabBarLabel: 'Scale',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 20, width: 30}}
source={require('./media/img/1piano.png')}
/>
),
}}
/>
<Tab.Screen
<TabTop.Screen
name="Listen Scale"
component={LogBookListen}
options={{
tabBarLabel: 'Listen Skill',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 23, width: 30}}
source={require('./media/img/listening.png')}
/>
),
}}
/>
</Tab.Navigator>
</TabTop.Navigator>
);
}
function Settings() {
return (
<Tab.Navigator
activeColor="white"
inactiveColor="black"
barStyle={{backgroundColor: '#BDBDBD', fontSize: 10}}>
<Tab.Screen
<TabTop.Navigator
tabBarOptions={{
indicatorStyle: {
backgroundColor: 'transparent',
},
labelStyle: {
fontSize: 14,
fontFamily: 'Gilroy-Bold',
},
style: {backgroundColor: '#81C9C9'},
tabStyle: {
marginTop: Dimensions.get('window').height * 0.08,
marginBottom: Dimensions.get('window').height * 0.015,
marginHorizontal: Dimensions.get('window').width * 0.07,
width: '120%',
},
activeTintColor: '#F7F7F7',
inactiveTintColor: '#3B3A39',
}}>
<TabTop.Screen
name="Scale"
component={SettingsScale}
options={{
tabBarLabel: 'Scale',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 20, width: 30}}
source={require('./media/img/1piano.png')}
/>
),
}}
/>
<Tab.Screen
<TabTop.Screen
name="Listen Scale"
component={SettingsListen}
options={{
tabBarLabel: 'Listen Skill',
tabBarIcon: ({color, size}) => (
<Image
style={{height: 23, width: 30}}
source={require('./media/img/listening.png')}
/>
),
}}
/>
</Tab.Navigator>
</TabTop.Navigator>
);
}
......@@ -177,13 +185,18 @@ class App extends React.PureComponent {
name="4"
component={MetronomeSkill}
options={({navigation}) => ({
title: 'Metronome',
//title: 'C Major',
headerStyle: {
backgroundColor: '#E07EF9',
headerTransparent: true,
headerStyle: {
backgroundColor: '#81C9C9',
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.15,
},
headerTintColor: '#fff',
title: '',
headerTransparent: true,
headerBackImage: () => (
<Icon
name="chevron-left"
......@@ -202,8 +215,17 @@ class App extends React.PureComponent {
name="5"
component={LogBook}
options={{
title: 'Records',
headerTransparent: true,
title: 'Record',
headerTransparent: true,
headerStyle: {
backgroundColor: '#81C9C9',
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.2,
},
headerBackImage: () => (
<Icon
name="chevron-left"
......@@ -218,8 +240,17 @@ class App extends React.PureComponent {
name="6"
component={Settings}
options={{
title: 'Settings ',
headerTransparent: true,
title: 'Setting',
headerTransparent: true,
headerStyle: {
backgroundColor: '#81C9C9',
},
headerTitleStyle: {
fontFamily: 'Gilroy-Bold',
fontSize: 20,
lineHeight: 25,
marginHorizontal: Dimensions.get('window').width * 0.2,
},
headerBackImage: () => (
<Icon
name="chevron-left"
......
android/app/src/main/java/com/pianoapp/MainApplication.java
View file @ c73fb1a0
......@@ -4,6 +4,9 @@ import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.reactnativecommunity.art.ARTPackage;
//import com.reactnativecommunity.art.ARTPackage;
//n com.reactnativecommunity.art.ARTPackage;
//import com.reactlibrary.RNMetronomePackage;
//import com.reactlibrary.RNMetronomePackage;
//import com.reactlibrary.RNMetronomePackage;
......
android/settings.gradle
View file @ c73fb1a0
rootProject.name = 'PianoApp'
include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':@react-native-community_art'
project(':@react-native-community_art').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/art/android')
include ':react-native-metronome'
project(':react-native-metronome').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-metronome/android')
include ':react-native-metronome'
......
ios/Podfile
View file @ c73fb1a0
......@@ -20,6 +20,8 @@ target 'PianoApp' do
pod 'RNMetronome', :path => '../node_modules/react-native-metronome'
pod 'ReactNativeART', :path => '../node_modules/@react-native-community/art'
target 'PianoAppTests' do
inherit! :complete
# Pods for testing
......
package.json
View file @ c73fb1a0
......@@ -14,10 +14,12 @@
"@emotion/styled": "^11.1.5",
"@miblanchard/react-native-slider": "^1.5.0",
"@react-native-async-storage/async-storage": "^1.13.2",
"@react-native-community/art": "^1.2.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/bottom-tabs": "^5.11.7",
"@react-navigation/drawer": "^5.11.4",
"@react-navigation/material-bottom-tabs": "^5.3.13",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"adobe-spectrum-dsp": "^0.2.0",
......@@ -29,15 +31,18 @@
"react-native-fs": "^2.16.6",
"react-native-gesture-handler": "^1.9.0",
"react-native-grid-list": "^1.1.0",
"react-native-image-progress": "^1.1.1",
"react-native-numeric-input": "^1.8.3",
"react-native-orientation": "^3.1.3",
"react-native-paper": "^4.7.1",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.13.2",
"react-native-safe-area-context": "^3.1.9",
"react-native-screens": "^2.15.0",
"react-native-sound": "^0.11.0",
"react-native-stopwatch-timer": "^0.0.21",
"react-native-super-grid": "^4.0.3",
"react-native-tab-view": "^2.16.0",
"react-native-vector-icons": "^7.1.0",
"react-native-web-swiper": "^2.2.1",
"styled-components": "^5.2.1",
......@@ -57,6 +62,8 @@
"preset": "react-native"
},
"rnpm": {
"assets": ["./assets/fonts"]
}
"assets": [
"./assets/fonts"
]
}
}
screens/home.js
View file @ c73fb1a0
......@@ -48,16 +48,16 @@ class Home extends React.PureComponent {
<Image source={require('../media/img/bg_overlay.png')} style={{width:'100%', height:'100%', resizeMode:'cover', position: 'absolute', marginTop:'40%'}}/>
<View style={{height: 44, flexDirection: 'row', paddingHorizontal:8}}>
<TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('6')} >
<Image source={require('../media/img/btn_settings.png')} style={{width:'100%', height:'100%'}}/>
<TouchableOpacity style={{height: 44,flex:2}} onPress={() => this.props.navigation.navigate('6')} >
<Image source={require('../media/img/btn_settings.png')} style={{width:'100%', height:'100%', padding:5}}/>
</TouchableOpacity>
<View style={{flex:9,justifyContent: 'center', paddingHorizontal:config.deviceWidth * 0.21}}>
<View style={{flex:9,justifyContent: 'center', paddingHorizontal:config.deviceWidth * 0.08}}>
<Text style={{color: '#3B3A39',fontSize: 20,lineHeight:25,fontFamily: 'Gilroy-Bold',textAlign: 'center'}}>Lessons</Text>
</View>
<TouchableOpacity style={{ height: 44,flex:4}} onPress={() => this.props.navigation.navigate('5')}>
<Image source={require('../media/img/btn_history.png')} style={{width:'100%', height:'100%'}}/>
<TouchableOpacity style={{height: 44,flex:2}} onPress={() => this.props.navigation.navigate('5')}>
<Image source={require('../media/img/btn_history.png')} style={{width:'100%', height:'100%', padding:5}}/>
</TouchableOpacity>
</View>
......
screens/listening.js
View file @ c73fb1a0
......@@ -16,6 +16,9 @@ import {
BackHandler,
ScrollView,
Image,
StyleSheet,
Animated,
Easing,
} from 'react-native';
import styles from '../style/styleListen';
import {Stopwatch} from 'react-native-stopwatch-timer';
......@@ -48,14 +51,17 @@ const NOTESWHITE = [{name: 'A0'},{name: 'B0'},
{name: 'C8'},
];
const NOTESBLACK = [{name: 'A#0', left: 0.046},
{name: 'C#1',left: 0.195},{name: 'D#1',left: 0.27},{name: 'F#1',left: 0.42},{name: 'G#1',left: 0.496},{name: 'A#1',left: 0.57},
{name: 'C#2',left: 0.72},{name: 'D#2',left: 0.795},{name: 'F#2',left: 0.945},{name: 'G#2',left: 1.02},{name: 'A#2',left: 1.095},
{name: 'C#3',left: 1.245},{name: 'D#3',left: 1.32},{name: 'F#3',left: 1.47},{name: 'G#3',left: 1.545},{name: 'A#3',left: 1.62},
{name: 'C#4',left: 1.77},{name: 'D#4',left: 1.845},{name: 'F#4',left: 1.995},{name: 'G#4',left: 2.07},{name: 'A#4',left: 2.145},
{name: 'C#5',left: 2.295},{name: 'D#5',left: 2.37},{name: 'F#5',left: 2.52},{name: 'G#5',left: 2.595},{name: 'A#5',left: 2.67},
{name: 'C#6',left: 2.82},{name: 'D#6',left: 2.899},{name: 'F#6',left: 3.045},{name: 'G#6',left: 3.12},{name: 'A#6',left: 3.197},
{name: 'C#7',left: 3.345},{name: 'D#7',left: 3.42},{name: 'F#7',left: 3.57},{name: 'G#7',left: 3.645},{name: 'A#7',left: 3.72},
const NOTESBLACK = [{name: 'A#0', left: 0.053},
{name: 'C#1',left: 0.205},{name: 'D#1',left: 0.283},{name: 'F#1',left: 0.436},{name: 'G#1',left: 0.515},{name: 'A#1',left: 0.59},
{name: 'C#2',left: 0.74},{name: 'D#2',left: 0.82},
{name: 'F#2',left: -0.025},{name: 'G#2',left: 0.054},{name: 'A#2',left: 0.13},
{name: 'C#3',left: 0.283},{name: 'D#3',left: 0.36},{name: 'F#3',left: 0.515},{name: 'G#3',left: 0.59},{name: 'A#3',left: 0.668},
{name: 'C#4',left: 0.82},{name: 'D#4',left: 0.9},
{name: 'F#4',left: 0.05},{name: 'G#4',left: 0.13},{name: 'A#4',left: 0.2},
{name: 'C#5',left: 0.36},{name: 'D#5',left: 0.441},{name: 'F#5',left: 0.596},{name: 'G#5',left: 0.661},{name: 'A#5',left: 0.74},
{name: 'C#6',left: 0.9},
{name: 'D#6',left: -0.025},{name: 'F#6',left: 0.13},{name: 'G#6',left: 0.205},{name: 'A#6',left:0.281},
{name: 'C#7',left: 0.431},{name: 'D#7',left: 0.51},{name: 'F#7',left: 0.665},{name: 'G#7',left: 0.745},{name: 'A#7',left: 0.82},
];
const keywordsList = [];
......@@ -69,8 +75,10 @@ var stime = 0;
var imageN = '';
var indexN = 0;
let scrollYPos = 0;
class Listen extends React.Component {
constructor(props) {
constructor(props) {
super(props);
Sound.setCategory('Playback'); // true = mixWithOthers
this.state = {
......@@ -92,9 +100,28 @@ class Listen extends React.Component {
choose : octavelist,
soundName : '',
keynumber: 0,
screenHeight: Dimensions.get('window').height,
screenWidth: Dimensions.get('window').height,
progressStatus: 0,
};
this.anim = new Animated.Value(0);
}
animate () {
this.anim.setValue(0);
console.log('animated');
Animated.timing(
this.anim,
{
toValue: 1,
//duration: 2000,
duration: 2000,
easing: Easing.linear,
useNativeDriver: false,
}
).start(() => this.animate());
}
toggleKeyword = (keyword) => {
console.log('Press: ' + keyword);
//indexS = Listennotes.findIndex(item=> item.name === keyword);
......@@ -173,7 +200,7 @@ class Listen extends React.Component {
console.log('an error');
throw err;
}
// console.log('success'); //console.log(JSON.stringify(this.state.listN));
}).catch((err)=> {
console.log('error is: ' + err);
});
......@@ -201,18 +228,18 @@ class Listen extends React.Component {
return;
}
// loaded successfully
this.setState({progressStatus: playSound.getDuration() * 800});
playSound.play((success) => {
this.animate();
if (success) {
// console.log('successfully finished playing');
this.setState({showMusic: false});
playSound.release();
} else {
// console.log('playback failed due to audio decoding errors');
playSound.release();
}
});
});
this.setState({progressStatus: 0 });
};
reset = () => {
......@@ -269,6 +296,7 @@ class Listen extends React.Component {
//this.randomSound();
this.displayData1();
this.reset();
console.log(NOTESWHITE.length);
}
componentWillUnmount() {
......@@ -296,18 +324,6 @@ class Listen extends React.Component {
}
/* displayData = async () => {
try {
const value = await AsyncStorage.getItem('@listen_key');
console.log(JSON.parse(value));
console.log(octave.map((octaven) => octaven.nameoctave));
console.log(octave.map((octaven) => octaven.listoctave.map((n) => n.name)));
} catch (error) {
// Error retrieving data
}
};
*/
displayData1 = async () => {
// this.setState({records: []});
try {
......@@ -382,16 +398,48 @@ class Listen extends React.Component {
}
};
scrollToB = () => {
scrollYPos = this.state.screenHeight * 1;
this.scroller.scrollTo({x: scrollYPos, y: 0});
};
scrollToC = () => {
scrollYPos = this.state.screenHeight * 2;
this.scroller.scrollTo({x: scrollYPos, y: 0});
};
scrollToD = () => {
scrollYPos = this.state.screenHeight * 3;
this.scroller.scrollTo({x: scrollYPos, y: 0});
};
scrollToTop = () => {
scrollYPos = this.state.screenHeight * 1;
this.scroller.scrollTo({x: scrollYPos, y: 0});
};
scrollToStart = () => {
this.scroller.scrollTo({x: 0, y: 0});
};
render() {
const movingMargin = this.anim.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, 290, 1],
});
return (
<View style={styles.container}>
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
{/* Play Sound */}
<Modal transparent={true} visible={this.state.showMusic} animationType="slide">
<View style={styles.modalbackground}>
<View style={{flexDirection: 'row',justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#BDBDBD',width:'100%', height:'55%'}}><Text/></TouchableOpacity>
<Animated.Image
style={{
width: this.state.progressStatus + '%',
height: '55%',
backgroundColor: '#3CBA54', position: 'absolute'}} />
</View>
<View style={{alignItems:'center', alignContent:'center', marginTop : Dimensions.get('window').width * 0.15}}>
<Image style={{height:100, width:100,backgroundColor:'white',
borderRadius: 10,
......@@ -472,7 +520,7 @@ class Listen extends React.Component {
</View>
</Modal>
<StatusBar hidden />
<StatusBar hidden />
<View style={styles.c1}>
<View style={styles.cc1}>
<Text style={styles.wrong}>{this.state.wrong}</Text>
......@@ -514,39 +562,168 @@ class Listen extends React.Component {
</View>
</View>
</View>
<View style={{borderWidth:5, borderColor:'black'}}/>
<ScrollView
horizontal={true}
style={{
flexDirection: 'row',
}}
showsHorizontalScrollIndicator={true}>
{NOTESWHITE.map((item,id) => (
<ScrollView style={style.container}
horizontal={true}
scrollEnabled={true}
showsHorizontalScrollIndicator={false}
ref={(scroller) => {this.scroller = scroller;}}>
<View style={style.screen}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={this.scrollToB}>
<View style={{marginLeft:config.deviceHeight * 0.88,width: '15%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</View>
</TouchableOpacity>
</View>
<View style={style.screenA}>
{NOTESWHITE.slice(0, 13).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? styles.selectedKeywordStyle
: styles.buttonStyle
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(0,8).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={this.scrollToStart}>
<View style={{marginRight:config.deviceHeight * 0.78, width: '15%'}}>
<Text style={style.scrollButtonText}> {'<<'}Back</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.scrollToC}>
<View style={{marginRight:config.deviceHeight * 0.8,width: '15%'}}>
<Text style={style.scrollButtonText}>Next {'>>'}</Text>
</View>
</TouchableOpacity>
</View>
<View style={style.screenB}>
{NOTESWHITE.slice(13, 26).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.map((item, id) => (
{NOTESBLACK.slice(8,18).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [styles.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [styles.buttonB1, {marginLeft: config.deviceWidth * item.left}]
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</ScrollView>
</View>
</View>
<View style={style.screen}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={this.scrollToB}>
<View style={{marginRight:config.deviceHeight * 0.78, width: '15%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.scrollToD}>
<View style={{marginRight:config.deviceHeight * 0.8, width: '15%'}}>
<Text style={style.scrollButtonText}>Next{'>>'}</Text>
</View>
</TouchableOpacity>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(26, 39).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(18, 27).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
<View style={style.screen}>
<View style={{flexDirection:'row'}}>
<TouchableOpacity onPress={this.scrollToC}>
<View style={{marginRight:config.deviceHeight * 0.88, width: '15%'}}>
<Text style={style.scrollButtonText}>{'<<'}Back</Text>
</View>
</TouchableOpacity>
</View>
<View style={style.screenC}>
{NOTESWHITE.slice(39, 52).map((item,id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? style.selectedKeywordStyle
: style.buttonStyle
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyle}> {item.name} </Text>
</TouchableHighlight>
))}
{NOTESBLACK.slice(27, 36).map((item, id) => (
<TouchableHighlight
style={
keywordsList.find((element) => element === item.name)
? [style.SbuttonB1, {marginLeft: config.deviceWidth * item.left}]
: [style.buttonB1, {marginLeft: config.deviceWidth * item.left}]
}
onPress={() => this.toggleKeyword(item.name)}
key={id}>
<Text style={styles.textStyleB}>{item.name}</Text>
</TouchableHighlight>
))}
</View>
</View>
</ScrollView>
</ImageBackground>
</View>
);
......@@ -554,3 +731,72 @@ class Listen extends React.Component {
}
export default Listen;
const style = StyleSheet.create({
container: {
height:'20%',
},
screen: {
// backgroundColor: 'yellow',
width: Dimensions.get('window').height,
},
screenA: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#F7CAC9',
flexDirection: 'row',
},
screenB: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#92A8D1',
flexDirection: 'row',
},
screenC: {
borderTopColor:'black',
borderTopWidth:8,
width: Dimensions.get('window').height,
backgroundColor: '#88B04B',
flexDirection: 'row',
},
scrollButtonText: {
padding: 10,
textAlign: 'center',
},
buttonStyle: {
width: Dimensions.get('window').height / 13,
height:'115%',
alignItems: 'center',
backgroundColor: 'white',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: Dimensions.get('window').width / 13,
height:'115%',
alignItems: 'center',
backgroundColor: '#EEA1E1',
borderRightWidth: 1,
borderColor: 'black',
borderBottomWidth: 1,
},
buttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '65%',
width: '5%',
position: 'absolute',
},
SbuttonB1: {
alignItems: 'center',
backgroundColor: 'black',
height: '50%',
marginLeft: config.deviceWidth * 0.048,
width: '5%',
position: 'absolute',
},
});
screens/metronome.js
View file @ c73fb1a0
......@@ -35,9 +35,13 @@ const playIcon = require('../media/img/play.png');
const stopIcon = require('../media/img/stop.png');
const leftIcon = require('../media/img/left.png');
const rightIcon = require('../media/img/right.png');
const settingsIcon = require('../media/img/settings.png');
const listIcon = require('../media/img/list.png');
const settingsIcon = require('../media/img/btn_setting.png');
const listIcon = require('../media/img/btn_musiclist.png');
const tempoIcon = require('../media/img/tempo_control.png');
const closeIcon = require('../media/img/btn_close.png');
const tapIcon = require('../media/img/btn_tap.png');
const tsIcon = require('../media/img/btn_t.s..png');
const openIcon = require('../media/img/btn_down.png');
const note1 = require('../media/img/notea.png');
const note2 = require('../media/img/noteb.png');
......@@ -46,6 +50,12 @@ const note4 = require('../media/img/noted.png');
const note5 = require('../media/img/notee.png');
const note6 = require('../media/img/notef.png');
const note11 = require('../media/img/icon_wholenote_pink.png');
const note22 = require('../media/img/icon_2ndnote_pink.png');
const note33 = require('../media/img/icon_4thnote_pink.png');
const note44 = require('../media/img/icon_8thnote_pink.png');
const note55 = require('../media/img/icon_16thnote_pink.png');
const note66 = require('../media/img/icon_32thnote_pink.png');
const sound1 = require('../media/sound/sound1.wav');
const sound2 = require('../media/sound/sound2.wav');
......@@ -55,10 +65,10 @@ const sound5 = require('../media/sound/sound5.wav');
const nosound = require('../media/sound/nosound.mp3');
const barTempo = [
{name :1,active:true, color: '#406ec1', play:sound1, s:[{id:1}]},
{name :2,active:true, color: '#406ec1', play:sound1, s:[{id:1}]},
{name :3,active:true, color: '#406ec1',play:sound1, s:[{id:1}]},
{name :4,active:true, color: '#406ec1',play:sound1, s:[{id:1}]},
{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 :3,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]},
{name :4,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:40}]},
];
......@@ -146,8 +156,9 @@ class MetronomeSkill extends React.Component {
showkeypad:false,
tempoText: 0,
num : 1,
color:'#DB3236',
color:'black',
tempoBar: barTempo,
noteimage: note33,
};
}
......@@ -178,7 +189,7 @@ class MetronomeSkill extends React.Component {
let index = -1;
if (this.state.tempoBar.length < 4) {
for (var j = this.state.tempoBar.length; j < 4; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#365797', play:sound1, s:[{id:1}]});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#3D9090', play:sound1, s:[{id:1}]});
miniBar.push({image:this.state.image});
}
this.setState({beat: this.state.tempoBar.length});
......@@ -223,7 +234,7 @@ class MetronomeSkill extends React.Component {
}
else {
this.setState({beat: this.state.beat + 1});
this.state.tempoBar.push({name :this.state.beat + 1,active:true, color: '#365797', play:sound1, s:[{id:1}]});
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});
}
};
......@@ -233,25 +244,25 @@ class MetronomeSkill extends React.Component {
noteDown = () => {
if (this.state.note === 1) {
this.setState({note: 1});
this.setState({image: note1});
this.setState({image: note1, noteimage: note11});
miniBar.map((item, id) => (item.image = note1 ));
}
else {
this.setState({note: (this.state.note / 2 )});
if ( this.state.note / 2 === 16) {
this.setState({image: note5});
this.setState({image: note5, noteimage: note55});
miniBar.map((item, id) => (item.image = note5 ));
}
if ( this.state.note / 2 === 8) {
this.setState({image: note4});
this.setState({image: note4, noteimage: note44});
miniBar.map((item, id) => (item.image = note4 ));
}
if ( this.state.note / 2 === 4) {
this.setState({image: note3});
this.setState({image: note3, noteimage: note33});
miniBar.map((item, id) => (item.image = note3));
}
if ( this.state.note / 2 === 2) {
this.setState({image: note2});
this.setState({image: note2, noteimage: note22});
miniBar.map((item, id) => (item.image = note2 ));
}
}
......@@ -260,32 +271,32 @@ class MetronomeSkill extends React.Component {
noteUp = () => {
if (this.state.note >= 32) {
this.setState({note: 32 });
this.setState({image: note6});
this.setState({image: note6, noteimage: note66});
miniBar.map((item, id) => (item.image = note6 ));
}
else if (this.state.note === 1) {
this.setState({note: 1 + 1 });
if ( this.state.note + 1 === 2) {
this.setState({image: note2});
this.setState({image: note2, noteimage: note22});
miniBar.map((item, id) => (item.image = note2 ));
}
}
else {
this.setState({note: this.state.note * 2});
if ( this.state.note * 2 === 32) {
this.setState({image: note6});
this.setState({image: note6, noteimage: note66});
miniBar.map((item, id) => (item.image = note6 ));
}
if ( this.state.note * 2 === 16) {
this.setState({image: note5});
this.setState({image: note5, noteimage: note55});
miniBar.map((item, id) => (item.image = note5));
}
if ( this.state.note * 2 === 8) {
this.setState({image: note4});
this.setState({image: note4, noteimage: note44});
miniBar.map((item, id) => (item.image = note4 ));
}
if ( this.state.note * 2 === 4) {
this.setState({image: note3});
this.setState({image: note3, noteimage: note33});
miniBar.map((item, id) => (item.image = note3 ));
}
}
......@@ -602,23 +613,23 @@ class MetronomeSkill extends React.Component {
let list = barTempo;
let index = list.indexOf(name);
if (list[index].play === sound1) {
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound2, s:[{id:1},{id:2},{id:3}]};
list[index] = {name :index + 1,active:true, color: '#3D9090', play:sound2, s:[{id:1, top:2},{id:2, top:0},{id:3, top:0}]};
console.log('sound2');
}
else if (list[index].play === sound2) {
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound3,s:[{id:1}, {id:2}]};
list[index] = {name :index + 1,active:true, color: '#3D9090', play:sound3,s:[{id:1,top:25}, {id:2, top:0}]};
console.log('sound3');
}
else if (list[index].play === sound3) {
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound4, s:[{id:1}]};
list[index] = {name :index + 1,active:true, color: '#3D9090', play:sound4, s:[{id:1, top:40}]};
console.log('no sound');
}
else if (list[index].play === sound4) {
list[index] = {name :index + 1,active:true, color: '#4885ED', play:nosound, s:[{id:1}]};
list[index] = {name :index + 1,active:true, color: '#3D9090', play:nosound, s:[{id:1, top:40}]};
console.log('no sound');
}
else {
list[index] = {name :index + 1,active:true, color: '#406ec1', play:sound1, s:[{id:1},{id:2},{id:3}]};
list[index] = {name :index + 1,active:true, color: '#3D9090', play:sound1, s:[{id:1, top:2},{id:2, top:0},{id:3, top:0}]};
console.log('sound1');
}
this.setState({tempoBar: list});
......@@ -651,11 +662,11 @@ getRotationAnimation = () => {
this.setState({tempo:126});
this.setState({tempoName:'Allegro'});
this.setState({note:4});
this.setState({image: note3});
this.setState({image: note3, noteimage: note33});
miniBar.map((item, id) => (item.image = note3 ));
if (this.state.tempoBar.length < 7) {
for (var j = this.state.tempoBar.length; j < 7; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#406ec1',play:sound1, s:[{id:1}]});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#3D9090',play:sound1, s:[{id:1, top:40}]});
miniBar.push({image:this.state.image});
}
}
......@@ -674,12 +685,12 @@ getRotationAnimation = () => {
this.setState({tempo:74});
this.setState({tempoName:'Andante'});
this.setState({note:4});
this.setState({image: note3});
this.setState({image: note3, noteimage: note33});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1;
if (this.state.tempoBar.length < 4) {
for (var j = this.state.tempoBar.length; j < 4; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#406ec1',play:sound1, s:[{id:1}]});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active:true, color: '#3D9090',play:sound1, s:[{id:1, top:40}]});
miniBar.push({image:this.state.image});
}
}
......@@ -698,12 +709,12 @@ getRotationAnimation = () => {
this.setState({tempo:300});
this.setState({tempoName:'Prestissimo'});
this.setState({note:4});
this.setState({image: note3});
this.setState({image: note3, noteimage: note33});
miniBar.map((item, id) => (item.image = note3 ));
let index = -1;
if (this.state.tempoBar.length < 8) {
for (var j = this.state.tempoBar.length; j < 8; j++) {
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active :true,color: '#406ec1',play:sound1, s:[{id:1}]});
this.state.tempoBar.push({name :this.state.tempoBar.length + 1, active :true,color: '#3D9090',play:sound1, s:[{id:1, top:40}]});
miniBar.push({image:this.state.image});
}
}
......@@ -821,14 +832,15 @@ getRotationAnimation = () => {
if (this.state.showPendulum){
return (
<View style={{flexDirection: 'row', marginTop:5, marginLeft:13, marginRight:15, justifyContent: 'space-between'}}>
<TouchableOpacity style={{backgroundColor:'#BDBDBD',width:'100%', height:'180%'}}><Text/></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#E2E2E2',width:'100%', height:'180%', borderRadius:8}}><Text/></TouchableOpacity>
<Animated.Image
style={{
marginLeft: this.state.showImg ? 0 : movingMargin,
marginRight:10,
height: '180%',
width: '8%',
backgroundColor: '#3CBA54', position: 'absolute'}} />
borderRadius:8,
backgroundColor: '#3CBB54', position: 'absolute'}} />
</View>
);
}
......@@ -843,43 +855,41 @@ getRotationAnimation = () => {
var imgSource = this.state.showImg ? playIcon : stopIcon;
return (
<View style={{flex: 1}}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<View style={{flex: 1, backgroundColor:'#81C9C9'}}>
{/* Modal 1*/}
{/* Modal 1*/}
<Modal transparent={true} visible={this.state.showSet} animationType="none">
<View style={{ borderColor:'#BDBDBD', borderWidth: 2, backgroundColor: '#4885ED',marginTop:'80%',height:'62%', width:'93%', marginRight:35}}>
<View style={{backgroundColor: '#FFFBF0',marginTop:'100%',height:'50%', width:'100%', borderTopRightRadius: 24, borderTopLeftRadius: 24}}>
<SafeAreaView>
<View style={{alignItems: 'center', backgroundColor:'#BDBDBD', height:'10%'}}><Text style={{ marginTop:4,fontSize:25, color: 'black'}}>Settings</Text>
</View>
<ScrollView>
<View
style={{ flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.05,marginTop: config.deviceHeight * 0.05, height:'20%', marginBottom: 15}}>
<Text style={{fontSize:20, marginRight:85, marginTop:3}}>Tone</Text>
<TouchableOpacity style={{borderColor:'#BDBDBD', borderWidth: 2,backgroundColor:'white', width:'8%', height:'100%',borderRadius:100, alignItems: 'center'}} onPress={this.toneDown}>
<Text style={{fontSize:25, color:'#DB3236'}}>-</Text>
</TouchableOpacity>
<View style={{backgroundColor:'white', marginLeft:10, marginRight:10, borderRadius:5, width:'15%', alignItems: 'center'}}>
<Text style={{fontSize:20, color:'black', marginLeft:20, marginRight:20, marginTop:5}}>{this.state.toneSound}</Text>
</View>
<TouchableOpacity style={{borderColor:'#BDBDBD', borderWidth: 2, backgroundColor:'white', width:'8%', height:'100%',borderRadius:100, alignItems: 'center'}} onPress={this.toneUp}>
<Text style={{fontSize:25, color:'#DB3236'}}>+</Text>
</TouchableOpacity>
</View>
<View style={{borderWidth:2, borderColor:'#BDBDBD', width:'83%'}}/>
<View style={{flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06,marginTop: config.deviceHeight * 0.02, height:'20%', marginBottom: 20}}>
<Text style={{fontSize:20, marginRight:10}}>Visual Block</Text>
<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})}>
<Image style={{height:50, width:50, padding:15}} source={closeIcon}/></TouchableOpacity>
<Text style={{fontSize:20, color:'#3B3A39',paddingVertical:16, paddingHorizontal:100, fontFamily:'Gilroy-Bold', lineHeight:25}}>Setting</Text>
</View>
<View style={{backgroundColor:'#EFEFEF', borderRadius:24, marginHorizontal:35, marginTop:'5%'}}>
<Text style={{fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#3B3A39', paddingVertical:13, paddingHorizontal:16}}>Tips: This setting is to change different tones and switch visual block</Text>
</View>
<View
style={{ flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.04,
marginRight: config.deviceWidth * 0.1,
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}}>
<Text style={{marginHorizontal:10,fontFamily:'Gilroy-Light',fontSize:16, lineHeight: 19, color: '#3B3A39'}}>Tone</Text>
<TouchableOpacity style={{marginLeft: 45, marginTop:3,backgroundColor:'#81C9C9', width:'15%', height:'230%',borderRadius:8, alignItems: 'center'}} onPress={this.toneDown}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>-</Text>
</TouchableOpacity>
<View style={{backgroundColor:'#3D9090', marginLeft:10, marginRight:10, borderRadius:5, height:'255%', 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>
</View>
<TouchableOpacity style={{backgroundColor:'#81C9C9', marginTop:3, width:'15%', height:'230%',borderRadius:8, alignItems: 'center'}} onPress={this.toneUp}>
<Text style={{fontSize:25, color:'#FFFBF0'}}>+</Text>
</TouchableOpacity>
</View>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.06, height:'20%'}}>
<Text style={{marginHorizontal:10,fontSize:16, marginRight:10, fontFamily:'Gilroy-Light'}}>Visual Block</Text>
<Switch
trackColor={{ false: '#BDBDBD', true: '#BDBDBD' }}
thumbColor={this.state.isEnabled ? '#3CBA54' : '#DB3236'}
......@@ -887,168 +897,8 @@ getRotationAnimation = () => {
value={this.state.isEnabled}
/>
</View>
</View>
</ScrollView>
<View style={{alignItems: 'center', height:'30%'}}>
<TouchableOpacity style={{backgroundColor:'#F4C20D', borderColor:'#BDBDBD', width:'15%', height:'20%', marginTop:'5%', borderWidth: 2, borderRadius: 5, alignItems: 'center'}} onPress={() => this.setState({showSet: false})}>
<Text style={{marginTop:2, color:'black'}}>Back</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</Modal>
{/* Modal 2*/}
<Modal transparent={true} visible={this.state.showList} animationType="none">
<View style={{ borderColor:'#BDBDBD',borderWidth: 2, backgroundColor: '#4885ED',marginTop:'80%',height:'80%',width:'93%', marginLeft:25}}>
<SafeAreaView>
<View style={{alignItems: 'center', backgroundColor:'#BDBDBD', marginBottom:15, height:'10%'}}><Text style={{ fontSize:25, color: 'black', marginTop:5}}>List</Text>
</View>
<ScrollView>
<View style={{
marginBottom: config.deviceHeight * 0.12,
}}>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.money()}>
<View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row', width:'25%'}}>
<Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30, color:'#4203c9', marginTop:5}}>126</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18, color:'#4203c9'}}>7/4</Text>
<Text style={{fontSize:18}}>Money - Pink Floyd</Text></View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.jude()}>
<View style={{flexDirection : 'row',marginTop:5}}>
<View style={{flexDirection: 'row',width:'25%'}}>
<Image style={{height:35, width:20, marginTop:8, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30, color:'#4203c9', marginTop:5}}>74</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18,color:'#4203c9'}}>4/4</Text>
<Text style={{fontSize:18}}>Hey Jude - Beatles</Text></View>
</View>
</TouchableOpacity>
<TouchableOpacity style={{marginBottom:5,height:'35%', borderBottomColor:'#BDBDBD', borderBottomWidth:2}} onPress={() => this.cajon()}>
<View style={{flexDirection : 'row', marginTop:5}}>
<View style={{flexDirection: 'row',width:'25%'}}>
<Image style={{height:35, width:20, marginTop:10, marginLeft:8}} source={note3}/>
<Text style={{fontSize:30, color:'#4203c9', marginTop:5}}>300</Text>
</View>
<View style={{flexDirection: 'column', marginLeft:10}}><Text style={{fontSize:18,color:'#4203c9'}}>8/4</Text>
<Text style={{fontSize:18}}>Cajon Rhythm</Text></View>
</View>
</TouchableOpacity>
</View>
</ScrollView>
<View style={{alignItems: 'center', marginTop:2}}>
<TouchableOpacity style={{backgroundColor:'#F4C20D', borderColor:'#BDBDBD', width:'15%', height:'22%', marginTop:'5%', borderWidth: 2, borderRadius: 5, alignItems: 'center'}} onPress={() => this.setState({showList: false})}>
<Text style={{marginTop:2,color:'black'}}>Back</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</Modal>
{/* Modal 3*/}
<Modal transparent={true} visible={this.state.showNotes} animationType="none">
<View style={{ borderColor:'#BDBDBD', borderWidth: 2, backgroundColor: '#4885ED',marginTop:'80%',height:'62%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={{flexDirection: 'row',flexWrap: 'wrap',width: config.deviceWidth,marginLeft: config.deviceWidth * 0.025,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.12,marginTop: config.deviceHeight * 0.05, height:'40%'}}>
<View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.3,marginRight: config.deviceWidth * 0.02,marginBottom: config.deviceHeight * 0.02}}>
<ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.25}}>
<Text style={{fontSize:17, marginLeft:27, marginRight:20}}>Beat</Text>
</ImageBackground>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:5}}>
<TouchableOpacity style={{borderWidth:2, borderColor:'#BDBDBD',backgroundColor:'white', width:'30%', height:'100%',borderRadius:100, alignItems: 'center', marginRight:15}} onPress={this.beatDown}>
<Text style={{fontSize:25, color:'#DB3236'}}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={{borderWidth:2, borderColor:'#BDBDBD',backgroundColor:'white', width:'30%', height:'100%',borderRadius:100, alignItems: 'center', marginLeft:15}} onPress={this.beatUp}>
<Text style={{fontSize:25, color:'#DB3236'}}>+</Text>
</TouchableOpacity>
</View>
</View>
<View style={{backflexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.3,marginRight: config.deviceWidth * 0.02,marginBottom: config.deviceHeight * 0.02}}>
<Text style={{fontSize:17, marginLeft:40, marginRight:20}}>T.S.</Text>
<TouchableOpacity style={{backgroundColor:'white', width:'100%', height:'50%',borderRadius:8, alignItems: 'center', marginTop:5}}>
<Text style={{fontSize:25, color:'black', marginTop:4}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
</View>
<View style={{alignItems:'center', alignContent:'center',flexDirection: 'column',flexWrap: 'wrap',width: config.deviceWidth * 0.3,marginRight: config.deviceWidth * 0.05,marginBottom: config.deviceHeight * 0.02}}>
<ImageBackground source={frame} style={{height:20, width: config.deviceWidth * 0.25}}>
<Text style={{fontSize:17, marginLeft:27, marginRight:20}}>Note</Text>
</ImageBackground>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between',marginTop:5}}>
<TouchableOpacity style={{borderWidth:2, borderColor:'#BDBDBD',backgroundColor:'white', width:'30%', height:'100%',borderRadius:100, alignItems: 'center', marginRight:15}} onPress={this.noteDown}>
<Text style={{color:'#BD3236', fontSize:25}}>-</Text>
</TouchableOpacity>
<TouchableOpacity style={{borderWidth:2, borderColor:'#BDBDBD',backgroundColor:'white', width:'30%', height:'100%',borderRadius:100, alignItems: 'center', marginLeft:15}} onPress={this.noteUp}>
<Text style={{color:'#BD3236', fontSize:25}}>+</Text>
</TouchableOpacity>
</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,marginBottom: config.deviceHeight * 0.01}}>
<Text style={{fontSize:20, marginLeft:130, 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:'120%',borderRadius:5}}>
<View style={{flexDirection: 'row',flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', alignContent:'center',marginTop:6}}>
{miniBar.map((item, id) => (
<Image key={id} style={{height:20, width:15, marginTop:10}} source={item.image}/>
))}
</View>
</TouchableOpacity>
</View>
</View>
</View>
<View style={{alignItems: 'center', height:'30%', marginTop:30}}>
<TouchableOpacity style={{backgroundColor:'#F4C20D', borderColor:'#BDBDBD', width:'15%', height:'20%', marginTop:'5%', borderWidth: 2, borderRadius: 5, alignItems: 'center'}} onPress={() => this.setState({showNotes: false})}>
<Text style={{marginTop:2,color:'black'}}>Back</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</Modal>
{/* Modal 4*/}
<Modal transparent={true} visible={this.state.showkeypad} animationType="none">
<View style={{ borderTopColor:'#BDBDBD', borderRightColor:'#BDBDBD', borderLeftColor:'#BDBDBD', borderTopWidth: 2, borderRightWidth: 2, borderLeftWidth:2, backgroundColor: '#4885ED',marginTop:'40%',height:'100%', width:'100%', borderTopRightRadius: 30, borderTopLeftRadius: 30}}>
<SafeAreaView>
<View style={{backgroundColor:'white', borderColor:'#BDBDBD', borderWidth:2, borderRadius:3, marginTop:'10%',alignItems: 'center', marginLeft:'38%', width:'25%'}}>
<Text style={{fontSize:35, color:'black'}} maxLength={3}>{this.state.tempoText}</Text>
</View>
<View style={{backgroundColor:'#BDBDBD',alignItems: 'center', alignContent:'center', marginLeft:45, marginRight:45, marginTop:15, height:'51%', borderRadius:3}}>
<View style={{flexDirection: 'row', marginBottom:'5%',marginTop:'2.5%'}}>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(7)}><Text style={{fontSize:25, marginTop:'20%'}}>7</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(8)}><Text style={{fontSize:25, marginTop:'20%'}}>8</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(9)}><Text style={{fontSize:25,marginTop:'20%'}}>9</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:'5%',marginTop:'2%'}}>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center',marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(4)}><Text style={{fontSize:25,marginTop:'20%'}}>4</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(5)}><Text style={{fontSize:25,marginTop:'20%'}}>5</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(6)}><Text style={{fontSize:25,marginTop:'20%'}}>6</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:'5%',marginTop:'2%'}}>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(1)}><Text style={{fontSize:25,marginTop:'20%'}}>1</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(2)}><Text style={{fontSize:25,marginTop:'20%'}}>2</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(3)}><Text style={{fontSize:25,marginTop:'20%'}}>3</Text></TouchableOpacity>
</View>
<View style={{flexDirection: 'row', marginBottom:'5%',marginTop:'2%'}}>
<TouchableOpacity style={{backgroundColor:'#DB3236', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setState({tempoText: 0})}><Text style={{fontSize:25,marginTop:'20%'}}>C</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'white', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempoText(0)}><Text style={{fontSize:25,marginTop:'20%'}}>0</Text></TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'#3CBA54', height:'130%', width:'30%', alignItems: 'center', marginRight:2, marginLeft:2, borderRadius:3}} onPress={() => this.setTempo(this.state.tempoText)}><Text style={{fontSize:25,marginTop:'20%'}}>SET</Text></TouchableOpacity>
</View>
</View>
<TouchableOpacity style={{backgroundColor:'#F4C20D', borderColor:'#BDBDBD', width:'15%', height:'5%', marginTop:'5%', marginLeft:'42%', borderWidth: 2, borderRadius: 5, alignItems: 'center'}} onPress={() => this.setState({showkeypad: false})}>
<Text style={{marginTop:2, color:'black'}}>Back</Text>
</TouchableOpacity>
</SafeAreaView>
</View>
</Modal>
......@@ -1058,38 +908,55 @@ getRotationAnimation = () => {
<View style={{height: '70%',marginTop:50}}>
<View style={{height:'60%', width:'100%'}}>
<View style={{alignItems:'center'}}>
<View style={{backgroundColor:'white', borderColor:'#DB3236', borderWidth:3, height:'85%', width:'95%', marginLeft:10, marginRight:10, marginTop:30, borderRadius:10}}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:60, marginRight:15, justifyContent: 'space-between'}}>
<Text>TEMPO</Text>
<View style={{backgroundColor:'white', height:'95%', width:'95%', marginLeft:10, marginRight:10, marginTop:10, borderRadius:10}}>
<View style={{flexDirection: 'row', marginTop:8, marginLeft:25, marginRight:20, justifyContent: 'space-between'}}>
<View style={{backgroundColor:'#007580', borderRadius:8}}>
<Text style={{paddingHorizontal:10, paddingVertical:5, fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#FFFBF0'}}>Tempo</Text>
</View>
<Text/>
<Text style={{marginLeft:105}}>T.S.</Text>
<Text>SUB DIV.</Text>
<View style={{backgroundColor:'#007580', borderRadius:8}}>
<Text style={{paddingHorizontal:10, paddingVertical:5, fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#FFFBF0'}}>T.S</Text>
</View>
<View style={{backgroundColor:'#007580', borderRadius:8}}>
<Text style={{paddingHorizontal:10, paddingVertical:5, fontFamily:'Gilroy-Light', fontSize:14, lineHeight:16, color:'#FFFBF0'}}>Sub Div.</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop:1}}>
<Image style={{height:30, width:20, marginTop:10, marginLeft:8}} source={this.state.image}/>
<TouchableOpacity style={{alignItems:'center', width:'25%'}} onPress={() => this.setState({showkeypad: true})}>
<Text style={{fontSize:35, color:'#DB3236'}}>{this.state.tempo}</Text>
</TouchableOpacity>
<Text style={{fontSize:12, marginTop:10, width: 70, color:'#4203c9'}}>{this.state.tempoName}</Text>
<Image style={{height:20, width:20, marginTop:8, marginLeft:8}} source={this.state.noteimage}/>
<View style={{width:'25%', alignItems: 'center'}}>
<Text style={{fontSize:24, fontFamily:'Gilroy-Bold', lineHeight:30, color:'#EF476F'}}>{this.state.tempo}</Text>
</View>
<View>
<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}/>
</TouchableOpacity>
</View>
<View style={{width:'25%', alignItems: 'center'}}>
<TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Text style={{fontSize:35, color:'#DB3236'}}>{this.state.beat}/{this.state.note}</Text>
</TouchableOpacity>
<Text style={{fontSize:24, fontFamily:'Gilroy-Bold', lineHeight:30, color:'#EF476F'}}>{this.state.beat}/{this.state.note}</Text>
</View>
<View>
<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}/>
</TouchableOpacity>
</View>
<View style={{ marginLeft:'5%',width:'10%', alignItems: 'center'}}>
<TouchableOpacity onPress={() => this.setState({showNotes: true})}>
<Image style={{height:30, width:20, marginTop:10, marginRight:30, marginLeft:'25%'}} source={this.state.image}/>
</TouchableOpacity>
<Image style={{height:20, width:20, marginTop:8, marginRight:30, marginLeft:'25%'}} source={this.state.noteimage}/>
</View>
<View>
<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}/>
</TouchableOpacity>
</View>
</View>
<Text style={{textTransform:'uppercase',marginLeft: 13,fontSize:12, marginTop:10, width: 315, color:'#3B3A39', lineHeight:14, fontFamily:'Gilroy-Light'}}>{this.state.tempoName}</Text>
<View style={{flexDirection: 'row', marginLeft:10, marginRight:10, marginTop:5, justifyContent: 'space-between'}}>
{this.state.tempoBar.map((item, id) => (
<TouchableOpacity key={id} style={
{backgroundColor: '#4885ED',borderColor:'#DBDBDB', borderWidth:1,width: config.deviceWidth * 0.5 / this.state.tempoBar.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}
{backgroundColor: '#81C9C9',borderColor:'#DBDBDB', borderWidth:1,width: config.deviceWidth * 0.5 / this.state.tempoBar.length, height:this.state.barTempoH, marginLeft:3, marginRight:5}
}
onPress={() => this.changeSound(item)}>
{item.s.map((it, i) => (
<View key={i} style={{marginTop:1, 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, 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}}/>
))}
</TouchableOpacity>
))}
......@@ -1098,12 +965,11 @@ getRotationAnimation = () => {
</View>
</View>
</View>
<View style={{borderWidth:2, borderColor:'#BDBDBD', width:'100%'}}/>
<View style={{backgroundColor:'#4885ED', height: '120%', width:'100%'}}>
<View style={{backgroundColor: '#81C9C9',height: '120%', width:'100%'}}>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.03}}>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#F4C20D', 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:'15%', height:'125%', 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>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#F4C20D', width:'15%', height:'125%',borderRadius:8}} onPress={() => this.setState({showList: true})}>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'15%', height:'125%',borderRadius:8}} onPress={() => this.setState({showList: true})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={listIcon}/>
</TouchableOpacity>
</View>
......@@ -1126,13 +992,16 @@ getRotationAnimation = () => {
</View>
<View style={{flexDirection: 'row', marginTop: config.deviceHeight * 0.4}}>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#F4C20D', 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={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#F4C20D', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}><Text style={{fontSize:35, marginTop:10}}>TAP</Text></TouchableOpacity>
<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})}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={tsIcon}/>
</TouchableOpacity>
<TouchableOpacity style={{borderColor:'#BDBDBD',borderWidth:1,backgroundColor:'#FFC107', width:'20%', height:'120%', borderRadius:8,alignItems: 'center'}} onPress={() => this.keepTap()}>
<Image style={{height:35, width:35, alignItems: 'center', marginLeft:10, marginTop:10}} source={tapIcon}/>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</ImageBackground>
</View>
);
}
......
screens/quiz.js
View file @ c73fb1a0
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable prettier/prettier */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
/* eslint-disable prettier/prettier */
......@@ -654,6 +656,7 @@ class Quiz extends React.Component {
corrSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
corrSound.release();
} else {
// console.log('playback failed due to audio decoding errors');
corrSound.release();
......@@ -672,6 +675,7 @@ class Quiz extends React.Component {
wrongSound.play((success) => {
if (success) {
// console.log('successfully finished playing');
wrongSound.release();
} else {
// console.log('playback failed due to audio decoding errors');
wrongSound.release();
......
screens/settingListen.js
View file @ c73fb1a0
......@@ -11,6 +11,7 @@ import {
ScrollView,
BackHandler,
Pressable,
Dimensions,
} from 'react-native';
import styles from '../style/styleSettings';
import Orientation from 'react-native-orientation';
......@@ -153,28 +154,35 @@ export default class SettingsListen extends React.Component {
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<SafeAreaView>
<View style={styles.view1}>
<View>
<Text style={styles.textques}>No. of Questions : </Text>
</View>
<View style={{marginHorizontal: Dimensions.get('window').width * 0.15}}>
<NumericInput
value={this.state.value}
minValue={1}
maxValue={100}
onChange={this.onChange.bind(this)}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
totalWidth={150}
totalHeight={40}
totalWidth={250}
totalHeight={50}
iconSize={25}
step={1}
valueType="real"
rounded
textColor="black"
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor="black"
leftButtonBackgroundColor="black"/>
rightButtonBackgroundColor="#81C9C9"
leftButtonBackgroundColor="#81C9C9"/>
</View>
<View>
<Text style={styles.textques2}>Major Lists</Text>
</View>
<View>
<Text style={styles.textques3}>3/7 octave are selected</Text>
</View>
</View>
<ScrollView style={styles.scroll}>
<View
......@@ -184,12 +192,12 @@ export default class SettingsListen extends React.Component {
<Pressable
style={
notes.find((element) => element === item)
? styles.selectedKeywordStyle
: styles.buttonStyle
? styles.selectedKeywordStyleOct
: styles.buttonStyleOct
}
onPress={() => this.toggleKeyword(item)}
key={id}>
<Text style={styles.textname}>
<Text style={styles.textnameOct}>
{item}
</Text>
</Pressable>
......@@ -198,7 +206,6 @@ export default class SettingsListen extends React.Component {
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
);
}
......
screens/settingScale.js
View file @ c73fb1a0
......@@ -11,6 +11,7 @@ import {
ScrollView,
BackHandler,
Pressable,
Dimensions,
} from 'react-native';
import styles from '../style/styleSettings';
import Orientation from 'react-native-orientation';
......@@ -146,28 +147,35 @@ export default class SettingsScale extends React.Component {
render() {
return (
<View style={styles.container}>
<ImageBackground
source={require('../media/img/background.jpg')}
style={styles.imagebackground}>
<SafeAreaView>
<View style={styles.view1}>
<View>
<Text style={styles.textques}>No. of Questions : </Text>
</View>
<View style={{marginHorizontal: Dimensions.get('window').width * 0.15}}>
<NumericInput
value={this.state.value}
minValue={1}
maxValue={100}
onChange={this.onChange.bind(this)}
onLimitReached={(isMax,msg) => console.log(isMax,msg)}
totalWidth={150}
totalHeight={40}
totalWidth={250}
totalHeight={50}
iconSize={25}
step={1}
valueType="real"
rounded
textColor="black"
iconStyle={{ color: 'white' }}
rightButtonBackgroundColor="black"
leftButtonBackgroundColor="black"/>
rightButtonBackgroundColor="#81C9C9"
leftButtonBackgroundColor="#81C9C9"/>
</View>
<View>
<Text style={styles.textques2}>Major Lists</Text>
</View>
<View>
<Text style={styles.textques3}>4/28 major are selected</Text>
</View>
</View>
<ScrollView style={styles.scroll}>
<View
......@@ -194,7 +202,6 @@ export default class SettingsScale extends React.Component {
</View>
</ScrollView>
</SafeAreaView>
</ImageBackground>
</View>
);
}
......
style/styleListen.js
View file @ c73fb1a0
......@@ -269,7 +269,7 @@ export default StyleSheet.create({
marginLeft: config.deviceHeight * 1.0,
},
buttonStyle: {
width: config.deviceWidth * 0.075,
width: config.deviceWidth / 14,
height:'70%',
alignItems: 'center',
backgroundColor: 'white',
......@@ -278,7 +278,7 @@ export default StyleSheet.create({
borderBottomWidth: 1,
},
selectedKeywordStyle: {
width: config.deviceWidth * 0.075,
width: config.deviceWidth / 14,
height:'70%',
alignItems: 'center',
backgroundColor: '#EEA1E1',
......@@ -301,4 +301,21 @@ export default StyleSheet.create({
width: '1.5%',
position: 'absolute',
},
anime: {
backgroundColor:'white',
width: '100%',
height: 20,
borderColor: '#FAA',
justifyContent: 'center',
},
inner:{
width: '100%',
height: 20,
backgroundColor:'green',
},
});
//
// height: '75%',
// width: Dimensions.get('window').width * 0.06,
style/styleSettings.js
View file @ c73fb1a0
......@@ -12,29 +12,52 @@ export default StyleSheet.create({
justifyContent: 'center',
width: '100%',
height: '100%',
backgroundColor:'#FFFBF0',
},
buttonStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
width: 164,
height : 164,
alignItems: 'center',
borderWidth: 3,
borderColor: 'white',
borderRadius: 10,
borderWidth: 0.5,
borderColor: '#B3B3B3',
borderRadius: 8,
backgroundColor: 'rgba(52, 52, 52, 0.0)',
opacity:0.4,
padding: 10,
marginRight: config.deviceWidth * 0.03,
marginBottom: config.deviceHeight * 0.03,
},
selectedKeywordStyle: {
flex: 1,
width: config.deviceWidth * 0.4,
width: 164,
height : 164,
alignItems: 'center',
borderWidth: 3,
borderColor: 'black',
backgroundColor: 'white',
borderRadius: 10,
marginRight: config.deviceWidth * 0.03,
borderWidth: 0.5,
borderColor: '#B3B3B3',
backgroundColor: '#3D9090',
borderRadius: 8,
marginBottom: config.deviceHeight * 0.03,
padding: 10,
},
buttonStyleOct: {
width: 164,
height : 70,
alignItems: 'center',
borderWidth: 0.5,
borderColor: '#B3B3B3',
borderRadius: 8,
backgroundColor: 'rgba(52, 52, 52, 0.0)',
opacity:0.4,
padding: 10,
marginBottom: config.deviceHeight * 0.03,
},
selectedKeywordStyleOct: {
width: 164,
height : 70,
alignItems: 'center',
borderWidth: 0.5,
borderColor: '#B3B3B3',
backgroundColor: '#3D9090',
borderRadius: 8,
marginBottom: config.deviceHeight * 0.03,
padding: 10,
},
......@@ -43,36 +66,63 @@ export default StyleSheet.create({
height: '100%',
},
view1: {
alignItems:'center',
marginTop: '15%',
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
flexDirection: 'row',
flexWrap: 'wrap',
height: '30%',
alignItems: 'center',
},
textques: {
fontSize: 15,
marginRight:9,
fontFamily: 'sans-serif',
fontSize: 16,
fontFamily: 'Gilroy-Bold',
lineHeight: 20,
marginHorizontal: config.deviceWidth * 0.292,
marginVertical: config.deviceHeight * 0.02,
},
textques2: {
fontSize: 16,
fontFamily: 'Gilroy-Bold',
lineHeight: 20,
marginTop: config.deviceHeight * 0.02,
marginHorizontal: config.deviceWidth * 0.37,
},
textques3: {
fontSize: 14,
fontFamily: 'Gilroy',
lineHeight: 20,
marginHorizontal: config.deviceWidth * 0.28,
marginVertical: config.deviceHeight * 0.02,
},
scroll: {
marginTop: '5%',
marginTop: '4%',
backgroundColor: '#F7F7F7',
},
view2: {
flexDirection: 'row',
flexWrap: 'wrap',
width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
justifyContent: 'space-between',
marginTop: config.deviceHeight * 0.03,
marginLeft: config.deviceWidth * 0.027,
marginRight: config.deviceWidth * 0.027,
marginBottom: config.deviceHeight * 0.1,
},
textname: {
textAlign: 'center',
fontFamily: 'sans-serif',
paddingBottom: 10,
fontFamily: 'Gilroy-Bold',
fontSize:16,
lineHeight:20,
},
textnameOct: {
textAlign: 'center',
fontFamily: 'Gilroy-Bold',
fontSize:16,
lineHeight:20,
paddingHorizontal: config.deviceWidth * 0.05,
paddingVertical: config.deviceHeight * 0.02,
},
image: {
width: 100,
height: 100,
width: 115,
height: 115,
},
});
yarn.lock
View file @ c73fb1a0
......@@ -1264,6 +1264,15 @@
dependencies:
deep-assign "^3.0.0"
"@react-native-community/art@^1.1.2", "@react-native-community/art@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@react-native-community/art/-/art-1.2.0.tgz#386d95393f6042d9006f9d4bc6063fb898794460"
integrity sha512-a+ZcRGl/BzLa89yi33Mbn5SHavsEXqKUMdbfLf3U8MDLElndPqUetoJyGkv63+BcPO49UMWiQRP1YUz6/zfJ+A==
dependencies:
art "^0.10.3"
invariant "^2.2.4"
prop-types "^15.7.2"
"@react-native-community/cli-debugger-ui@^4.13.1":
version "4.13.1"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.13.1.tgz#07de6d4dab80ec49231de1f1fbf658b4ad39b32c"
......@@ -1445,6 +1454,13 @@
resolved "https://registry.yarnpkg.com/@react-navigation/material-bottom-tabs/-/material-bottom-tabs-5.3.13.tgz#c9657008894b2ec85ed3560731e8ea6220151e5a"
integrity sha512-yx/V8wnjZPq+1Gbxeb9G2xvavS52bRB9YoTkIHbSRuug6VBLSc4yK3N1tWpc5rytQZegIL0h63jOn65uo1hm/g==
"@react-navigation/material-top-tabs@^5.3.15":
version "5.3.15"
resolved "https://registry.yarnpkg.com/@react-navigation/material-top-tabs/-/material-top-tabs-5.3.15.tgz#d2719db5f6af4bb372371619ea84fac402295784"
integrity sha512-oVu+KjHhLlzbkjFEyZcS2Tq/I5rf8WigtoeAYVisPncZQjnZXT3rsswBm3spN4CnJUQUDPKhg6pH8KK1iFIKzw==
dependencies:
color "^3.1.3"
"@react-navigation/native@^5.8.10":
version "5.8.10"
resolved "https://registry.yarnpkg.com/@react-navigation/native/-/native-5.8.10.tgz#3fe806abff9efb085bcf595212803dd05a1347ca"
......@@ -1957,6 +1973,11 @@ array.prototype.flatmap@^1.2.3:
es-abstract "^1.18.0-next.1"
function-bind "^1.1.1"
art@^0.10.3:
version "0.10.3"
resolved "https://registry.yarnpkg.com/art/-/art-0.10.3.tgz#b01d84a968ccce6208df55a733838c96caeeaea2"
integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
asap@~2.0.3, asap@~2.0.6:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
......@@ -6190,7 +6211,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
......@@ -6310,6 +6331,13 @@ react-native-grid-list@^1.1.0:
dependencies:
prop-types "^15.6.0"
react-native-image-progress@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/react-native-image-progress/-/react-native-image-progress-1.1.1.tgz#95bbe0875c7ebd54286df69cb37b598b94c54eb0"
integrity sha512-5rI2UjUo1bJoggU3lZAa+Wv29bm+N322XVR49mxfczfhaOyFdoXMIRgd5x2eXG+RQi9PcLleD6wxVDxGAPPO9Q==
dependencies:
prop-types "^15.5.10"
react-native-iphone-x-helper@^1.3.0, react-native-iphone-x-helper@^1.3.1:
version "1.3.1"
resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz#20c603e9a0e765fd6f97396638bdeb0e5a60b010"
......@@ -6342,6 +6370,14 @@ react-native-pixel-perfect@^1.0.1:
resolved "https://registry.yarnpkg.com/react-native-pixel-perfect/-/react-native-pixel-perfect-1.0.2.tgz#8e6dc97e377caa4bd07f9e584ba438d53c0e25e8"
integrity sha512-0IvYCNkxuQbQC9q4tI+C3i6o38nbx916p7gBRBWuPxDhKBCuTkVV3VukcfW6vtjRlwQm6kwQcF9OtI+yUBt+YA==
react-native-progress@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/react-native-progress/-/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"
integrity sha512-sFHs6k6npWDOyvQoL2NeyOyHb+q1s8iOAOeyzoObN77zkxOAsgJt9FcSJLRq70Mw7qSGNJMFDqCgvYR1huYRwQ==
dependencies:
"@react-native-community/art" "^1.1.2"
prop-types "^15.7.2"
react-native-ratings@^7.3.0:
version "7.3.0"
resolved "https://registry.yarnpkg.com/react-native-ratings/-/react-native-ratings-7.3.0.tgz#32e11e4ed944ba8adbbc995d601df3f131619b6f"
......@@ -6396,6 +6432,11 @@ react-native-super-grid@^4.0.3:
dependencies:
prop-types "^15.6.0"
react-native-tab-view@^2.16.0:
version "2.16.0"
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.16.0.tgz#cae72c7084394bd328fac5fefb86cd966df37a86"
integrity sha512-ac2DmT7+l13wzIFqtbfXn4wwfgtPoKzWjjZyrK1t+T8sdemuUvD4zIt+UImg03fu3s3VD8Wh/fBrIdcqQyZJWg==
react-native-text@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/react-native-text/-/react-native-text-1.0.8.tgz#d1004dfeb675de98fe0915b10c69ddeb977f6d55"
......
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