├── assets ├── icon.png ├── splash.png ├── favicon.png └── css.js ├── cocacola-app ├── assets │ ├── bg_green.png │ ├── bg_red.png │ ├── xxxaaa.png │ ├── bg_orange.png │ ├── coke_items-01.png │ ├── background_red.png │ ├── backgrounds-crazy.png │ ├── classic_coke_logo.png │ ├── coffee_background.png │ ├── coke_nosugar_can.png │ ├── coke_regular_can.png │ ├── light_background.png │ ├── nosugar_coke_logo.png │ ├── background_no_sugar.png │ ├── light_tastes_coke_logo.png │ ├── light_tastes_lime_logo.png │ ├── light_tastes_mango_logo.png │ ├── plus_coffee_coke_logo.png │ ├── light_tastes_coke_logo-01.png │ ├── dk_coca-cola-light-taste-lime.png │ └── dk_coca-cola-light-taste-exotic-mango.png ├── CocaColaApp.js ├── Navigation.js ├── DetailsBoilerplate.js ├── CocaColaSlider.js ├── Details.js └── SwipeableItems.js ├── babel.config.js ├── .expo-shared └── assets.json ├── .gitignore ├── app.json ├── package.json └── App.js /assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/assets/icon.png -------------------------------------------------------------------------------- /assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/assets/splash.png -------------------------------------------------------------------------------- /assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/assets/favicon.png -------------------------------------------------------------------------------- /cocacola-app/assets/bg_green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/bg_green.png -------------------------------------------------------------------------------- /cocacola-app/assets/bg_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/bg_red.png -------------------------------------------------------------------------------- /cocacola-app/assets/xxxaaa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/xxxaaa.png -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /cocacola-app/assets/bg_orange.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/bg_orange.png -------------------------------------------------------------------------------- /cocacola-app/assets/coke_items-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/coke_items-01.png -------------------------------------------------------------------------------- /cocacola-app/assets/background_red.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/background_red.png -------------------------------------------------------------------------------- /cocacola-app/assets/backgrounds-crazy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/backgrounds-crazy.png -------------------------------------------------------------------------------- /cocacola-app/assets/classic_coke_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/classic_coke_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/coffee_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/coffee_background.png -------------------------------------------------------------------------------- /cocacola-app/assets/coke_nosugar_can.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/coke_nosugar_can.png -------------------------------------------------------------------------------- /cocacola-app/assets/coke_regular_can.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/coke_regular_can.png -------------------------------------------------------------------------------- /cocacola-app/assets/light_background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/light_background.png -------------------------------------------------------------------------------- /cocacola-app/assets/nosugar_coke_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/nosugar_coke_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/background_no_sugar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/background_no_sugar.png -------------------------------------------------------------------------------- /cocacola-app/assets/light_tastes_coke_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/light_tastes_coke_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/light_tastes_lime_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/light_tastes_lime_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/light_tastes_mango_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/light_tastes_mango_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/plus_coffee_coke_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/plus_coffee_coke_logo.png -------------------------------------------------------------------------------- /cocacola-app/assets/light_tastes_coke_logo-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/light_tastes_coke_logo-01.png -------------------------------------------------------------------------------- /cocacola-app/assets/dk_coca-cola-light-taste-lime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/dk_coca-cola-light-taste-lime.png -------------------------------------------------------------------------------- /.expo-shared/assets.json: -------------------------------------------------------------------------------- 1 | { 2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true, 3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true 4 | } 5 | -------------------------------------------------------------------------------- /cocacola-app/assets/dk_coca-cola-light-taste-exotic-mango.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manuelruizc/react-native-animations-youtube/HEAD/cocacola-app/assets/dk_coca-cola-light-taste-exotic-mango.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/**/* 2 | .expo/* 3 | npm-debug.* 4 | *.jks 5 | *.p8 6 | *.p12 7 | *.key 8 | *.mobileprovision 9 | *.orig.* 10 | web-build/ 11 | 12 | # macOS 13 | .DS_Store 14 | 15 | /cocacola-app/components 16 | /assets/css.js 17 | /whatsappvoice -------------------------------------------------------------------------------- /cocacola-app/CocaColaApp.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { } from 'react-native'; 3 | import CocaColaSlider from './CocaColaSlider'; 4 | 5 | class CocaColaApp extends Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { } 9 | } 10 | render() { 11 | return ( 12 | 13 | ); 14 | } 15 | } 16 | 17 | export default CocaColaApp; -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "youtube", 4 | "slug": "youtube", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "splash": { 9 | "image": "./assets/splash.png", 10 | "resizeMode": "contain", 11 | "backgroundColor": "#ffffff" 12 | }, 13 | "updates": { 14 | "fallbackToCacheTimeout": 0 15 | }, 16 | "assetBundlePatterns": [ 17 | "**/*" 18 | ], 19 | "ios": { 20 | "supportsTablet": true 21 | }, 22 | "web": { 23 | "favicon": "./assets/favicon.png" 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /cocacola-app/Navigation.js: -------------------------------------------------------------------------------- 1 | import { createAppContainer } from 'react-navigation'; 2 | import { createStackNavigator } from 'react-navigation-stack'; 3 | import CocaColaSlider from './CocaColaSlider'; 4 | import Details from './Details'; 5 | import SwipeableItems from './SwipeableItems'; 6 | 7 | const navigationOptions = { 8 | headerShown: false, 9 | animationEnabled: false, 10 | }; 11 | 12 | const screens = { 13 | Home: { 14 | screen: CocaColaSlider, 15 | navigationOptions, 16 | }, 17 | Details: { 18 | screen: Details, 19 | navigationOptions, 20 | }, 21 | Swipeable: { 22 | screen: SwipeableItems, 23 | navigationOptions, 24 | } 25 | } 26 | 27 | 28 | const AppStack = createStackNavigator(screens); 29 | export default createAppContainer(AppStack); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": "node_modules/expo/AppEntry.js", 3 | "scripts": { 4 | "start": "expo start", 5 | "android": "expo start --android", 6 | "ios": "expo start --ios", 7 | "web": "expo start --web", 8 | "eject": "expo eject" 9 | }, 10 | "dependencies": { 11 | "@react-native-community/masked-view": "0.1.10", 12 | "expo": "~38.0.8", 13 | "expo-status-bar": "^1.0.2", 14 | "react": "~16.11.0", 15 | "react-dom": "~16.11.0", 16 | "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz", 17 | "react-native-gesture-handler": "~1.6.0", 18 | "react-native-reanimated": "~1.9.0", 19 | "react-native-safe-area-context": "~3.0.7", 20 | "react-native-screens": "~2.9.0", 21 | "react-native-web": "~0.11.7", 22 | "react-navigation": "^4.4.0", 23 | "react-navigation-stack": "^2.8.2" 24 | }, 25 | "devDependencies": { 26 | "@babel/core": "^7.8.6", 27 | "babel-preset-expo": "~8.1.0" 28 | }, 29 | "private": true 30 | } 31 | -------------------------------------------------------------------------------- /App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { StyleSheet, Text, View } from 'react-native'; 3 | import { Asset } from 'expo-asset'; 4 | import { AppLoading } from 'expo'; 5 | import Navigation from './cocacola-app/Navigation'; 6 | 7 | class App extends React.Component { 8 | state = { 9 | isReady: false, 10 | }; 11 | 12 | render() { 13 | if (!this.state.isReady) { 14 | return ( 15 | this.setState({ isReady: true })} 18 | onError={console.warn} 19 | /> 20 | ); } 21 | 22 | return ( 23 | 24 | ); 25 | } 26 | 27 | async _cacheResourcesAsync() { 28 | const images = [ 29 | require('./cocacola-app/assets/background_no_sugar.png'), 30 | require('./cocacola-app/assets/background_red.png'), 31 | require('./cocacola-app/assets/backgrounds-crazy.png'), 32 | require('./cocacola-app/assets/bg_green.png'), 33 | require('./cocacola-app/assets/bg_orange.png'), 34 | require('./cocacola-app/assets/bg_red.png'), 35 | require('./cocacola-app/assets/classic_coke_logo.png'), 36 | require('./cocacola-app/assets/coffee_background.png'), 37 | require('./cocacola-app/assets/coke_items-01.png'), 38 | require('./cocacola-app/assets/coke_nosugar_can.png'), 39 | require('./cocacola-app/assets/coke_regular_can.png'), 40 | require('./cocacola-app/assets/dk_coca-cola-light-taste-exotic-mango.png'), 41 | require('./cocacola-app/assets/dk_coca-cola-light-taste-lime.png'), 42 | require('./cocacola-app/assets/light_background.png'), 43 | require('./cocacola-app/assets/light_tastes_coke_logo-01.png'), 44 | require('./cocacola-app/assets/light_tastes_coke_logo.png'), 45 | require('./cocacola-app/assets/light_tastes_lime_logo.png'), 46 | require('./cocacola-app/assets/light_tastes_mango_logo.png'), 47 | require('./cocacola-app/assets/nosugar_coke_logo.png'), 48 | require('./cocacola-app/assets/plus_coffee_coke_logo.png'), 49 | require('./cocacola-app/assets/xxxaaa.png'), 50 | ]; 51 | 52 | const cacheImages = images.map(image => { 53 | return Asset.fromModule(image).downloadAsync(); 54 | }); 55 | return Promise.all(cacheImages); 56 | } 57 | } 58 | 59 | export default App; 60 | 61 | const styles = StyleSheet.create({ 62 | container: { 63 | flex: 1, 64 | alignItems: 'center', 65 | justifyContent: 'center', 66 | }, 67 | }); 68 | -------------------------------------------------------------------------------- /cocacola-app/DetailsBoilerplate.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, TouchableWithoutFeedback, StyleSheet, Animated, Easing, Dimensions, Image, ImageBackground } from 'react-native'; 3 | 4 | const { width, height } = Dimensions.get('window'); 5 | const inputRange = [0, 1]; 6 | 7 | class Details extends Component { 8 | constructor(props) { 9 | super(props); 10 | this.state = {} 11 | } 12 | 13 | 14 | render() { 15 | return ( 16 | 21 | 22 | 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | } 34 | }; 35 | 36 | 37 | 38 | const TextContainer = () => { 39 | return ( 40 | <> 41 | 42 | Energy Value: 43 | 597 kj / 139 Kcal 44 | 45 | 46 | Fat: 47 | 0g 48 | 49 | 50 | sat. fatty acids: 51 | 0g 52 | 53 | 54 | Carbohydrates: 55 | 35g 56 | 57 | 58 | of which sugars: 59 | 35g 60 | 61 | 62 | Protein: 63 | 0g 64 | 65 | 66 | Salt: 67 | 0g 68 | 69 | 71 | 72 | Come Back 73 | 74 | 75 | 76 | ); 77 | } 78 | 79 | const styles = StyleSheet.create({ 80 | title_container: { 81 | width: width*0.5, 82 | height: height * 0.1, 83 | }, 84 | image: { 85 | width:'100%', 86 | height:'100%', 87 | }, 88 | horizontal_text_container: { 89 | width: '100%', 90 | flexDirection:'row', 91 | justifyContent: 'space-between', 92 | alignItems:'center', 93 | }, 94 | textContainerWithDivisor: { 95 | marginBottom:8, 96 | paddingBottom: 8, 97 | borderBottomWidth:1, 98 | borderBottomColor:'rgba(255, 255, 255,0.3)' 99 | }, 100 | bold_text: { 101 | fontWeight: 'bold', 102 | color: 'white', 103 | fontSize: 14, 104 | width: '45%', 105 | }, 106 | normal_text: { 107 | fontSize:14, 108 | color:'white', 109 | width:'45%', 110 | }, 111 | button: { 112 | backgroundColor:'white', 113 | transform: [{translateY: 50},], 114 | borderRadius:100, 115 | alignSelf: 'center', 116 | paddingLeft:22, 117 | paddingRight:22, 118 | paddingTop: 12, 119 | paddingBottom: 12, 120 | justifyContent:'center', 121 | alignItems:'center', 122 | } 123 | }); 124 | 125 | export default Details; -------------------------------------------------------------------------------- /cocacola-app/CocaColaSlider.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, StyleSheet, ScrollView, Animated, ImageBackground, Dimensions, Easing, TouchableWithoutFeedback } from 'react-native'; 3 | 4 | const { width, height } = Dimensions.get('screen'); 5 | 6 | const BackgroundImage = Animated.createAnimatedComponent(ImageBackground) 7 | 8 | const items = [ 9 | { 10 | background: require('./assets/background_red.png'), 11 | item_image: require('./assets/coke_regular_can.png'), 12 | logo: require('./assets/classic_coke_logo.png'), 13 | }, 14 | { 15 | background: require('./assets/coffee_background.png'), 16 | item_image: require('./assets/coke_items-01.png'), 17 | logo: require('./assets/plus_coffee_coke_logo.png'), 18 | }, 19 | { 20 | background: require('./assets/light_background.png'), 21 | item_image: require('./assets/dk_coca-cola-light-taste-exotic-mango.png'), 22 | logo: require('./assets/light_tastes_coke_logo.png'), 23 | }, 24 | { 25 | background: require('./assets/background_no_sugar.png'), 26 | item_image: require('./assets/coke_nosugar_can.png'), 27 | logo: require('./assets/nosugar_coke_logo.png'), 28 | }, 29 | ] 30 | 31 | class CocaColaSlider extends Component { 32 | constructor(props) { 33 | super(props); 34 | this.state = { 35 | initialAnimationFinished: false, 36 | } 37 | this.scrollAnimation = new Animated.Value(0); 38 | this.initialAnimation = new Animated.Value(0); 39 | } 40 | 41 | componentDidMount() { 42 | Animated.timing(this.initialAnimation, { 43 | toValue: 1, 44 | duration: 500, 45 | easing: Easing.elastic(2.4), 46 | useNativeDriver: true, 47 | }).start(() => { 48 | this.setState({ 49 | initialAnimationFinished: true, 50 | }); 51 | }) 52 | } 53 | 54 | navigateTo = (index) => { 55 | const { navigate } = this.props.navigation; 56 | if(index === 2) { 57 | navigate('Swipeable'); 58 | } 59 | else { 60 | navigate('Details', { 61 | background: items[index].background, 62 | logo: items[index].logo, 63 | }); 64 | } 65 | } 66 | 67 | render() { 68 | const { scrollAnimation, initialAnimation } = this; 69 | const { initialAnimationFinished } = this.state; 70 | return ( 71 | 72 | 78 | 91 | 92 | 93 | 94 | ); 95 | } 96 | } 97 | 98 | 99 | const Background = ({scrollAnimation, items, initialAnimation, initialAnimationFinished}) => { 100 | return( 101 | 102 | {items.map((item, index) => { 103 | const zIndex = items.length - index; 104 | const inputRange = [width*index, width*(index+1)]; 105 | const outputRange = [1, 0]; 106 | const opacity = scrollAnimation.interpolate({ 107 | inputRange, 108 | outputRange, 109 | extrapolate:'clamp', 110 | }); 111 | 112 | const inputRangeLogo = index === 0 ? [0, width] : [width*(index-1), width*index, width*(index+1)]; 113 | const outputRangeLogo = index === 0 ? [1, 0] : [0, 1, 0]; 114 | const scale = scrollAnimation.interpolate({ 115 | inputRange: inputRangeLogo, 116 | outputRange: outputRangeLogo, 117 | extrapolate: 'clamp', 118 | }); 119 | return( 120 | 126 | 127 | 132 | 133 | 134 | ); 135 | })} 136 | 137 | ); 138 | } 139 | 140 | const Items = ({ scrollAnimation, items, initialAnimation, navigateTo }) => { 141 | const translateY = initialAnimation.interpolate({ 142 | inputRange: [0, 1], 143 | outputRange: [300, 0], 144 | }); 145 | return( 146 | <> 147 | {items.map((item, index) => { 148 | const inputRange = index === 0 ? [0, width] : [width*(index-1), width*index, width*(index+1)]; 149 | const outputRange = index === 0 ? ['0deg', '-20deg'] : ['20deg', '0deg', '-20deg']; 150 | const rotate = scrollAnimation.interpolate({ 151 | inputRange, 152 | outputRange, 153 | extrapolate: 'clamp', 154 | }); 155 | return( 156 | navigateTo(index)}> 157 | 158 | 163 | 164 | 165 | ); 166 | })} 167 | 168 | ); 169 | } 170 | 171 | 172 | const styles = StyleSheet.create({ 173 | container: { 174 | flex: 1, 175 | position:'relative', 176 | backgroundColor: 'red' 177 | }, 178 | itemContainer: { 179 | width, 180 | height, 181 | justifyContent:'center', 182 | alignItems:'center', 183 | }, 184 | item: { 185 | width: '70%', 186 | height:'55%', 187 | }, 188 | bgContainer: { 189 | position:'absolute', 190 | width, 191 | height, 192 | }, 193 | bg: { 194 | width:'100%', 195 | height:'100%', 196 | position:'absolute', 197 | alignItems: 'center', 198 | justifyContent:'flex-start', 199 | }, 200 | logoContainer: { 201 | width:'100%', 202 | marginTop: 50, 203 | justifyContent:'center', 204 | alignItems:'center', 205 | }, 206 | logo: { 207 | width:'60%', 208 | height: 90, 209 | } 210 | }); 211 | 212 | 213 | 214 | export default CocaColaSlider; -------------------------------------------------------------------------------- /cocacola-app/Details.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, Text, TouchableWithoutFeedback, StyleSheet, Animated, Easing, Dimensions, Image, ImageBackground } from 'react-native'; 3 | 4 | const { width, height } = Dimensions.get('window'); 5 | 6 | class Details extends Component { 7 | animations = [ 8 | new Animated.Value(0), 9 | new Animated.Value(0), 10 | new Animated.Value(0), 11 | new Animated.Value(0), 12 | new Animated.Value(0), 13 | new Animated.Value(0), 14 | new Animated.Value(0), 15 | ]; 16 | 17 | componentDidMount() { 18 | const { animations } = this 19 | const duration = 450; 20 | const elasticValue = 1.8; 21 | Animated.stagger(70, [ 22 | Animated.timing(animations[0], { 23 | toValue: 1, 24 | duration, 25 | easing: Easing.elastic(elasticValue), 26 | useNativeDriver: true 27 | }), 28 | Animated.timing(animations[1], { 29 | toValue: 1, 30 | duration, 31 | easing: Easing.elastic(elasticValue), 32 | useNativeDriver: true 33 | }), 34 | Animated.timing(animations[2], { 35 | toValue: 1, 36 | duration, 37 | easing: Easing.elastic(elasticValue), 38 | useNativeDriver: true 39 | }), 40 | Animated.timing(animations[3], { 41 | toValue: 1, 42 | duration, 43 | easing: Easing.elastic(elasticValue), 44 | useNativeDriver: true 45 | }), 46 | Animated.timing(animations[4], { 47 | toValue: 1, 48 | duration, 49 | easing: Easing.elastic(elasticValue), 50 | useNativeDriver: true 51 | }), 52 | Animated.timing(animations[5], { 53 | toValue: 1, 54 | duration, 55 | easing: Easing.elastic(elasticValue), 56 | useNativeDriver: true 57 | }), 58 | Animated.timing(animations[6], { 59 | toValue: 1, 60 | duration, 61 | easing: Easing.elastic(elasticValue), 62 | useNativeDriver: true 63 | }), 64 | ]).start(); 65 | } 66 | 67 | render() { 68 | const logoAnimationValue = this.animations[5]; 69 | const { goBack, state } = this.props.navigation; 70 | const { background, logo } = state.params; 71 | return ( 72 | 77 | 78 | 83 | 84 | 85 | 86 | 87 | 88 | ); 89 | } 90 | }; 91 | 92 | 93 | 94 | class TextContainer extends Component { 95 | constructor(props) { 96 | super(props); 97 | } 98 | 99 | render() { 100 | const { animations, goBack } = this.props; 101 | const interpolatedAnimations = animations.map(_ => { 102 | return _.interpolate({ 103 | inputRange: [0, 1], 104 | outputRange: [width, 0] 105 | }); 106 | }); 107 | const interpolatedStyles = interpolatedAnimations.map(interpolatedValue => { 108 | return { 109 | transform: [ 110 | {translateX: interpolatedValue} 111 | ] 112 | } 113 | }); 114 | const buttonAnimationValue = animations[5].interpolate({ 115 | inputRange: [0, 1], 116 | outputRange: [-width, 0], 117 | }); 118 | 119 | return ( 120 | <> 121 | 122 | Energy Value: 123 | 597 kj / 139 Kcal 124 | 125 | 126 | Fat: 127 | 0g 128 | 129 | 130 | sat. fatty acids: 131 | 0g 132 | 133 | 134 | Carbohydrates: 135 | 35g 136 | 137 | 138 | of which sugars: 139 | 35g 140 | 141 | 142 | Protein: 143 | 0g 144 | 145 | 146 | Salt: 147 | 0g 148 | 149 | goBack()} 151 | > 152 | 154 | Come Back 155 | 156 | 157 | 158 | ); 159 | } 160 | } 161 | 162 | const styles = StyleSheet.create({ 163 | title_container: { 164 | width: width*0.5, 165 | height: height * 0.1, 166 | }, 167 | image: { 168 | width:'100%', 169 | height:'100%', 170 | }, 171 | horizontal_text_container: { 172 | width: '100%', 173 | flexDirection:'row', 174 | justifyContent: 'space-between', 175 | alignItems:'center', 176 | }, 177 | containerDivisor: { 178 | paddingBottom: 8, 179 | marginBottom: 8, 180 | borderBottomWidth: 1, 181 | borderBottomColor: 'rgba(255, 255, 255, 0.2)' 182 | }, 183 | bold_text: { 184 | fontWeight: 'bold', 185 | color: 'white', 186 | fontSize: 14, 187 | width: '45%', 188 | }, 189 | normal_text: { 190 | fontSize:14, 191 | color:'white', 192 | width:'45%', 193 | }, 194 | button: { 195 | backgroundColor:'white', 196 | transform: [{translateY: 50}, ], 197 | borderRadius:100, 198 | alignSelf: 'center', 199 | paddingLeft:22, 200 | paddingRight:22, 201 | paddingTop: 12, 202 | paddingBottom: 12, 203 | justifyContent:'center', 204 | alignItems:'center' 205 | } 206 | }); 207 | 208 | export default Details; -------------------------------------------------------------------------------- /cocacola-app/SwipeableItems.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { View, StyleSheet, Text, Dimensions, Animated, PanResponder, TouchableWithoutFeedback, Easing, ImageBackground } from 'react-native'; 3 | 4 | const BackgroundImage = Animated.createAnimatedComponent(ImageBackground); 5 | 6 | const { width, height } = Dimensions.get('screen'); 7 | 8 | class SwipeableItems extends Component { 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | isYellowCanOnFront: true, 13 | swipedLeft: false, 14 | backgroundAnimationValue: 1, 15 | initialAnimationFinished: false, 16 | } 17 | this.gestureAnimation = new Animated.Value(0); 18 | this.backgroundAnimation = new Animated.Value(1); 19 | this.initialAnimation = new Animated.Value(0); 20 | this.panResponder = PanResponder.create({ 21 | onStartShouldSetPanResponder: (evt, gestureState) => true, 22 | onMoveShouldSetPanResponder: (evt, gestureState) => true, 23 | onPanResponderMove: (evt, gestureState) => { 24 | this.gestureAnimation.setValue(gestureState.dx); 25 | }, 26 | onPanResponderRelease: (evt, gestureState) => { 27 | const { moveX, vx } = gestureState; 28 | const { gestureAnimation, backgroundAnimation } = this; 29 | const backgroundAnimationValue = this.state.backgroundAnimationValue === 1 ? 0 : 1; 30 | if(moveX >= (width - 150) && vx > 0) { 31 | Animated.parallel([ 32 | Animated.timing(gestureAnimation, { 33 | toValue: width, 34 | duration: 350, 35 | useNativeDriver: false, 36 | easing: Easing.elastic(1.8), 37 | }), 38 | Animated.timing(backgroundAnimation, { 39 | toValue: backgroundAnimationValue, 40 | duration: 350, 41 | useNativeDriver: true, 42 | easing: Easing.linear, 43 | }) 44 | ]).start(() => { 45 | gestureAnimation.setValue(0) 46 | this.setState({ 47 | isYellowCanOnFront: !this.state.isYellowCanOnFront, 48 | backgroundAnimationValue 49 | }) 50 | }); 51 | } 52 | else if(moveX <= 250 && vx < 0) { 53 | this.setState({swipedLeft: true}, () => { 54 | Animated.parallel([ 55 | Animated.timing(gestureAnimation, { 56 | toValue: width, 57 | duration: 500, 58 | useNativeDriver: false, 59 | easing: Easing.elastic(1.9), 60 | }), 61 | Animated.timing(backgroundAnimation, { 62 | toValue: backgroundAnimationValue, 63 | duration: 350, 64 | useNativeDriver:true, 65 | easing: Easing.linear, 66 | }) 67 | ]).start(() => { 68 | gestureAnimation.setValue(0) 69 | this.setState({ 70 | isYellowCanOnFront: !this.state.isYellowCanOnFront, 71 | swipedLeft: false, 72 | backgroundAnimationValue 73 | }); 74 | }); 75 | }) 76 | } 77 | else { 78 | Animated.timing(gestureAnimation, { 79 | toValue: 0, 80 | duration: 300, 81 | easing: Easing.elastic(1.9), 82 | useNativeDriver: false, 83 | }).start(); 84 | } 85 | }, 86 | }) 87 | } 88 | 89 | getFrontStyle = (animation) => { 90 | const { swipedLeft } = this.state; 91 | const translateX = animation.interpolate({ 92 | inputRange: [-width, 0, width/2, width], 93 | outputRange: [-120, 0, 90, 50], 94 | extrapolate: 'clamp', 95 | }); 96 | const scale = animation.interpolate({ 97 | inputRange: [0, width], 98 | outputRange: [1, 0.8], 99 | extrapolate:'clamp', 100 | }); 101 | const rotate = animation.interpolate({ 102 | inputRange: [-width, 0, width], 103 | outputRange: ['-9deg', '0deg', '13deg'], 104 | extrapolate:'clamp', 105 | }); 106 | const zIndex = animation.interpolate({ 107 | inputRange: [-width, 0, width], 108 | outputRange: !swipedLeft ? [2, 2, 0] : [0, 0, 0], 109 | }) 110 | 111 | return { 112 | transform: [ 113 | {translateX}, 114 | {scale}, 115 | {rotate} 116 | ], 117 | zIndex, 118 | // elevation: zIndex, 119 | } 120 | } 121 | 122 | getBackStyle = (animation) => { 123 | const { swipedLeft } = this.state; 124 | const translateX = animation.interpolate({ 125 | inputRange: [-width, 0, width], 126 | outputRange: [80, 50, 0], 127 | extrapolate: 'clamp', 128 | }); 129 | const scale = animation.interpolate({ 130 | inputRange: [0, width], 131 | outputRange: [0.8, 1], 132 | extrapolate: 'clamp', 133 | }); 134 | const rotate = animation.interpolate({ 135 | inputRange: [0, width], 136 | outputRange: ['13deg', '0deg'], 137 | extrapolate: 'clamp', 138 | }); 139 | const zIndex = animation.interpolate({ 140 | inputRange: [-width, 0, width], 141 | outputRange: !swipedLeft ? [0, 0, 2] : [2, 2, 2], 142 | }) 143 | 144 | return { 145 | transform: [ 146 | {translateX}, 147 | {rotate}, 148 | {scale}, 149 | ], 150 | zIndex, 151 | // elevation: zIndex, 152 | } 153 | } 154 | 155 | componentDidMount() { 156 | Animated.timing(this.initialAnimation, { 157 | toValue: 1, 158 | duration: 500, 159 | easing: Easing.elastic(2.3), 160 | useNativeDriver: true, 161 | }).start(() => { 162 | this.setState({ 163 | initialAnimationFinished: true, 164 | }); 165 | }); 166 | } 167 | 168 | render() { 169 | const { gestureAnimation, backgroundAnimation, initialAnimation } = this; 170 | const { isYellowCanOnFront, initialAnimationFinished } = this.state; 171 | const translateX = initialAnimation.interpolate({ 172 | inputRange: [0, 1], 173 | outputRange: [width, 0], 174 | }); 175 | const _translateX = initialAnimation.interpolate({ 176 | inputRange: [0, 1], 177 | outputRange: [width, 50], 178 | }); 179 | const initialFrontStyling = { 180 | transform: [ 181 | {translateX} 182 | ] 183 | } 184 | const initialBackStyling = { 185 | transform: [ 186 | {translateX: _translateX}, 187 | {scale: 0.8}, 188 | {rotate: '13deg'}, 189 | ] 190 | }; 191 | 192 | 193 | 194 | let frontStyle = isYellowCanOnFront ? this.getFrontStyle(gestureAnimation) : this.getBackStyle(gestureAnimation); 195 | frontStyle = initialAnimationFinished ? frontStyle : initialFrontStyling; 196 | let backStyle = !isYellowCanOnFront ? this.getFrontStyle(gestureAnimation) : this.getBackStyle(gestureAnimation); 197 | backStyle = initialAnimationFinished ? backStyle : initialBackStyling; 198 | return ( 199 | 200 | 203 | 204 | 209 | 214 | 215 | 216 | this.props.navigation.goBack()} 218 | > 219 | 221 | Come Back 222 | 223 | 224 | 225 | 226 | ); 227 | } 228 | } 229 | 230 | 231 | const Background = ({animation}) => { 232 | const scale = animation.interpolate({ 233 | inputRange: [0, 1], 234 | outputRange: [1, 0], 235 | extrapolate: 'clamp', 236 | }); 237 | return( 238 | 239 | 244 | 245 | 250 | 251 | 252 | 257 | 258 | 263 | 264 | 265 | 266 | ); 267 | } 268 | 269 | const styles = StyleSheet.create({ 270 | container: { 271 | flex: 1, 272 | backgroundColor:'lightgreen', 273 | }, 274 | panContainer: { 275 | width, 276 | height, 277 | justifyContent: 'center', 278 | alignItems:'center', 279 | zIndex: 1, 280 | }, 281 | image: { 282 | marginTop: 100, 283 | width: '55%', 284 | height: '60%', 285 | }, 286 | bgContainer: { 287 | position:'absolute', 288 | width, 289 | height, 290 | }, 291 | bg: { 292 | width:'100%', 293 | height:'100%', 294 | position:'absolute', 295 | alignItems: 'center', 296 | justifyContent:'flex-start', 297 | }, 298 | logoContainer: { 299 | width:'100%', 300 | marginTop: 50, 301 | justifyContent:'center', 302 | alignItems:'center', 303 | }, 304 | logo: { 305 | width:'60%', 306 | height: 90, 307 | }, 308 | buttonContainer: { 309 | position: 'absolute', 310 | bottom: 35, 311 | left: 0, 312 | width: '100%', 313 | zIndex: 6, 314 | }, 315 | button: { 316 | backgroundColor:'white', 317 | borderRadius:100, 318 | alignSelf: 'center', 319 | paddingLeft:22, 320 | paddingRight:22, 321 | paddingTop: 12, 322 | paddingBottom: 12, 323 | justifyContent:'center', 324 | alignItems:'center' 325 | } 326 | }) 327 | 328 | export default SwipeableItems; -------------------------------------------------------------------------------- /assets/css.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import { 4 | View, 5 | Animated, 6 | Easing, 7 | Image, 8 | ImageBackground, 9 | PanResponder, 10 | Dimensions, 11 | StyleSheet, 12 | TouchableWithoutFeedback 13 | } from 'react-native'; 14 | 15 | const BackgroundImage = Animated.createAnimatedComponent(ImageBackground); 16 | 17 | const {width, height} = Dimensions.get('screen'); 18 | 19 | 20 | class SwipeableItems extends Component { 21 | constructor(props) { 22 | super(props); 23 | this.state = { 24 | opacityAnimation: new Animated.Value(1), 25 | initialAnimation: new Animated.Value(0), 26 | cansAnimation: new Animated.Value(1), 27 | initialAnimationFinished: false, 28 | swipedLeft: false, 29 | isYellowOnFront: true, 30 | opacityValue: 1, 31 | } 32 | this.panResponderActive = false; 33 | this.panResponder = PanResponder.create({ 34 | onStartShouldSetPanResponder: () => true, 35 | onMoveShouldSetPanResponder: () => true, 36 | onPanResponderMove: (e, gestureState) => { 37 | this.state.cansAnimation.setValue(gestureState.dx) 38 | }, 39 | onPanResponderRelease: (e, gestureState) => { 40 | const { vx, moveX } = gestureState; 41 | if(moveX >= (width - 150) && vx > 0) { 42 | const opacityValue = this.state.opacityValue === 1 ? 0 : 1; 43 | Animated.parallel([ 44 | Animated.spring(this.state.cansAnimation, { 45 | toValue: width, 46 | friction: 150, 47 | tension: 120, 48 | easing: Easing.elastic(1.2), 49 | useNativeDriver: false, 50 | }), 51 | Animated.timing(this.state.opacityAnimation, { 52 | toValue: opacityValue, 53 | duration: 250, 54 | easing: Easing.linear, 55 | useNativeDriver: true, 56 | }) 57 | ]).start(() => { 58 | this.state.cansAnimation.setValue(0); 59 | this.setState({isYellowOnFront: !this.state.isYellowOnFront, opacityValue, swipedLeft: false}, () => { 60 | console.log("IS ZERO", this.state.cansAnimation); 61 | }); 62 | }); 63 | } 64 | else if(moveX <= 100 && vx < 0) { 65 | const opacityValue = this.state.opacityValue === 1 ? 0 : 1; 66 | this.setState({swipedLeft: true}, () => { 67 | Animated.parallel([ 68 | Animated.timing(this.state.cansAnimation, { 69 | toValue: width, 70 | duration: 150, 71 | easing: Easing.linear, 72 | useNativeDriver: false 73 | }), 74 | Animated.timing(this.state.opacityAnimation, { 75 | toValue: opacityValue, 76 | duration: 250, 77 | easing: Easing.linear, 78 | useNativeDriver: true, 79 | }) 80 | ]).start(() => { 81 | this.state.cansAnimation.setValue(0) 82 | this.setState({ 83 | swipedLeft: false, 84 | opacityValue, 85 | isYellowOnFront: !this.state.isYellowOnFront 86 | }, () => { 87 | console.log(this.state.swipedLeft) 88 | }); 89 | }); 90 | }) 91 | } 92 | else { 93 | Animated.timing(this.state.cansAnimation, { 94 | toValue: 0, 95 | duration: 550, 96 | useNativeDriver: false, 97 | easing: Easing.elastic(1.8) 98 | }).start() 99 | } 100 | }, 101 | }); 102 | } 103 | 104 | componentDidMount() { 105 | Animated.timing(this.state.initialAnimation, { 106 | toValue: 1, 107 | duration: 450, 108 | easing: Easing.elastic(2.3), 109 | useNativeDriver: false, 110 | }).start(() => { 111 | this.setState({initialAnimationFinished: true}); 112 | }); 113 | } 114 | 115 | getBackStyles = (animation) => { 116 | const {swipedLeft} = this.state; 117 | const translateX = animation.interpolate({ 118 | inputRange: [-width, 0, width/2, width], 119 | outputRange: [100, 40, 40, 0], 120 | extrapolate: 'clamp', 121 | }); 122 | const rotate = animation.interpolate({ 123 | inputRange: [-width, 0, width/2, width], 124 | outputRange: ['0deg', '13deg', '0deg', '0deg'], 125 | extrapolate:'clamp', 126 | }); 127 | const scale = animation.interpolate({ 128 | inputRange: [-width, 0, width], 129 | outputRange: [0.9, 0.85, 1], 130 | extrapolate:'clamp', 131 | }); 132 | const inputRange = [-width, 0, width / 2, width]; 133 | const outputRange = !this.state.swipedLeft ? [2, 0, 0, 2] : [2, 2, 2, 2]; 134 | const zIndex = animation.interpolate({ 135 | inputRange, 136 | outputRange, 137 | extrapolate: 'clamp', 138 | }); 139 | 140 | 141 | return { 142 | transform: [ 143 | {translateX}, 144 | {scale}, 145 | {rotate}, 146 | ], 147 | zIndex, 148 | elevation: zIndex, 149 | } 150 | } 151 | 152 | getFrontStyles = (animation) => { 153 | const {swipedLeft} = this.state; 154 | console.log("SIPEDLEF", swipedLeft) 155 | const translateX = animation.interpolate({ 156 | inputRange: [-width, 0, width/2, width], 157 | outputRange: [-150, 0, 100, 40], 158 | extrapolate: 'clamp', 159 | }); 160 | const rotate = animation.interpolate({ 161 | inputRange: [-width, 0, width], 162 | outputRange: ['-13deg', '0deg', '13deg'], 163 | extrapolate:'clamp', 164 | }); 165 | const scale = animation.interpolate({ 166 | inputRange: [-width, 0, width], 167 | outputRange: [1, 1, 0.85], 168 | extrapolate:'clamp', 169 | }); 170 | const inputRange = [-width, 0, width / 2, width]; 171 | const outputRange = !this.state.swipedLeft ? [3, 3, 0, 0] : [0, 0, 0, 0]; 172 | const zIndex = animation.interpolate({ 173 | inputRange, 174 | outputRange, 175 | extrapolate: 'clamp', 176 | }); 177 | 178 | 179 | return { 180 | transform: [ 181 | {translateX}, 182 | {rotate}, 183 | {scale} 184 | ], 185 | zIndex, 186 | elevation: zIndex, 187 | } 188 | } 189 | 190 | render() { 191 | const { 192 | cansAnimation, 193 | initialAnimation, 194 | initialAnimationFinished, 195 | isYellowOnFront, 196 | opacityAnimation, 197 | } = this.state; 198 | console.log(isYellowOnFront) 199 | const {getBackStyles, getFrontStyles} = this; 200 | const initialBackTranslateX = initialAnimation.interpolate({ 201 | inputRange:[0, 1], 202 | outputRange:[width, 40], 203 | }); 204 | const initialFrontTranslateX = initialAnimation.interpolate({ 205 | inputRange:[0, 1], 206 | outputRange:[width, 0], 207 | }); 208 | const backStyles = !initialAnimationFinished ? 209 | { transform: [{translateX: initialBackTranslateX}, {scale:0.85}, {rotate:'13deg'}] } 210 | : !isYellowOnFront ? getFrontStyles(cansAnimation) : getBackStyles(cansAnimation); 211 | const frontStyles = !initialAnimationFinished ? { transform: [{translateX: initialFrontTranslateX}] } 212 | : isYellowOnFront ? getFrontStyles(cansAnimation) : getBackStyles(cansAnimation); 213 | return ( 214 | 215 | 218 | 222 | 227 | 230 | 235 | 236 | 237 | 242 | 245 | 250 | 251 | 252 | 253 | 254 | ); 255 | } 256 | }; 257 | 258 | const Background = (props) => { 259 | const {opacityAnimation} = props; 260 | const scale = opacityAnimation.interpolate({ 261 | inputRange: [0, 1], 262 | outputRange: [1, 0], 263 | extrapolate: 'clamp' 264 | }); 265 | return( 266 | 267 | 272 | 273 | 278 | 279 | 280 | 285 | 286 | 291 | 292 | 293 | 294 | ); 295 | } 296 | 297 | const styles = StyleSheet.create({ 298 | container: { 299 | flex: 1, 300 | justifyContent:'center', 301 | alignItems:'center', 302 | backgroundColor:'#4d5eef', 303 | }, 304 | panContainer: { 305 | flexDirection: 'row', 306 | justifyContent: 'center', 307 | alignItems: 'center', 308 | width: '100%', 309 | marginTop: 60, 310 | zIndex: 2, 311 | }, 312 | bgContainer: { 313 | position:'absolute', 314 | top:0, left: 0, 315 | width, 316 | height, 317 | }, 318 | bg: { 319 | width:'100%', 320 | height:'100%', 321 | position:'absolute', 322 | alignItems: 'center', 323 | justifyContent:'flex-start', 324 | }, 325 | logoContainer: { 326 | width:'100%', 327 | marginTop: 50, 328 | justifyContent:'center', 329 | alignItems:'center', 330 | }, 331 | logo: { 332 | width:'60%', 333 | height: 90, 334 | } 335 | }); 336 | 337 | export default SwipeableItems; --------------------------------------------------------------------------------