Skip to content

Commit 55b7d37

Browse files
pandermattpandermatt
committed
Add swipe cards
1 parent eacf688 commit 55b7d37

File tree

8 files changed

+160
-75
lines changed

8 files changed

+160
-75
lines changed

Diff for: ‎constants/Settings.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export default {
2-
backend: "http://160.85.133.159:8090",
2+
backend: "http://160.85.132.162:8090",
33
};

Diff for: ‎navigation/MainTabNavigator.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import SettingsScreen from '../screens/SettingsScreen';
1010
import JobScreen from "../screens/JobScreen";
1111

1212
const QuestionStack = createStackNavigator({
13-
Questions: QuestionScreen,
13+
Question: QuestionScreen,
1414
});
1515

1616
QuestionStack.navigationOptions = {
@@ -46,7 +46,7 @@ const SettingsStack = createStackNavigator({
4646
});
4747

4848
SettingsStack.navigationOptions = {
49-
tabBarLabel: 'Settings',
49+
tabBarLabel: 'Einstellungen',
5050
tabBarIcon: ({ focused }) => (
5151
<TabBarIcon
5252
focused={focused}

Diff for: ‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
1919
"react-native-elements": "^1.1.0",
2020
"react-native-paper": "^2.15.1",
21+
"react-native-swipe-cards": "^0.1.1",
2122
"react-native-ui-kitten": "^3.1.2",
2223
"react-native-vector-icons": "^6.4.2",
2324
"react-navigation": "^3.0.9"

Diff for: ‎screens/JobScreen.js

+2-69
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,8 @@ import {
88
TouchableOpacity,
99
View,
1010
} from 'react-native';
11-
import { WebBrowser } from 'expo';
1211

13-
import { MonoText } from '../components/StyledText';
14-
import {Button} from "react-native-elements";
12+
import SwipeCards from './SwipeCards.js'
1513

1614
export default class HomeScreen extends React.Component {
1715
static navigationOptions = {
@@ -21,75 +19,10 @@ export default class HomeScreen extends React.Component {
2119
render() {
2220
return (
2321
<View style={styles.container}>
24-
<ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
25-
<View style={styles.welcomeContainer}>
26-
<Image
27-
source={
28-
__DEV__
29-
? require('../assets/images/robot-dev.png')
30-
: require('../assets/images/robot-prod.png')
31-
}
32-
style={styles.welcomeImage}
33-
/>
34-
</View>
35-
36-
<View style={styles.getStartedContainer}>
37-
{this._maybeRenderDevelopmentModeWarning()}
38-
39-
<Text style={styles.getStartedText}>Get started by opening</Text>
40-
41-
<View style={[styles.codeHighlightContainer, styles.homeScreenFilename]}>
42-
<MonoText style={styles.codeHighlightText}>screens/HomeScreen.js</MonoText>
43-
</View>
44-
45-
<Text style={styles.getStartedText}>
46-
Change this text and your app will automatically reload.
47-
</Text>
48-
</View>
49-
50-
<View style={styles.helpContainer}>
51-
<TouchableOpacity onPress={this._handleHelpPress} style={styles.helpLink}>
52-
<Text style={styles.helpLinkText}>Help, it didn’t automatically reload!</Text>
53-
</TouchableOpacity>
54-
</View>
55-
</ScrollView>
56-
22+
<SwipeCards style={{flex: 1}} navigator={this.props.navigation} test={"hey"} />
5723
</View>
5824
);
5925
}
60-
61-
_maybeRenderDevelopmentModeWarning() {
62-
if (__DEV__) {
63-
const learnMoreButton = (
64-
<Text onPress={this._handleLearnMorePress} style={styles.helpLinkText}>
65-
Learn more
66-
</Text>
67-
);
68-
69-
return (
70-
<Text style={styles.developmentModeText}>
71-
Development mode is enabled, your app will be slower but you can use useful development
72-
tools. {learnMoreButton}
73-
</Text>
74-
);
75-
} else {
76-
return (
77-
<Text style={styles.developmentModeText}>
78-
You are not in development mode, your app will run at full speed.
79-
</Text>
80-
);
81-
}
82-
}
83-
84-
_handleLearnMorePress = () => {
85-
WebBrowser.openBrowserAsync('https://docs.expo.io/versions/latest/guides/development-mode');
86-
};
87-
88-
_handleHelpPress = () => {
89-
WebBrowser.openBrowserAsync(
90-
'https://docs.expo.io/versions/latest/guides/up-and-running.html#can-t-see-your-changes'
91-
);
92-
};
9326
}
9427

9528
const styles = StyleSheet.create({

Diff for: ‎screens/QuestionScreen.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import {
1414
import Settings from '../constants/Settings';
1515

1616
import {ProgressBar, Colors, Snackbar} from 'react-native-paper';
17-
import HomeScreen from "./HomeScreen";
1817

1918
let currentUser;
2019

@@ -66,7 +65,7 @@ export default class QuestionScreen extends React.Component {
6665
title="Zu meinen Jobs"
6766
type="outline"
6867
onPress={() =>
69-
this.props.navigation.navigate('Job')
68+
this.props.navigator.navigate('Job')
7069
}
7170
/>
7271
}

Diff for: ‎screens/SettingsScreen.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { ExpoConfigView } from '@expo/samples';
33

44
export default class SettingsScreen extends React.Component {
55
static navigationOptions = {
6-
title: 'app.json',
6+
title: 'Einstellungen',
77
};
88

99
render() {

Diff for: ‎screens/SwipeCards.js

+139
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
'use strict';
2+
3+
import React from 'react';
4+
import {StyleSheet, Text, View, Image} from 'react-native';
5+
import {
6+
Button,
7+
} from 'react-native-elements';
8+
9+
import SwipeCards from 'react-native-swipe-cards';
10+
11+
class Card extends React.Component {
12+
constructor(props) {
13+
super(props);
14+
}
15+
16+
render() {
17+
return (
18+
<View style={styles.card}>
19+
<Image style={styles.thumbnail} source={{uri: this.props.image}} />
20+
<Text style={styles.text}>This is card {this.props.name}</Text>
21+
</View>
22+
)
23+
}
24+
}
25+
26+
class NoMoreCards extends React.Component {
27+
constructor(props) {
28+
super(props);
29+
}
30+
31+
render() {
32+
return (
33+
<View style={styles.noMoreCards}>
34+
<Text>Es sind leider keine Jobs mehr verfügbar</Text>
35+
<Button
36+
title="Weiter suchen"
37+
type="outline"
38+
onPress={() =>
39+
this.props.navigator.navigate('Question')
40+
}
41+
/>
42+
</View>
43+
)
44+
}
45+
}
46+
47+
const cards = [
48+
{name: '1', image: 'https://images.pexels.com/photos/567633/pexels-photo-567633.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'},
49+
{name: '2', image: 'https://images.pexels.com/photos/1161465/pexels-photo-1161465.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'},
50+
{name: '3', image: 'https://images.pexels.com/photos/327540/pexels-photo-327540.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'},
51+
{name: '4', image: 'https://images.pexels.com/photos/1249158/pexels-photo-1249158.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'},
52+
]
53+
54+
const cards2 = [
55+
{name: '10', image: 'https://images.pexels.com/photos/684387/pexels-photo-684387.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500'},
56+
]
57+
58+
export default class App extends React.Component {
59+
constructor(props) {
60+
super(props);
61+
this.state = {
62+
cards: cards,
63+
outOfCards: false
64+
}
65+
}
66+
67+
handleYup (card) {
68+
console.log("Gefällt mir")
69+
}
70+
71+
handleNope (card) {
72+
console.log("Gefällt mir nicht")
73+
}
74+
75+
cardRemoved (index) {
76+
console.log(`The index is ${index}`);
77+
78+
let CARD_REFRESH_LIMIT = 3
79+
80+
if (this.state.cards.length - index <= CARD_REFRESH_LIMIT + 1) {
81+
console.log(`There are only ${this.state.cards.length - index - 1} cards left.`);
82+
83+
if (!this.state.outOfCards) {
84+
console.log(`Adding ${cards2.length} more cards`)
85+
86+
this.setState({
87+
cards: this.state.cards.concat(cards2),
88+
outOfCards: true
89+
})
90+
}
91+
92+
}
93+
94+
}
95+
96+
render() {
97+
return (
98+
<SwipeCards
99+
cards={this.state.cards}
100+
loop={false}
101+
102+
renderCard={(cardData) => <Card {...cardData} />}
103+
renderNoMoreCards={() => <NoMoreCards navigator={this.props.navigator} />}
104+
showYup={true}
105+
showNope={true}
106+
107+
handleYup={this.handleYup}
108+
handleNope={this.handleNope}
109+
cardRemoved={this.cardRemoved.bind(this)}
110+
/>
111+
)
112+
}
113+
}
114+
115+
const styles = StyleSheet.create({
116+
card: {
117+
alignItems: 'center',
118+
borderRadius: 5,
119+
overflow: 'hidden',
120+
borderColor: 'grey',
121+
backgroundColor: 'white',
122+
borderWidth: 1,
123+
elevation: 1,
124+
},
125+
thumbnail: {
126+
width: 300,
127+
height: 300,
128+
},
129+
text: {
130+
fontSize: 20,
131+
paddingTop: 10,
132+
paddingBottom: 10
133+
},
134+
noMoreCards: {
135+
flex: 1,
136+
justifyContent: 'center',
137+
alignItems: 'center',
138+
}
139+
})

Diff for: ‎yarn.lock

+13
Original file line numberDiff line numberDiff line change
@@ -2031,6 +2031,11 @@ ci-info@^1.5.0:
20312031
resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
20322032
integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
20332033

2034+
clamp@^1.0.1:
2035+
version "1.0.1"
2036+
resolved "https://registry.yarnpkg.com/clamp/-/clamp-1.0.1.tgz#66a0e64011816e37196828fdc8c8c147312c8634"
2037+
integrity sha1-ZqDmQBGBbjcZaCj9yMjBRzEshjQ=
2038+
20342039
class-utils@^0.3.5:
20352040
version "0.3.6"
20362041
resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -6205,6 +6210,14 @@ [email protected]:
62056210
lodash "^4.16.6"
62066211
pegjs "^0.10.0"
62076212

6213+
react-native-swipe-cards@^0.1.1:
6214+
version "0.1.1"
6215+
resolved "https://registry.yarnpkg.com/react-native-swipe-cards/-/react-native-swipe-cards-0.1.1.tgz#25a31b450f2616f3a25a101c9fc37ccbb2deb3e2"
6216+
integrity sha1-JaMbRQ8mFvOiWhAcn8N8y7Les+I=
6217+
dependencies:
6218+
clamp "^1.0.1"
6219+
prop-types "^15.6.0"
6220+
62086221
react-native-tab-view@^1.0.0, react-native-tab-view@^1.2.0:
62096222
version "1.3.4"
62106223
resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.3.4.tgz#63fc3eb09652651d0ea0e016cff0f3a5e535f4de"

0 commit comments

Comments
 (0)