Skip to content

Commit 8ca0828

Browse files
czystylczystyl
authored
Merge pull request #8 from Karthik-B-06/develop
2 parents 507e8c6 + cfa2290 commit 8ca0828

Some content is hidden

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

68 files changed

+9749
-17
lines changed

‎README.md‎

Lines changed: 97 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,120 @@
1-
# REACT-NATIVE-REANIMATED-FLIP
1+
<div align="center">
2+
3+
[![npm](https://badgen.net/npm/v/react-native-flip)](https://www.npmjs.com/package/react-native-flip) [![npm](https://badgen.net/npm/dt/react-native-flip)](https://www.npmjs.com/package/react-native-flip)
4+
5+
<h1>React Native Reanimated Flip Card</h1>
26

3-
![](gif/flip.gif)
7+
<img width="auto" height="500" src="./gif/flip.gif">
8+
9+
</div>
410

511
# Install
612

713
```sh
8-
yarn add react-native-flip
14+
yarn add react-native-flip
15+
# or
16+
npm i react-native-flip
917
```
1018

19+
> :warning: You need to install [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/next/installation/) and follow their installation instructions.
20+
1121
# Usage
1222

1323
```js
1424
import FlipCard from "react-native-flip"
1525

1626
const make = () => {
27+
const Front = (
28+
<View
29+
style={{
30+
backgroundColor: "#ed8936",
31+
alignItems: "center",
32+
padding: 100,
33+
borderRadius: 12,
34+
}}
35+
>
36+
<Text style={{ fontSize: 18, color: "black" }}>Front</Text>
37+
<TouchableOpacity
38+
onPress={changeSide}
39+
style={{
40+
padding: 10,
41+
marginTop: 20,
42+
backgroundColor: "white",
43+
borderRadius: 12,
44+
}}
45+
>
46+
<Text>Click here to Flip</Text>
47+
</TouchableOpacity>
48+
</View>
49+
)
50+
const Back = (
51+
<View
52+
style={{
53+
backgroundColor: "#007AFF",
54+
alignItems: "center",
55+
padding: 100,
56+
borderRadius: 12,
57+
}}
58+
>
59+
<Text style={{ fontSize: 18, color: "white" }}>Back</Text>
60+
<TouchableOpacity
61+
onPress={changeSide}
62+
style={{
63+
padding: 10,
64+
marginTop: 20,
65+
backgroundColor: "white",
66+
borderRadius: 12,
67+
}}
68+
>
69+
<Text>Click here to Flip</Text>
70+
</TouchableOpacity>
71+
</View>
72+
)
1773
return (
18-
<FlipCard
19-
side={0}
20-
front={<Text>Front component</Text>}
21-
back={<Text>Back component</Text>}
22-
/>
74+
<SafeAreaView style={styles.container}>
75+
<Text style={styles.textStyle}>Hello, World</Text>
76+
<Text style={styles.textStyle}>React Native Reanimated Flip Card</Text>
77+
<Button
78+
title={`Change rotation. The card rotation is: ${rotate}`}
79+
onPress={() => {
80+
setRotate((rotation) => (rotation === "X" ? "Y" : "X"))
81+
}}
82+
/>
83+
<Button title={`Flip: ${side}`} onPress={changeSide} />
84+
<FlipCard
85+
side={side}
86+
rotate={rotate}
87+
style={styles.flipContainer}
88+
front={Front}
89+
back={Back}
90+
/>
91+
</SafeAreaView>
2392
)
2493
}
2594
```
2695

96+
## :wrench: Props
97+
98+
| Name | Description | Required | Type | Default |
99+
| ----------- | --------------------------------------- | -------- | ------------- | ------- |
100+
| perspective | Perspective of rotation | NO | Number | 1200 |
101+
| side | A value indicating Front(1) or Back(0) | YES | <1, 0> | - |
102+
| rotate | A value indicating the axis of rotation | NO | <'Y', 'X'> | "Y" |
103+
| style | Container Style | NO | ViewStyle | - |
104+
| front | React component in Front Side | YES | React.Element | - |
105+
| back | React component in Back Side | YES | React.Element | - |
106+
107+
108+
## :camera: Screenhots
109+
110+
| iOS | Android |
111+
|-----|---------|
112+
|<img width="auto" height="500" src="./gif/ios.gif">|<img width="auto" height="500" src="./gif/android.gif">|
113+
27114
# Try it out
28115

29116
You can also try out the [example app](https://snack.expo.io/@pzatorski/react-native-flip-example) with Expo.
30117

118+
You can also try the [React Native App](https://github.com/Karthik-B-06/react-native-reanimated-flip/tree/rn-example-with-better-readme/rn-example/RNFlip).
119+
31120
The source code for the example app is under [/examples](https://github.com/czystyl/react-native-reanimated-flip/tree/develop/examples) folder.

‎gif/android.gif‎

1.03 MB
Loading

‎gif/ios.gif‎

1.12 MB
Loading

‎rn-example/RNFlip/.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

‎rn-example/RNFlip/.eslintrc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
module.exports = {
2+
root: true,
3+
extends: '@react-native-community',
4+
};

‎rn-example/RNFlip/.flowconfig‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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 polyfills
9+
node_modules/react-native/Libraries/polyfills/.*
10+
11+
; These should not be required directly
12+
; require from fbjs/lib instead: require('fbjs/lib/warning')
13+
node_modules/warning/.*
14+
15+
; Flow doesn't support platforms
16+
.*/Libraries/Utilities/LoadingView.js
17+
18+
[untyped]
19+
.*/node_modules/@react-native-community/cli/.*/.*
20+
21+
[include]
22+
23+
[libs]
24+
node_modules/react-native/interface.js
25+
node_modules/react-native/flow/
26+
27+
[options]
28+
emoji=true
29+
30+
esproposal.optional_chaining=enable
31+
esproposal.nullish_coalescing=enable
32+
33+
module.file_ext=.js
34+
module.file_ext=.json
35+
module.file_ext=.ios.js
36+
37+
munge_underscores=true
38+
39+
module.name_mapper='^react-native/\(.*\)$' -> '<PROJECT_ROOT>/node_modules/react-native/\1'
40+
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\)$' -> '<PROJECT_ROOT>/node_modules/react-native/Libraries/Image/RelativeImageStub'
41+
42+
suppress_type=$FlowIssue
43+
suppress_type=$FlowFixMe
44+
suppress_type=$FlowFixMeProps
45+
suppress_type=$FlowFixMeState
46+
47+
suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)
48+
suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native\\(_ios\\)?_\\(oss\\|fb\\)[a-z,_]*\\)?)\\)?:? #[0-9]+
49+
suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
50+
51+
[lints]
52+
sketchy-null-number=warn
53+
sketchy-null-mixed=warn
54+
sketchy-number=warn
55+
untyped-type-import=warn
56+
nonstrict-import=warn
57+
deprecated-type=warn
58+
unsafe-getters-setters=warn
59+
unnecessary-invariant=warn
60+
signature-verification-failure=warn
61+
deprecated-utility=error
62+
63+
[strict]
64+
deprecated-type
65+
nonstrict-import
66+
sketchy-null
67+
unclear-type
68+
unsafe-getters-setters
69+
untyped-import
70+
untyped-type-import
71+
72+
[version]
73+
^0.122.0

‎rn-example/RNFlip/.gitattributes‎

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

‎rn-example/RNFlip/.gitignore‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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+
24+
# Android/IntelliJ
25+
#
26+
build/
27+
.idea
28+
.gradle
29+
local.properties
30+
*.iml
31+
32+
# node.js
33+
#
34+
node_modules/
35+
npm-debug.log
36+
yarn-error.log
37+
38+
# BUCK
39+
buck-out/
40+
\.buckd/
41+
*.keystore
42+
!debug.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
57+
58+
# CocoaPods
59+
/ios/Pods/

‎rn-example/RNFlip/.prettierrc.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
bracketSpacing: false,
3+
jsxBracketSameLine: true,
4+
singleQuote: true,
5+
trailingComma: 'all',
6+
};

‎rn-example/RNFlip/.watchmanconfig‎

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

0 commit comments

Comments
 (0)