diff --git a/App.js b/App.js index 17a92410f41ac5ba5bf60a75a0fed9e97c7c5c27..5daf1bdfce433f67433dd81705f97b5060492882 100644 --- a/App.js +++ b/App.js @@ -1,118 +1,22 @@ -import 'react-native-gesture-handler'; -import React, {Component} from 'react'; +import * as React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; -import { - Platform, - StyleSheet, - View, - Text, - Image, - TouchableOpacity, - Alert, - Button, -} from 'react-native'; +import SplashScreen from './SplashScreen'; const Stack = createStackNavigator(); -const instructions = Platform.select({ - ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', - android: - 'Les vår Personvern.\n' + - 'Trykk "Bekreft og fortsett" for å akseptere Servicevilkår.', -}); - -export default class SplashScreen extends Component<{}> { - constructor() { - super(); - this.state = { - isVisible: true, - }; - } - Hide_Splash_Screen = () => { - this.setState({ - isVisible: false, - }); - }; - - componentDidMount() { - var that = this; - setTimeout(function() { - that.Hide_Splash_Screen(); - }, 5000); - } - - render() { - let Splash_Screen = ( - <View style={styles.SplashScreen_RootView}> - <View style={styles.SplashScreen_ChildView}> - <Image - source={require('D:\\BachelorOppgave\\FastTrackTaxi_ReactNative\\AppIcons\\fast_track_taxi_logo_ferdig.png')} - style={{width: '100%', height: '100%', resizeMode: 'contain'}} - /> - </View> - </View> - ); - return ( - <View style={styles.MainContainer}> - <View style={styles.container}> - <View> - <Text style={styles.welcome}>Velkommen til</Text> - </View> - <Image - source={require('D:\\BachelorOppgave\\FastTrackTaxi_ReactNative\\AppIcons\\fast_track_taxi_logo_ferdig.png')} - style={{width: 380, height: 380}} - /> - <Text style={styles.instructions}>{instructions}</Text> - <Button - onPress={this.onPressButton} - title="BEKREFT OG FORTSETT" - color="#009933" - /> - </View> - {this.state.isVisible === true ? Splash_Screen : null} - </View> - ); - } +function App() { + return ( + <NavigationContainer> + <Stack.Navigator mode="modal" headerMode="none"> + <Stack.Screen + name="SplashScreen" + component={SplashScreen} + options={{headerShow: false}} + /> + </Stack.Navigator> + </NavigationContainer> + ); } -const styles = StyleSheet.create({ - MainContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - paddingTop: Platform.OS === 'ios' ? 20 : 0, - }, - - SplashScreen_RootView: { - justifyContent: 'center', - flex: 1, - margin: 10, - position: 'absolute', - width: '100%', - height: '100%', - }, - SplashScreen_ChildView: { - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#34eb37', - flex: 1, - }, - container: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#FFFFFF', - }, - welcome: { - fontSize: 60, - textAlign: 'center', - margin: 10, - color: '#000000', - }, - instructions: { - textAlign: 'center', - color: '#000000', - marginBottom: 5, - }, -}); +export default App; diff --git a/MovingBetweenScreens.js b/MovingBetweenScreens.js index d576cad9da72054b86f8853c023baa3fd9f163a9..84ded14dffd76f61bb60d69353f8ba09f2e0943f 100644 --- a/MovingBetweenScreens.js +++ b/MovingBetweenScreens.js @@ -1,3 +1,7 @@ +/* + * Deprecated since 09.03.2020, Karol + */ + import React from 'react'; import {View, Text, Button} from 'react-native'; import {createStackNavigator, createAppContainer} from 'react-navigation'; diff --git a/Registrering.js b/Registrering.js new file mode 100644 index 0000000000000000000000000000000000000000..d52258ef9e6fe8b8541ff16bab0478e4662edad6 --- /dev/null +++ b/Registrering.js @@ -0,0 +1,126 @@ +import React, {Component} from 'react'; +import { + Platform, + StyleSheet, + Text, + View, + Image, + Button, + Alert, + TextInput, + TouchableOpacity, +} from 'react-native'; + +const instructions = Platform.select({ + ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', + android: + 'Les vår Personvern.\n' + + 'Trykk "Bekreft og fortsett" for å akseptere Servicevilkår.', +}); + +export default class App extends Component { + state = { + tlf: '', + }; + + handleTlf = text => { + this.setState({tlf: text}); + }; + + verificationTlf = tlfnr => { + Alert.alert( + 'Vi skal verifisere mobilnummeret ditt:', + '+47 ' + tlfnr + '\nEr det OK, eller vil du endre numeret?', + [ + { + text: 'Endre', + onPress: () => console.log('Endre ble valgt'), + style: 'cancel', + }, + {text: 'OK', onPress: () => console.log('OK ble valgt')}, + ], + {cancelable: false, onDismiss: () => {}}, + ); + }; + + render() { + return ( + <View> + <View> + <Text style={styles.topInfo}>Skriv mobilnumeret ditt</Text> + <Text style={styles.info}> + Fast Track Taxi skal sende deg en melding for å verifisere + mobilnummeret ditt. {'\n'}Hva er nummeret ditt? + </Text> + </View> + <View style={styles.row}> + <Text style={styles.mobnum}>+47</Text> + <TextInput + style={styles.mobnum} + placeholder="mobilnummer" + keyboardAppearance="default" + keyboardType="number-pad" + maxLength={8} + autoFocus={true} + onChangeText={this.handleTlf} + /> + </View> + <View style={styles.buttonContainer}> + <Button + title="Neste" + style={styles.button} + onPress={() => this.verificationTlf(this.state.tlf)} + /> + </View> + </View> + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + buttonContainer: { + justifyContent: 'center', + paddingHorizontal: 120, + }, + topInfo: { + marginTop: 40, + fontSize: 40, + textAlign: 'center', + color: '#4287f5', + }, + row: { + flexDirection: 'row', + justifyContent: 'center', + alignItems: 'center', + }, + info: { + marginTop: 40, + fontSize: 30, + textAlign: 'center', + margin: 10, + color: '#000000', + }, + mobnum: { + marginTop: 30, + color: '#3467eb', + marginBottom: 5, + fontSize: 35, + }, + button: { + fontSize: 20, + alignItems: 'center', + //backgroundColor: '#009933', + padding: 10, + }, + buttonText: { + justifyContent: 'center', + fontSize: 30, + alignItems: 'center', + backgroundColor: '#009933', + padding: 8, + }, +}); diff --git a/SplashScreen.js b/SplashScreen.js index 55956b19c2096c39516f49099e19938eb0ab7287..48455545aca5f46246efb08bb2c3edd71fa0602c 100644 --- a/SplashScreen.js +++ b/SplashScreen.js @@ -5,6 +5,7 @@ import { View, Text, Image, + Button, TouchableOpacity, Alert, } from 'react-native'; @@ -33,7 +34,7 @@ export default class SplashScreen extends Component<{}> { <View style={styles.SplashScreen_RootView}> <View style={styles.SplashScreen_ChildView}> <Image - source={require('D:\\BachelorOppgave\\FastTrackTaxi_ReactNative\\AppIcons\\fast_track_taxi_logo_ferdig.png')} + source={require('./AppIcons/fast_track_taxi_logo_ferdig.png')} style={{width: '100%', height: '100%', resizeMode: 'contain'}} /> </View> @@ -41,9 +42,26 @@ export default class SplashScreen extends Component<{}> { ); return ( <View style={styles.MainContainer}> - <Text style={{textAlign: 'center'}}> - Skulle komme til Velkommen sida, men fortsatt vet ikke hvordan :( - </Text> + <View style={styles.container}> + <View> + <Text style={styles.welcome}>Velkommen til</Text> + </View> + <Image + source={require('./AppIcons/fast_track_taxi_logo_ferdig.png')} + style={{width: 380, height: 380}} + /> + <Text style={styles.instructions}> + Les vår Personvern. Trykk "Bekreft og fortsett" for å akseptere + Servicevilkår. + </Text> + <View style={styles.button}> + <Button + onPress={this.onPressButton} + title="BEKREFT OG FORTSETT" + color="#009933" + /> + </View> + </View> {this.state.isVisible === true ? Splash_Screen : null} </View> ); @@ -69,7 +87,30 @@ const styles = StyleSheet.create({ SplashScreen_ChildView: { justifyContent: 'center', alignItems: 'center', - backgroundColor: '#00BCD4', + backgroundColor: '#009933', + flex: 1, + }, + container: { flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#FFFFFF', + }, + welcome: { + fontSize: 60, + textAlign: 'center', + color: '#000000', + }, + instructions: { + margin: 5, + textAlign: 'center', + color: '#000000', + fontSize: 25, + marginBottom: 5, + }, + button: { + margin: 20, + minWidth: '80%', + minHeight: '15%', }, }); diff --git a/WelcomeScreen.js b/WelcomeScreen.js index f3ab26bbc5aee39f28d7d4baff09860450c38b1d..b93368c8eb569a6c2cdafea5f42ec7952898406b 100644 --- a/WelcomeScreen.js +++ b/WelcomeScreen.js @@ -28,7 +28,7 @@ export default class App extends Component { <Text style={styles.welcome}>Velkommen til</Text> </View> <Image - source={require('D:\\BachelorOppgave\\FastTrackTaxi_ReactNative\\AppIcons\\fast_track_taxi_logo_ferdig.png')} + source={require('./fast_track_taxi_logo_ferdig.png')} style={{width: 380, height: 380}} /> <Text style={styles.instructions}>{instructions}</Text> diff --git a/android/app/build.gradle b/android/app/build.gradle index 599c4269688ce6c5899e3d636808650127ce048f..407c660ec997ba9b155d22b6daf5587a6f304092 100644 --- a/android/app/build.gradle +++ b/android/app/build.gradle @@ -179,7 +179,6 @@ android { } dependencies { - implementation project(':react-native-gesture-handler') implementation fileTree(dir: "libs", include: ["*.jar"]) implementation "com.facebook.react:react-native:+" // From node_modules diff --git a/android/app/src/main/java/com/fasttracktaxi_reactnative/MainApplication.java b/android/app/src/main/java/com/fasttracktaxi_reactnative/MainApplication.java index d67f5adb400cd27f02502f5cdaf7ef6e32229851..48ea8521f54aa4b160dc17edb10babf75103cf7d 100644 --- a/android/app/src/main/java/com/fasttracktaxi_reactnative/MainApplication.java +++ b/android/app/src/main/java/com/fasttracktaxi_reactnative/MainApplication.java @@ -4,7 +4,6 @@ import android.app.Application; import android.content.Context; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; -import com.swmansion.gesturehandler.react.RNGestureHandlerPackage; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.soloader.SoLoader; diff --git a/android/settings.gradle b/android/settings.gradle index 17ee03afba278012c741dc35bc50592f263ea585..3319f24ad6443dc0ea632cb75777b283cbf7862c 100644 --- a/android/settings.gradle +++ b/android/settings.gradle @@ -1,5 +1,3 @@ rootProject.name = 'FastTrackTaxi_ReactNative' -include ':react-native-gesture-handler' -project(':react-native-gesture-handler').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-gesture-handler/android') apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) include ':app' diff --git a/ios/Podfile b/ios/Podfile index 39f4ad6a92c0d1a265fe8ca7a3cfb70b525433cb..1b016dbcc44cb1fafd60e85e57028716e2fe3683 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -34,7 +34,6 @@ target 'FastTrackTaxi_ReactNative' do pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' - pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' target 'FastTrackTaxi_ReactNativeTests' do inherit! :search_paths diff --git a/test.js b/test.js new file mode 100644 index 0000000000000000000000000000000000000000..373d739d14dbf458e18fba7fd3a18c2c7e65ecba --- /dev/null +++ b/test.js @@ -0,0 +1,24 @@ +import 'react-native-gesture-handler'; +import * as React from 'react'; +import {NavigationContainer} from '@react-navigation/native'; +import {createStackNavigator} from '@react-navigation/stack'; +import SplashScreen from './SplashScreen'; +import WelcomeScreen from './WelcomeScreen'; + +const Stack = createStackNavigator(); + +function App() { + return ( + <NavigationContainer> + <Stack.Navigator mode="modal" headerMode="none"> + <Stack.Screen + name="SplashScreen" + component={SplashScreen} + options={{headerShow: false}} + /> + </Stack.Navigator> + </NavigationContainer> + ); +} + +export default App; diff --git a/verifying_mob_num.js b/verifying_mob_num.js new file mode 100644 index 0000000000000000000000000000000000000000..a59874574725ae508ce4418510acdba99c6b71e7 --- /dev/null +++ b/verifying_mob_num.js @@ -0,0 +1,142 @@ +import React, {Component} from 'react'; +import { + Platform, + StyleSheet, + Text, + View, + Image, + Button, + Alert, + TextInput, + TouchableOpacity, +} from 'react-native'; + +const instructions = Platform.select({ + ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', + android: + 'Les vår Personvern.\n' + + 'Trykk "Bekreft og fortsett" for å akseptere Servicevilkår.', +}); + +export default class App extends Component { + state = { + code: '', + }; + + handleCode = text => { + this.setState({code: text}); + }; + + verificationCode = code => { + Alert.alert( + 'Vi skal verifisere mobilnummeret ditt:', + '+47 ' + code + '\nEr det OK, eller vil du endre numeret?', + [ + { + text: 'Endre', + onPress: () => console.log('Endre ble valgt'), + style: 'cancel', + }, + {text: 'OK', onPress: () => console.log('OK ble valgt')}, + ], + {cancelable: false, onDismiss: () => {}}, + ); + }; + + render() { + return ( + <View style={{alignItems: 'center'}}> + <View> + <Text style={styles.topInfo}>Verfisering av +47 .......</Text> + <Text style={styles.info}> + Venter på en melding med engangskode sendt til +47 ....... + </Text> + <Text style={styles.wrongNum}>Feil nummer?</Text> + </View> + <View style={styles.row}> + <TextInput + style={styles.code} + placeholder="--- ---" + keyboardAppearance="default" + keyboardType="number-pad" + maxLength={6} + autoFocus={true} + onChangeText={this.handleTlf} + /> + </View> + <View style={styles.buttonContainer}> + <Button + title="Send SMS på nytt" + style={styles.button} + onPress={() => this.verificationCode(this.state.code)} + /> + </View> + <View style={styles.buttonContainer}> + <Button + title="Ring meg for verifisering" + style={styles.button} + onPress={() => this.verificationTlf(this.state.tlf)} + /> + </View> + </View> + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + buttonContainer: { + padding: 10, + justifyContent: 'space-between', + paddingHorizontal: 120, + }, + topInfo: { + marginTop: 20, + fontSize: 40, + textAlign: 'center', + color: '#4287f5', + }, + row: { + alignItems: 'center', + borderBottomColor: '#000000', + borderBottomWidth: 1, + width: 100, + }, + info: { + marginTop: 20, + fontSize: 30, + textAlign: 'center', + margin: 10, + color: '#000000', + }, + code: { + marginTop: 30, + color: '#3467eb', + marginBottom: 5, + fontSize: 35, + }, + button: { + fontSize: 20, + alignItems: 'center', + //backgroundColor: '#009933', + padding: 10, + }, + buttonText: { + justifyContent: 'center', + fontSize: 30, + alignItems: 'center', + backgroundColor: '#009933', + padding: 8, + }, + wrongNum: { + marginTop: 10, + fontSize: 30, + textAlign: 'center', + margin: 10, + color: 'blue', + textDecorationLine: 'underline', + }, +});