Skip to content

Commit c3b52d6

Browse files
AndroConsisAndroConsis
committed
Initial commit
Horizontal Animate with Animated API
0 parents  commit c3b52d6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+12718
-0
lines changed

‎.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react-native"]
3+
}

‎.buckconfig

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
2+
[android]
3+
target = Google Inc.:Google APIs:23
4+
5+
[maven_repositories]
6+
central = https://repo1.maven.org/maven2

‎.flowconfig

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
[ignore]
2+
; We fork some components by platform
3+
.*/*[.]android.js
4+
5+
; Ignore "BUCK" generated dirs
6+
<PROJECT_ROOT>/\.buckd/
7+
8+
; Ignore unexpected extra "@providesModule"
9+
.*/node_modules/.*/node_modules/fbjs/.*
10+
11+
; Ignore duplicate module providers
12+
; For RN Apps installed via npm, "Libraries" folder is inside
13+
; "node_modules/react-native" but in the source repo it is in the root
14+
.*/Libraries/react-native/React.js
15+
16+
; Ignore polyfills
17+
.*/Libraries/polyfills/.*
18+
19+
; Ignore metro
20+
.*/node_modules/metro/.*
21+
22+
[include]
23+
24+
[libs]
25+
node_modules/react-native/Libraries/react-native/react-native-interface.js
26+
node_modules/react-native/flow/
27+
node_modules/react-native/flow-github/
28+
29+
[options]
30+
emoji=true
31+
32+
module.system=haste
33+
34+
munge_underscores=true
35+
36+
module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
37+
38+
module.file_ext=.js
39+
module.file_ext=.jsx
40+
module.file_ext=.json
41+
module.file_ext=.native.js
42+
43+
suppress_type=$FlowIssue
44+
suppress_type=$FlowFixMe
45+
suppress_type=$FlowFixMeProps
46+
suppress_type=$FlowFixMeState
47+
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
50+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
51+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
52+
53+
[version]
54+
^0.67.0

‎.gitattributes

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*.pbxproj -text

‎.gitignore

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# OSX
2+
#
3+
.DS_Store
4+
5+
# Xcode
6+
#
7+
build/
8+
*.pbxuser
9+
!default.pbxuser
10+
*.mode1v3
11+
!default.mode1v3
12+
*.mode2v3
13+
!default.mode2v3
14+
*.perspectivev3
15+
!default.perspectivev3
16+
xcuserdata
17+
*.xccheckout
18+
*.moved-aside
19+
DerivedData
20+
*.hmap
21+
*.ipa
22+
*.xcuserstate
23+
project.xcworkspace
24+
25+
# Android/IntelliJ
26+
#
27+
build/
28+
.idea
29+
.gradle
30+
local.properties
31+
*.iml
32+
33+
# node.js
34+
#
35+
node_modules/
36+
npm-debug.log
37+
yarn-error.log
38+
39+
# BUCK
40+
buck-out/
41+
\.buckd/
42+
*.keystore
43+
44+
# fastlane
45+
#
46+
# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
47+
# screenshots whenever they are needed.
48+
# For more information about the recommended setup visit:
49+
# https://docs.fastlane.tools/best-practices/source-control/
50+
51+
*/fastlane/report.xml
52+
*/fastlane/Preview.html
53+
*/fastlane/screenshots
54+
55+
# Bundle artifact
56+
*.jsbundle

‎.watchmanconfig

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎App.js

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
* @flow
5+
*/
6+
7+
import React, { Component } from "react";
8+
import {
9+
Platform,
10+
StyleSheet,
11+
Text,
12+
View,
13+
TouchableOpacity,
14+
Dimensions,
15+
Animated,
16+
Easing,
17+
Image
18+
} from "react-native";
19+
20+
const quotesArray = [
21+
["Stay Hungry. Stay Foolish.", "Steve Jobs"],
22+
["Good Artists Copy, Great Artists Steal.", "Pablo Picasso"],
23+
["Argue with idiots, and you become an idiot.", "Paul Graham"],
24+
["Be yourself; everyone else is already taken.", "Oscar Wilde"],
25+
["Simplicity is the ultimate sophistication.", "Leonardo Da Vinci"]
26+
];
27+
28+
const { width, height } = Dimensions.get("window");
29+
export default class App extends Component {
30+
constructor() {
31+
super();
32+
this.state = {
33+
data: quotesArray,
34+
currentShowingIndex: 0,
35+
translateX: new Animated.Value(0)
36+
};
37+
this.animateCard = this.animateCard.bind(this);
38+
}
39+
40+
animateCard = direction => {
41+
let{ currentShowingIndex, data} = this.state;
42+
if (direction == 'left') {
43+
if (currentShowingIndex == (data.length - 1)) return;
44+
if (currentShowingIndex >= 0) currentShowingIndex++;
45+
this.setState({ currentShowingIndex })
46+
} else {
47+
if (currentShowingIndex == 0) return;
48+
if (currentShowingIndex <= data.length) currentShowingIndex--;
49+
this.setState({currentShowingIndex});
50+
}
51+
52+
Animated.timing(this.state.translateX, {
53+
toValue: -width * currentShowingIndex,
54+
useNativeDriver: true,
55+
duration: 700,
56+
easing: Easing.elastic()
57+
}).start();
58+
};
59+
60+
render() {
61+
const { translateX } = this.state;
62+
return (
63+
<View style={styles.container}>
64+
<View
65+
style={styles.backgroundView}
66+
/>
67+
<View
68+
style={{
69+
flex: 1,
70+
backgroundColor: "#e8e8e8",
71+
width: 700,
72+
transform: [{ rotate: "165deg" }, { translateX: 100 }]
73+
}}
74+
/>
75+
<View
76+
style={{
77+
flex: 1,
78+
position: "absolute",
79+
top: 0,
80+
right: 0,
81+
bottom: 0,
82+
left: 0,
83+
backgroundColor: "transparent"
84+
}}
85+
>
86+
<View
87+
style={{
88+
flex: 8,
89+
flexDirection: "row",
90+
width: width * this.state.data.length,
91+
marginTop: 20
92+
}}
93+
>
94+
{this.state.data.map(item => {
95+
return <Animated.View
96+
style={{
97+
flex: 1,
98+
backgroundColor: "white",
99+
borderRadius: 5,
100+
shadowOffset: { width: 0, height: 4 },
101+
shadowOpacity: 0.3,
102+
shadowRadius: 5,
103+
marginHorizontal: 40,
104+
justifyContent: 'center',
105+
alignItems: 'center',
106+
marginVertical: 40,
107+
transform: [
108+
{
109+
translateX: translateX
110+
}
111+
]
112+
}}
113+
><Text style={styles.quoteText}>{item[0]}</Text>
114+
<Text style={styles.quoteAuthorText}>- {item[1]}</Text></Animated.View>
115+
})}
116+
</View>
117+
<View
118+
style={{
119+
flex: 2,
120+
flexDirection: "row",
121+
backgroundColor: "transparent",
122+
justifyContent: "center"
123+
}}
124+
>
125+
<TouchableOpacity
126+
style={styles.button}
127+
onPressIn={() => this.animateCard("right")}
128+
>
129+
<View
130+
style={styles.buttonInnerView}
131+
>
132+
<Text
133+
style={{
134+
flex: 1,
135+
alignItems: "center",
136+
textAlign: "center",
137+
color: "white",
138+
fontSize: 18,
139+
fontWeight: "bold"
140+
}}
141+
>
142+
LEFT
143+
</Text>
144+
</View>
145+
</TouchableOpacity>
146+
<TouchableOpacity
147+
style={styles.button}
148+
onPressIn={() => this.animateCard("left")}
149+
>
150+
<View
151+
style={styles.buttonInnerView}
152+
>
153+
<Text
154+
style={{
155+
flex: 1,
156+
alignItems: "center",
157+
textAlign: "center",
158+
color: "white",
159+
fontSize: 18,
160+
fontWeight: "bold"
161+
}}
162+
>
163+
RIGHT
164+
</Text>
165+
</View>
166+
</TouchableOpacity>
167+
</View>
168+
</View>
169+
</View>
170+
);
171+
}
172+
}
173+
174+
const styles = StyleSheet.create({
175+
container: {
176+
flex: 1,
177+
backgroundColor: "#EFEFEF"
178+
},
179+
quoteText: {
180+
fontFamily: 'GillSans-Light',
181+
fontSize: 24,
182+
padding: 20,
183+
color: '#212121'
184+
},
185+
quoteAuthorText: {
186+
fontSize: 16,
187+
padding: 20,
188+
fontFamily: 'GillSans-SemiBold',
189+
color: 'gray'
190+
},
191+
button: {
192+
height: 64,
193+
width: width / 2 - 55,
194+
margin: 15
195+
},
196+
buttonInnerView: {
197+
flex: 1,
198+
justifyContent: "center",
199+
flexDirection: "row",
200+
alignItems: "center",
201+
borderRadius: 10,
202+
backgroundColor: "rgba(209, 122, 173, .4)"
203+
},
204+
backgroundView: {
205+
flex: 1,
206+
backgroundColor: "#fcfdf0",
207+
width: 700,
208+
transform: [{ rotate: "165deg" }, { translateX: 100 }]
209+
}
210+
});

0 commit comments

Comments
 (0)