Skip to content

P
pianoApp
You need to sign in or sign up before continuing.
Commit 194a1e62 authored by norhalimah's avatar norhalimah
Browse files
Options

backhandler fixed

parent d794fa83
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 156 deletions
img/background.jpg
View replaced file @ d794fa83 View file @ 194a1e62
img/background.jpg

6.75 KB | W: | H:

img/background.jpg

35.6 KB | W: | H:

img/background.jpg
img/background.jpg
img/background.jpg
img/background.jpg
  • 2-up
  • Swipe
  • Onion skin
screens/home.js
View file @ 194a1e62
...@@ -20,17 +20,18 @@ class Home extends React.PureComponent { ...@@ -20,17 +20,18 @@ class Home extends React.PureComponent {
async componentDidMount() { async componentDidMount() {
Orientation.lockToPortrait(); Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP); // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
} }
componentWillUnmount() { componentWillUnmount() {
Orientation.lockToPortrait(); Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', exitApp);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP); // Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
} }
render() { render() {
BackHandler.addEventListener('hardwareBackPress', exitApp);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground <ImageBackground
...@@ -41,7 +42,7 @@ class Home extends React.PureComponent { ...@@ -41,7 +42,7 @@ class Home extends React.PureComponent {
}}> }}>
<SafeAreaView> <SafeAreaView>
<ScrollView> <ScrollView>
<View style={{marginTop: '5%', marginBottom: '5%'}}> <View style={{marginTop: '15%', marginBottom: '5%'}}>
<TouchableOpacity <TouchableOpacity
style={styles.menu} style={styles.menu}
onPress={() => { onPress={() => {
...@@ -87,8 +88,8 @@ const styles = StyleSheet.create({ ...@@ -87,8 +88,8 @@ const styles = StyleSheet.create({
marginLeft: '3%', marginLeft: '3%',
marginRight: '3%', marginRight: '3%',
borderRadius: 10, borderRadius: 10,
borderWidth: 2, borderWidth: 5,
borderColor: 'white', borderColor: 'black',
backgroundColor: 'white', backgroundColor: 'white',
}, },
}); });
screens/logbook.js
View file @ 194a1e62
...@@ -41,16 +41,17 @@ class LogBook extends React.PureComponent { ...@@ -41,16 +41,17 @@ class LogBook extends React.PureComponent {
componentDidMount() { componentDidMount() {
Orientation.lockToPortrait(); Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
this.displayData(); this.displayData();
} }
homeExit = async () => { homeExit = async () => {
this.props.navigation.navigate('1'); this.props.navigation.navigate('1');
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
//Orientation.lockToPortrait(); //Orientation.lockToPortrait();
}; };
render() { render() {
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground <ImageBackground
...@@ -69,25 +70,28 @@ class LogBook extends React.PureComponent { ...@@ -69,25 +70,28 @@ class LogBook extends React.PureComponent {
key ={id} key ={id}
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
padding: 10, paddingLeft: 15,
paddingRight: 15,
paddingBottom:10,
paddingTop:5,
backgroundColor: 'white', backgroundColor: 'white',
borderBottomWidth:1, borderBottomWidth:1,
}}> }}>
<View style={{alignItems: 'center'}}> <View style={{alignItems: 'center',marginRight:5}}>
<View style={{marginRight:10, marginBottom:10}}> <View>
<Text style={{color:'black', fontSize: 40}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text> <Text style={{color:'black', fontSize: 40,textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[0].trim() : ''}</Text>
<Text style={{color:'black', fontSize: 15, marginLeft:11}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text> <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{(item.date !== undefined) ? item.date.split(' ')[1].trim() : ''}</Text>
</View> </View>
<View style={{marginRight:5}}> <View>
<Text style={{color:'black', fontSize: 15}}>{item.day}</Text> <Text style={{color:'black', fontSize: 15, textAlign: 'center'}}>{item.day}</Text>
</View> </View>
</View> </View>
<View style={{borderWidth:1, borderColor : 'blue'}}/> <View style={{borderWidth:1, borderColor : 'gray'}}/>
<View style={{flexDirection: 'column',marginLeft:5,marginTop:5}}> <View style={{flexDirection: 'column',marginLeft:5,marginTop:10}}>
<Text style={{color:'green', fontSize: 15}}>Correct : {item.correct}</Text> <Text style={{color:'green', fontSize: 15}}>Correct:{item.correct}</Text>
<Text style={{color:'red', fontSize: 15}}>Wrong : {item.wrong}</Text> <Text style={{color:'red', fontSize: 15}}>Wrong: {item.wrong}</Text>
<Text style={{color:'black', fontSize: 15}}>Timer : {item.timer}</Text> <Text style={{color:'black', fontSize: 15}}>Timer: {item.timer}</Text>
<Text style={{color:'black', fontSize: 15}}>Time : {item.time}</Text> <Text style={{color:'black', fontSize: 15}}>Time: {item.time}</Text>
</View> </View>
</View> </View>
)).reverse()} )).reverse()}
...@@ -105,6 +109,7 @@ const styles = StyleSheet.create({ ...@@ -105,6 +109,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: '#9001f5',
}, },
menu: { menu: {
marginTop: '3%', marginTop: '3%',
......
screens/quiz.js
View file @ 194a1e62
This diff is collapsed.
screens/settings.js
View file @ 194a1e62
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
import React from 'react'; import React from 'react';
import { import {
SafeAreaView, SafeAreaView,
//ImageBackground, ImageBackground,
Text, Text,
View, View,
TouchableOpacity, TouchableOpacity,
...@@ -148,10 +148,17 @@ export default class Settings extends React.Component { ...@@ -148,10 +148,17 @@ export default class Settings extends React.Component {
}); });
}; };
componentWillUnmount() {
Orientation.lockToPortrait();
BackHandler.removeEventListener('hardwareBackPress', this.homeExit);
// Orientation.lockAsync(Orientation.OrientationLock.PORTRAIT_UP);
}
componentDidMount() { componentDidMount() {
// notes.splice(0, notes.length); // notes.splice(0, notes.length);
// console.log(notes); // console.log(notes);
Orientation.lockToPortrait(); Orientation.lockToPortrait();
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
// console.log(notes.length); // console.log(notes.length);
counter = 0; counter = 0;
RNFS.unlink(path1).then(res => { RNFS.unlink(path1).then(res => {
...@@ -180,14 +187,19 @@ export default class Settings extends React.Component { ...@@ -180,14 +187,19 @@ export default class Settings extends React.Component {
}; };
render() { render() {
BackHandler.addEventListener('hardwareBackPress', this.homeExit);
return ( return (
<View style={styles.container}> <View style={styles.container}>
<ImageBackground
source={require('../img/background.jpg')}
style={{
width: '100%',
height: '100%',
}}>
<SafeAreaView> <SafeAreaView>
<View style={{alignItems:'center',marginTop: '15%', marginLeft: config.deviceWidth * 0.08, <View style={{alignItems:'center',marginTop: '15%', marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1, flexDirection: 'row', marginRight: config.deviceWidth * 0.1, flexDirection: 'row',
flexWrap: 'wrap'}}> flexWrap: 'wrap'}}>
<Text style={{fontSize: 15,marginRight:5}}>No. of Questions : </Text> <Text style={{fontSize: 16,marginRight:9}}>No. of Questions : </Text>
<NumericInput <NumericInput
value={this.state.value} value={this.state.value}
minValue={0} minValue={0}
...@@ -213,6 +225,7 @@ export default class Settings extends React.Component { ...@@ -213,6 +225,7 @@ export default class Settings extends React.Component {
width: config.deviceWidth, width: config.deviceWidth,
marginLeft: config.deviceWidth * 0.08, marginLeft: config.deviceWidth * 0.08,
marginRight: config.deviceWidth * 0.1, marginRight: config.deviceWidth * 0.1,
marginBottom: config.deviceHeight * 0.12,
}}> }}>
{Notes.map((item, id) => ( {Notes.map((item, id) => (
<View key={id}> <View key={id}>
...@@ -240,6 +253,7 @@ export default class Settings extends React.Component { ...@@ -240,6 +253,7 @@ export default class Settings extends React.Component {
</View> </View>
</ScrollView> </ScrollView>
</SafeAreaView> </SafeAreaView>
</ImageBackground>
</View> </View>
); );
} }
...@@ -256,8 +270,8 @@ const styles = StyleSheet.create({ ...@@ -256,8 +270,8 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
width: config.deviceWidth * 0.4, width: config.deviceWidth * 0.4,
alignItems: 'center', alignItems: 'center',
borderWidth: 1, borderWidth: 3,
borderColor: 'black', borderColor: 'white',
borderRadius: 10, borderRadius: 10,
backgroundColor: 'rgba(52, 52, 52, 0.0)', backgroundColor: 'rgba(52, 52, 52, 0.0)',
//opacity: 0.5, //opacity: 0.5,
...@@ -269,7 +283,7 @@ const styles = StyleSheet.create({ ...@@ -269,7 +283,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
width: config.deviceWidth * 0.4, width: config.deviceWidth * 0.4,
alignItems: 'center', alignItems: 'center',
borderWidth: 1, borderWidth: 3,
borderColor: 'black', borderColor: 'black',
backgroundColor: 'white', backgroundColor: 'white',
// backgroundColor: 'rgba(0,0,0,0)', // backgroundColor: 'rgba(0,0,0,0)',
......
screens/totalScore.js deleted 100644 → 0
View file @ d794fa83
/* eslint-disable prettier/prettier */
/* eslint-disable react/no-did-mount-set-state */
/* eslint-disable prettier/prettier */
/* eslint-disable no-unused-vars */
/* eslint-disable react-native/no-inline-styles */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
Text,
View,
StyleSheet,
TouchableHighlight,
ImageBackground,
Image,
Button,
Alert,
} from 'react-native';
import styles from './style.js';
import {useNavigation} from '@react-navigation/native';
export default class TotalScore extends Component {
constructor(props: Object) {
super(props);
this.state = {
timer: 0,
correct: 0,
wrong: 0,
};
}
componentDidMount() {
this.setState({
correct: this.props.route.params.c,
wrong: this.props.route.params.w,
});
}
componentWillUnmount() {
clearInterval(this.interval);
}
';';
render() {
const {
container,
selectedKeywordStyle,
buttonStyle,
textStyle,
buttonB1,
buttonB2,
buttonB3,
buttonB4,
buttonB5,
SbuttonB1,
SbuttonB2,
SbuttonB3,
SbuttonB4,
SbuttonB5,
} = styles;
return (
<View style={styles.container}>
<View style={styles.c1}>
<View style={styles.boxScore}>
<Text style={{fontSize: 20}}>Total Score </Text>
<Text>Correct :{this.state.correct}</Text>
<Text>Wrong :{this.state.wrong}</Text>
</View>
<Button
title="START AGAIN"
color="#E07EF9"
onPress={() => this.props.navigation.navigate('1')}
/>
</View>
</View>
);
}
}
style/style.js
View file @ 194a1e62
...@@ -53,46 +53,56 @@ export default StyleSheet.create({ ...@@ -53,46 +53,56 @@ export default StyleSheet.create({
borderWidth: 3, borderWidth: 3,
borderRadius: 10, borderRadius: 10,
position: 'absolute', position: 'absolute',
marginTop: config.deviceWidth * 0.1, marginTop: config.deviceWidth * 0.11,
backgroundColor:'white',
}, },
correct: { correct: {
width: 100, width: 100,
textAlign: 'center', textAlign: 'center',
paddingTop: 15, paddingTop: 15,
color: 'black', color: 'white',
height: 60, height: 60,
borderRadius: 10, borderRadius: 10,
alignItems: 'center', alignItems: 'center',
fontSize: 25, fontSize: 25,
marginRight: 10, marginRight: 10,
backgroundColor:'green', backgroundColor:'green',
borderColor:'white',
borderWidth: 2,
}, },
wrong: { wrong: {
width: 100, width: 100,
height: 60, height: 60,
borderRadius: 10, borderRadius: 10,
borderColor:'white',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', textAlign: 'center',
paddingTop: 15, paddingTop: 15,
color: 'black', color: 'white',
fontSize: 25, fontSize: 25,
marginRight: 10, marginRight: 10,
backgroundColor:'red', backgroundColor:'red',
borderWidth: 2,
}, },
timer: { timer: {
width: 65, width: 65,
height: 60, height: 60,
borderRadius: 10, borderRadius: 10,
borderColor:'white',
alignItems: 'center', alignItems: 'center',
textAlign: 'center', textAlign: 'center',
paddingTop: 16, paddingTop: 16,
color: 'white', color: 'white',
fontSize: 25, fontSize: 25,
backgroundColor:'black', backgroundColor:'black',
borderWidth: 2,
}, },
submit: { submit: {
width: '40%', width: '40%',
marginTop: config.deviceWidth * 0.055, marginTop: config.deviceWidth * 0.055,
borderColor:'white',
borderWidth: 2,
borderRadius: 5,
}, },
viewMain: { viewMain: {
width: '20%', width: '20%',
...@@ -115,7 +125,7 @@ export default StyleSheet.create({ ...@@ -115,7 +125,7 @@ export default StyleSheet.create({
marginLeft: config.deviceHeight * 1.0, marginLeft: config.deviceHeight * 1.0,
}, },
buttonStyle: { buttonStyle: {
width: config.deviceWidth * 0.072, width: config.deviceWidth * 0.075,
alignItems: 'center', alignItems: 'center',
backgroundColor: 'white', backgroundColor: 'white',
borderRightWidth: 1, borderRightWidth: 1,
...@@ -123,7 +133,7 @@ export default StyleSheet.create({ ...@@ -123,7 +133,7 @@ export default StyleSheet.create({
borderBottomWidth: 1, borderBottomWidth: 1,
}, },
selectedKeywordStyle: { selectedKeywordStyle: {
width: config.deviceWidth * 0.072, width: config.deviceWidth * 0.075,
alignItems: 'center', alignItems: 'center',
backgroundColor: '#EEA1E1', backgroundColor: '#EEA1E1',
borderRightWidth: 1, borderRightWidth: 1,
...@@ -133,25 +143,25 @@ export default StyleSheet.create({ ...@@ -133,25 +143,25 @@ export default StyleSheet.create({
buttonB1: { buttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.047, marginLeft: config.deviceWidth * 0.048,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
buttonB2: { buttonB2: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
width: '5%', width: '5%',
marginLeft: config.deviceWidth * 0.119, marginLeft: config.deviceWidth * 0.123,
position: 'absolute', position: 'absolute',
}, },
buttonB3: { buttonB3: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
width: '5%', width: '5%',
marginLeft: config.deviceWidth * 0.26, marginLeft: config.deviceWidth * 0.275,
position: 'absolute', position: 'absolute',
}, },
...@@ -159,81 +169,81 @@ export default StyleSheet.create({ ...@@ -159,81 +169,81 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.335, marginLeft: config.deviceWidth * 0.348,
position: 'absolute', position: 'absolute',
}, },
buttonB5: { buttonB5: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginBottom: 10, marginBottom: 10,
marginLeft: config.deviceWidth * 0.406, marginLeft: config.deviceWidth * 0.423,
position: 'absolute', position: 'absolute',
}, },
SbuttonB1: { SbuttonB1: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.047, marginLeft: config.deviceWidth * 0.048,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
SbuttonB2: { SbuttonB2: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
width: '5%', width: '5%',
marginLeft: config.deviceWidth * 0.119, marginLeft: config.deviceWidth * 0.123,
position: 'absolute', position: 'absolute',
}, },
SbuttonB3: { SbuttonB3: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
width: '5%', width: '5%',
marginLeft: config.deviceWidth * 0.26, marginLeft: config.deviceWidth * 0.275,
position: 'absolute', position: 'absolute',
}, },
SbuttonB4: { SbuttonB4: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.335, marginLeft: config.deviceWidth * 0.348,
position: 'absolute', position: 'absolute',
}, },
SbuttonB5: { SbuttonB5: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.406, marginLeft: config.deviceWidth * 0.423,
position: 'absolute', position: 'absolute',
}, },
buttonB11: { buttonB11: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.55, marginLeft: config.deviceWidth * 0.575,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
buttonB21: { buttonB21: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.623, marginLeft: config.deviceWidth * 0.65,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
buttonB31: { buttonB31: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.767, marginLeft: config.deviceWidth * 0.798,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
...@@ -242,57 +252,57 @@ export default StyleSheet.create({ ...@@ -242,57 +252,57 @@ export default StyleSheet.create({
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.839, marginLeft: config.deviceWidth * 0.872,
position: 'absolute', position: 'absolute',
}, },
buttonB51: { buttonB51: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'black', backgroundColor: 'black',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginBottom: 10, marginBottom: 10,
marginLeft: config.deviceWidth * 0.91, marginLeft: config.deviceWidth * 0.95,
position: 'absolute', position: 'absolute',
}, },
SbuttonB11: { SbuttonB11: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.55, marginLeft: config.deviceWidth * 0.575,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
SbuttonB21: { SbuttonB21: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.623, marginLeft: config.deviceWidth * 0.65,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
SbuttonB31: { SbuttonB31: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.767, marginLeft: config.deviceWidth * 0.798,
width: '5%', width: '5%',
position: 'absolute', position: 'absolute',
}, },
SbuttonB41: { SbuttonB41: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.839, marginLeft: config.deviceWidth * 0.872,
position: 'absolute', position: 'absolute',
}, },
SbuttonB51: { SbuttonB51: {
alignItems: 'center', alignItems: 'center',
backgroundColor: 'blue', backgroundColor: '#92ddea',
width: '5%', width: '5%',
height: '65%', height: '55%',
marginLeft: config.deviceWidth * 0.91, marginLeft: config.deviceWidth * 0.95,
position: 'absolute', position: 'absolute',
}, },
boxScore: { boxScore: {
......
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