Skip to content
Snippets Groups Projects
Commit 79f941ad authored by karoljd's avatar karoljd
Browse files

Removed gestureHandler from Android and iOs.

Changed App.js, SplashScreen.js, WelcomeScreen.js.
MovingBetweenScreens.js is deprecated.
Created Registrering.js, test.js (just to test, will be removed), verifying_mob_num.js
parent b110309e
No related branches found
No related tags found
No related merge requests found
Pipeline #73401 failed
import 'react-native-gesture-handler'; import * as React from 'react';
import React, {Component} from 'react';
import {NavigationContainer} from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import { import SplashScreen from './SplashScreen';
Platform,
StyleSheet,
View,
Text,
Image,
TouchableOpacity,
Alert,
Button,
} from 'react-native';
const Stack = createStackNavigator(); const Stack = createStackNavigator();
const instructions = Platform.select({ function App() {
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 ( return (
<View style={styles.MainContainer}> <NavigationContainer>
<View style={styles.container}> <Stack.Navigator mode="modal" headerMode="none">
<View> <Stack.Screen
<Text style={styles.welcome}>Velkommen til</Text> name="SplashScreen"
</View> component={SplashScreen}
<Image options={{headerShow: false}}
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> </Stack.Navigator>
{this.state.isVisible === true ? Splash_Screen : null} </NavigationContainer>
</View>
); );
} }
}
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: { export default App;
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,
},
});
/*
* Deprecated since 09.03.2020, Karol
*/
import React from 'react'; import React from 'react';
import {View, Text, Button} from 'react-native'; import {View, Text, Button} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation'; import {createStackNavigator, createAppContainer} from 'react-navigation';
......
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,
},
});
...@@ -5,6 +5,7 @@ import { ...@@ -5,6 +5,7 @@ import {
View, View,
Text, Text,
Image, Image,
Button,
TouchableOpacity, TouchableOpacity,
Alert, Alert,
} from 'react-native'; } from 'react-native';
...@@ -33,7 +34,7 @@ export default class SplashScreen extends Component<{}> { ...@@ -33,7 +34,7 @@ export default class SplashScreen extends Component<{}> {
<View style={styles.SplashScreen_RootView}> <View style={styles.SplashScreen_RootView}>
<View style={styles.SplashScreen_ChildView}> <View style={styles.SplashScreen_ChildView}>
<Image <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'}} style={{width: '100%', height: '100%', resizeMode: 'contain'}}
/> />
</View> </View>
...@@ -41,9 +42,26 @@ export default class SplashScreen extends Component<{}> { ...@@ -41,9 +42,26 @@ export default class SplashScreen extends Component<{}> {
); );
return ( return (
<View style={styles.MainContainer}> <View style={styles.MainContainer}>
<Text style={{textAlign: 'center'}}> <View style={styles.container}>
Skulle komme til Velkommen sida, men fortsatt vet ikke hvordan :( <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> </Text>
<View style={styles.button}>
<Button
onPress={this.onPressButton}
title="BEKREFT OG FORTSETT"
color="#009933"
/>
</View>
</View>
{this.state.isVisible === true ? Splash_Screen : null} {this.state.isVisible === true ? Splash_Screen : null}
</View> </View>
); );
...@@ -69,7 +87,30 @@ const styles = StyleSheet.create({ ...@@ -69,7 +87,30 @@ const styles = StyleSheet.create({
SplashScreen_ChildView: { SplashScreen_ChildView: {
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
backgroundColor: '#00BCD4', backgroundColor: '#009933',
flex: 1, 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%',
},
}); });
...@@ -28,7 +28,7 @@ export default class App extends Component { ...@@ -28,7 +28,7 @@ export default class App extends Component {
<Text style={styles.welcome}>Velkommen til</Text> <Text style={styles.welcome}>Velkommen til</Text>
</View> </View>
<Image <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}} style={{width: 380, height: 380}}
/> />
<Text style={styles.instructions}>{instructions}</Text> <Text style={styles.instructions}>{instructions}</Text>
......
...@@ -179,7 +179,6 @@ android { ...@@ -179,7 +179,6 @@ android {
} }
dependencies { dependencies {
implementation project(':react-native-gesture-handler')
implementation fileTree(dir: "libs", include: ["*.jar"]) implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules implementation "com.facebook.react:react-native:+" // From node_modules
......
...@@ -4,7 +4,6 @@ import android.app.Application; ...@@ -4,7 +4,6 @@ import android.app.Application;
import android.content.Context; import android.content.Context;
import com.facebook.react.PackageList; import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication; import com.facebook.react.ReactApplication;
import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage; import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader; import com.facebook.soloader.SoLoader;
......
rootProject.name = 'FastTrackTaxi_ReactNative' 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) apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app' include ':app'
...@@ -34,7 +34,6 @@ target 'FastTrackTaxi_ReactNative' do ...@@ -34,7 +34,6 @@ target 'FastTrackTaxi_ReactNative' do
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 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 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler'
target 'FastTrackTaxi_ReactNativeTests' do target 'FastTrackTaxi_ReactNativeTests' do
inherit! :search_paths inherit! :search_paths
......
test.js 0 → 100644
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;
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 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',
},
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment