├── .babelrc ├── .eslintrc ├── .flowconfig ├── .gitignore ├── .watchmanconfig ├── App.js ├── App.test.js ├── LICENSE ├── README.md ├── app.json ├── jsconfig.json ├── package.json ├── src ├── assets │ ├── images │ │ ├── images.js │ │ └── rodrigooler.png │ └── index.js ├── atoms │ ├── Avatar.js │ ├── Button.js │ ├── CenterView.js │ ├── MemeTrollFace.js │ ├── SubtitlePage.js │ ├── Text.js │ ├── TitlePage.js │ ├── Unicorn.js │ ├── UnicornAnimated.js │ └── Wrapper.js ├── navigator │ ├── DrawerNavigator.js │ └── routes.js ├── pages │ ├── Introduction.js │ ├── Slide1.js │ ├── Slide2.js │ ├── Slide3.js │ ├── Slide4.js │ └── Slide5.js └── themes │ └── default.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-expo"], 3 | "env": { 4 | "development": { 5 | "plugins": ["transform-react-jsx-source"] 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "airbnb" 3 | } -------------------------------------------------------------------------------- /.flowconfig: -------------------------------------------------------------------------------- 1 | [ignore] 2 | ; We fork some components by platform 3 | .*/*[.]android.js 4 | 5 | ; Ignore "BUCK" generated dirs 6 | /\.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 | .*/Libraries/react-native/ReactNative.js 16 | 17 | ; Additional create-react-native-app ignores 18 | 19 | ; Ignore duplicate module providers 20 | .*/node_modules/fbemitter/lib/* 21 | 22 | ; Ignore misbehaving dev-dependencies 23 | .*/node_modules/xdl/build/* 24 | .*/node_modules/reqwest/tests/* 25 | 26 | ; Ignore missing expo-sdk dependencies (temporarily) 27 | ; https://github.com/expo/expo/issues/162 28 | .*/node_modules/expo/src/* 29 | 30 | ; Ignore react-native-fbads dependency of the expo sdk 31 | .*/node_modules/react-native-fbads/* 32 | 33 | [include] 34 | 35 | [libs] 36 | node_modules/react-native/Libraries/react-native/react-native-interface.js 37 | node_modules/react-native/flow 38 | flow/ 39 | 40 | [options] 41 | module.system=haste 42 | 43 | emoji=true 44 | 45 | experimental.strict_type_args=true 46 | 47 | munge_underscores=true 48 | 49 | 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' 50 | 51 | suppress_type=$FlowIssue 52 | suppress_type=$FlowFixMe 53 | suppress_type=$FixMe 54 | 55 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\) 56 | suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-9]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+ 57 | suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy 58 | suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError 59 | 60 | unsafe.enable_getters_and_setters=true 61 | 62 | [version] 63 | ^0.49.1 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Expo 2 | .expo 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | .DS_Store 64 | .idea 65 | .vscode 66 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import DrawerNavigator from './src/navigator/DrawerNavigator'; 2 | 3 | export default DrawerNavigator; -------------------------------------------------------------------------------- /App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import App from './App'; 3 | 4 | import renderer from 'react-test-renderer'; 5 | 6 | it('renders without crashing', () => { 7 | const rendered = renderer.create().toJSON(); 8 | expect(rendered).toBeTruthy(); 9 | }); 10 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Rodrigo Oler ( ロドリゴ ) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # stylish-animation-in-react-native 2 | stylish-animation-in-react-native 3 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "sdkVersion": "21.0.0", 4 | "slug": "StylishAnimationInReactNative", 5 | "name": "StylishAnimationInReactNative" 6 | } 7 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "allowSyntheticDefaultImports": true 5 | }, 6 | "exclude": [ 7 | "node_modules" 8 | ] 9 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "StylishAnimationInReactNative", 3 | "version": "0.1.0", 4 | "dependencies": { 5 | "expo": "^21.0.0", 6 | "react": "16.0.0-alpha.12", 7 | "react-native": "^0.48.4", 8 | "react-native-svg": "^6.0.0-rc1", 9 | "react-navigation": "^1.0.0-beta.13", 10 | "styled-components": "^2.2.1" 11 | }, 12 | "devDependencies": { 13 | "eslint-config-airbnb": "^16.0.0", 14 | "eslint-plugin-import": "^2.7.0", 15 | "eslint-plugin-jsx-a11y": "^6.0.2", 16 | "eslint-plugin-react": "^7.4.0", 17 | "husky": "^0.14.3", 18 | "jest-expo": "^21.0.2", 19 | "lint-staged": "^4.2.3", 20 | "prettier": "^1.7.4", 21 | "react-native-scripts": "1.5.0", 22 | "react-test-renderer": "16.0.0-alpha.12", 23 | "stylelint": "^8.2.0", 24 | "stylelint-config-standard": "^17.0.0", 25 | "stylelint-config-styled-components": "^0.1.1", 26 | "stylelint-processor-styled-components": "^1.0.0" 27 | }, 28 | "jest": { 29 | "preset": "jest-expo" 30 | }, 31 | "lint-staged": { 32 | "*.js": [ 33 | "yarn prettier", 34 | "git add" 35 | ] 36 | }, 37 | "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js", 38 | "private": false, 39 | "scripts": { 40 | "android": "react-native-scripts android", 41 | "eject": "react-native-scripts eject", 42 | "ios": "react-native-scripts ios", 43 | "precommit": "lint-staged", 44 | "prettier": "prettier --write --single-quote true --trailing-comma all --print-width 80", 45 | "prettier:all": "prettier --write --single-quote true --trailing-comma all --print-width 80 --write 'src/**/*.js'", 46 | "start": "react-native-scripts start", 47 | "test": "node node_modules/jest/bin/jest.js --watch", 48 | "upg": "yarn upgrade-interactive" 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/assets/images/images.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import resolveAssetSource from 'resolveAssetSource'; 4 | 5 | const getImage = (name: string) => { 6 | switch (name) { 7 | case 'rodrigooler': 8 | return resolveAssetSource(require('./rodrigooler.png')); 9 | default: 10 | return null; 11 | } 12 | }; 13 | 14 | export default getImage; 15 | -------------------------------------------------------------------------------- /src/assets/images/rodrigooler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rodrigooler/react-native-animated-awesome/e30e85daeaa1aaca17c9003eca83fc8740e12033/src/assets/images/rodrigooler.png -------------------------------------------------------------------------------- /src/assets/index.js: -------------------------------------------------------------------------------- 1 | export getImages from './images/images'; 2 | -------------------------------------------------------------------------------- /src/atoms/Avatar.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | const Avatar = styled.Image` 4 | height: 100; 5 | width: 100; 6 | border-radius: 50; 7 | `; 8 | 9 | export default Avatar; 10 | -------------------------------------------------------------------------------- /src/atoms/Button.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import styled from 'styled-components/native'; 5 | 6 | import Text from './Text'; 7 | 8 | import theme from '../themes/default'; 9 | 10 | const Wrapper = styled.TouchableOpacity` 11 | border-color: ${theme.palette.violetRed}; 12 | border-width: 1; 13 | width: 160; 14 | height: 60; 15 | border-radius: 20; 16 | flex-direction: row; 17 | justify-content: center; 18 | align-items: center; 19 | `; 20 | 21 | type Props = { 22 | text: string, 23 | onPress: Function, 24 | }; 25 | 26 | function Button({ text, onPress }) { 27 | return ( 28 | 29 | {text} 30 | 31 | ); 32 | } 33 | 34 | Button.defaultProps = { 35 | text: 'Example', 36 | }; 37 | 38 | export default Button; 39 | -------------------------------------------------------------------------------- /src/atoms/CenterView.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | import Wrapper from './Wrapper'; 4 | 5 | const CenterView = styled(Wrapper)` 6 | flex: 1; 7 | justify-content: center; 8 | align-items: center; 9 | `; 10 | 11 | export default CenterView; 12 | -------------------------------------------------------------------------------- /src/atoms/MemeTrollFace.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import Svg, { Path, G } from 'react-native-svg'; 5 | 6 | export default function MemeTrollFace() { 7 | return ( 8 | 9 | 14 | 19 | 24 | 29 | 34 | 39 | 44 | 49 | 54 | 59 | 60 | 65 | 70 | 75 | 80 | 85 | 90 | 95 | 100 | 105 | 106 | 107 | ); 108 | } 109 | -------------------------------------------------------------------------------- /src/atoms/SubtitlePage.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | const SubtitlePage = styled.Text` 4 | font-size: 40; 5 | text-align: center; 6 | color: #2b2b2b; 7 | `; 8 | 9 | export default SubtitlePage; 10 | -------------------------------------------------------------------------------- /src/atoms/Text.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | import theme from '../themes/default'; 4 | 5 | const Text = styled.Text` 6 | font-size: 35; 7 | color: ${theme.palette.darkGrey}; 8 | `; 9 | 10 | export default Text; 11 | -------------------------------------------------------------------------------- /src/atoms/TitlePage.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | import theme from '../themes/default'; 4 | 5 | const TitlePage = styled.Text` 6 | font-size: 100; 7 | text-align: center; 8 | color: ${props => (props.color ? props.color : theme.palette.darkGrey)}; 9 | `; 10 | 11 | export default TitlePage; 12 | -------------------------------------------------------------------------------- /src/atoms/Unicorn.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import Svg, { Path } from 'react-native-svg'; 5 | 6 | import theme from '../themes/default'; 7 | 8 | function Unicorn({ path1, path2, path3, path4, path5 }) { 9 | return ( 10 | 11 | 15 | 19 | 23 | 27 | 31 | 32 | ); 33 | } 34 | 35 | Unicorn.defaultProps = { 36 | path1: theme.palette.blueWhale, 37 | path2: theme.palette.bermudaGrey, 38 | path3: theme.palette.heather, 39 | path4: theme.palette.violetRed, 40 | path5: theme.palette.ruby, 41 | }; 42 | 43 | export default Unicorn; 44 | -------------------------------------------------------------------------------- /src/atoms/UnicornAnimated.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import { StyleSheet, Text, View, Animated, Image, Easing } from 'react-native'; 5 | 6 | import Unicorn from './Unicorn'; 7 | 8 | class UnicornAnimated extends React.Component { 9 | state = { 10 | scale: new Animated.Value(0), 11 | }; 12 | 13 | componentDidMount() { 14 | this.scaleAnimated(); 15 | } 16 | 17 | scaleAnimated() { 18 | const { scale } = this.state; 19 | Animated.sequence([ 20 | Animated.timing(scale, { 21 | toValue: 0.2, 22 | duration: 1000, 23 | }), 24 | Animated.timing(scale, { 25 | toValue: 0.4, 26 | duration: 1000, 27 | }), 28 | ]).start(() => this.scaleAnimated()); 29 | } 30 | 31 | render() { 32 | const { scale } = this.state; 33 | 34 | return ( 35 | 46 | 47 | 48 | ); 49 | } 50 | } 51 | 52 | export default UnicornAnimated; 53 | -------------------------------------------------------------------------------- /src/atoms/Wrapper.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native'; 2 | 3 | const Wrapper = styled.View``; 4 | 5 | export default Wrapper; 6 | -------------------------------------------------------------------------------- /src/navigator/DrawerNavigator.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import { DrawerNavigator } from 'react-navigation'; 4 | 5 | import routes from './routes'; 6 | 7 | export default DrawerNavigator({ ...routes }); 8 | -------------------------------------------------------------------------------- /src/navigator/routes.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import Introduction from '../pages/Introduction'; 4 | import Slide1 from '../pages/Slide1'; 5 | import Slide2 from '../pages/Slide2'; 6 | import Slide3 from '../pages/Slide3'; 7 | import Slide4 from '../pages/Slide4'; 8 | import Slide5 from '../pages/Slide5'; 9 | 10 | export const ROUTE_NAMES = { 11 | INTRODUCTION: 'Introduction', 12 | WHO_I_AM: 'WhoIAm', 13 | SLIDE1: 'Slide1', 14 | SLIDE2: 'Slide2', 15 | SLIDE3: 'Slide3', 16 | SLIDE4: 'Slide4', 17 | SLIDE5: 'Slide5', 18 | }; 19 | 20 | export default (routes = { 21 | Introdution: { 22 | screen: Introduction, 23 | }, 24 | // WhoIAm: { 25 | // screen: WhoIAm, 26 | // }, 27 | Slide1: { 28 | screen: Slide1, 29 | }, 30 | Slide2: { 31 | screen: Slide2, 32 | }, 33 | Slide3: { 34 | screen: Slide3, 35 | }, 36 | Slide4: { 37 | screen: Slide4, 38 | }, 39 | Slide5: { 40 | screen: Slide5, 41 | }, 42 | }); 43 | -------------------------------------------------------------------------------- /src/pages/Introduction.js: -------------------------------------------------------------------------------- 1 | // @flow 2 | 3 | import * as React from 'react'; 4 | import { withNavigation } from 'react-navigation'; 5 | 6 | import Avatar from '../atoms/Avatar'; 7 | import Button from '../atoms/Button'; 8 | import CenterView from '../atoms/CenterView'; 9 | import SubtitlePage from '../atoms/SubtitlePage'; 10 | import TitlePage from '../atoms/TitlePage'; 11 | import UnicornAnimated from '../atoms/UnicornAnimated'; 12 | 13 | import { getImages } from '../assets'; 14 | import theme from '../themes/default'; 15 | 16 | class Introdution extends React.PureComponent { 17 | nextSlide = () => this.props.navigation.navigate('Slide1'); 18 | 19 | render() { 20 | return ( 21 | 22 | 23 | Animated 24 | Stylish animation in react-native 25 |