├── anim.gif
├── .idea
├── markdown-navigator
│ └── profiles_settings.xml
├── vcs.xml
├── modules.xml
├── react-animated-form.iml
├── markdown-navigator.xml
└── workspace.xml
├── package.json
├── index.js
└── readme.md
/anim.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/maphongba008/react-native-animated-form/HEAD/anim.gif
--------------------------------------------------------------------------------
/.idea/markdown-navigator/profiles_settings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/react-animated-form.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-native-animated-form",
3 | "version": "0.0.7",
4 | "description": "Animated form for both Android and iOS",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/maphongba008/react-native-animated-form.git"
12 | },
13 | "dependencies": {
14 | "prop-types": "^15.5.9"
15 | },
16 | "peerDependencies": {
17 | "react": "*",
18 | "react-native": "*"
19 | },
20 | "keywords": [
21 | "react",
22 | "react",
23 | "native",
24 | "animated",
25 | "form"
26 | ],
27 | "author": "aaron_ta",
28 | "license": "MIT",
29 | "bugs": {
30 | "url": "https://github.com/maphongba008/react-native-animated-form/issues"
31 | },
32 | "homepage": "https://github.com/maphongba008/react-native-animated-form#readme"
33 | }
34 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types'
2 | import React, {Component} from 'react';
3 | import { View, Animated} from 'react-native';
4 |
5 |
6 | export default class AnimatedForm extends React.PureComponent {
7 | constructor(props) {
8 | super(props);
9 | const numberOfChildren = React.Children.toArray(props.children).length;
10 | this.state = {
11 | animations: [...new Array(numberOfChildren)].map(a => new Animated.Value(0)),
12 | }
13 | }
14 |
15 | componentDidMount() {
16 | const animated = this.state.animations.map(animation => {
17 | return Animated.timing(animation, {
18 | toValue: 1,
19 | duration: 200,
20 | useNativeDriver: true
21 | })
22 | });
23 | Animated.stagger(this.props.delay, animated).start(() => {
24 | // fix text input opacity was set to 0
25 | this.forceUpdate();
26 | });
27 | }
28 |
29 | render() {
30 | const children = React.Children.toArray(this.props.children);
31 | const {animations} = this.state;
32 | const elements = children.map((element, index) => {
33 | const translateY = animations[index].interpolate({
34 | inputRange: [0, 1],
35 | outputRange: [-this.props.distance, 0]
36 | });
37 | const style = [element.props.style, {
38 | opacity: animations[index],
39 | transform: [
40 | {
41 | translateY
42 | }
43 | ]
44 | }];
45 | return React.cloneElement(element, {style});
46 | });
47 |
48 | return {elements}
49 | }
50 |
51 | }
52 |
53 | AnimatedForm.defaultProps = {
54 | delay: 100,
55 | distance: 5
56 | };
57 |
58 | AnimatedForm.propTypes = {
59 | children: PropTypes.any,
60 | delay: PropTypes.number,
61 | distance: PropTypes.number,
62 | style: PropTypes.any,
63 | };
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # react-native-animated-form
2 | Animated form for both Android and iOS
3 |
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm install --save react-native-animated-form
9 | ```
10 |
11 | ## Demo
12 | 
13 |
14 | ## Usage
15 |
16 | ```javascript
17 | import React, {Component} from 'react';
18 | import {
19 | StyleSheet,
20 | Text,
21 | View,
22 | Animated,
23 | TextInput,
24 | TouchableOpacity,
25 | Image
26 | } from 'react-native';
27 |
28 | import AnimatedForm from 'react-native-animated-form';
29 | import Background from './bg.jpg';
30 |
31 | const AnimatedInput = Animated.createAnimatedComponent(TextInput);
32 | export default class App extends Component {
33 | render() {
34 | return (
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 | Register
46 |
47 |
48 |
49 |
50 | );
51 | }
52 | }
53 |
54 | const styles = StyleSheet.create({
55 | container: {
56 | flex: 1,
57 | justifyContent: 'center',
58 | alignItems: 'center',
59 | backgroundColor: '#919191',
60 | },
61 | text: {
62 | width: 250,
63 | height: 35,
64 | paddingHorizontal: 10,
65 | marginVertical: 5,
66 | borderWidth: 1,
67 | borderRadius: 5,
68 | borderColor: "#FFF",
69 | color: "#333",
70 | backgroundColor: "#FFF",
71 | },
72 | buttonView: {
73 | height: 40,
74 | marginTop: 10,
75 | backgroundColor: "tomato",
76 | paddingVertical: 10,
77 | paddingHorizontal: 5,
78 | borderRadius: 5,
79 | },
80 | button: {
81 | flex: 1,
82 | alignItems: 'center',
83 | justifyContent: 'center'
84 | }
85 | });
86 |
87 | ```
88 |
89 | ## Properties
90 |
91 | name | description | type | default
92 | :--------------------- |:------------------------------------------- | --------:|:------------------
93 | delay (ms) | The delay between components in form | Number | 100
94 | distance | The distance that component will move | Number | 5
95 |
96 | ## Warning
97 | All component in AnimatedForm must be animated.
98 |
99 | ## Copyright and License
100 |
101 | MIT License
102 |
103 | Copyright (c) 2018 maphongba008
--------------------------------------------------------------------------------
/.idea/markdown-navigator.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | true
80 | DEFINITION_ORDER
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |