Main.js

import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Image, TouchableOpacity, Animated } from 'react-native';
import { Text } from 'atoms';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            force: 0,
            forceAction: false

        };

        this.forceAnimationValue = new Animated.Value(0);
    }

    forceAnimate = () => {
        Animated.timing(
            this.forceAnimationValue,
            {
                toValue: 1,
                duration: 400
            }
        ).start();
    }

    handleResponderMove = (e) => {
        this.setState({ force: e.nativeEvent.force }, () => {
            if (this.state.force === 1) {
                this.setState({ forceAction: true }, () => {
                    // handle force action here
                    this.forceAnimate();
                });
            }
        });
    }

    handleResponderRelease = (e) => {
        const { forceAction } = this.state;

        if (forceAction) {
            this.setState({
                force: 0,
                forceAction: false
            });
        } else {
            this.setState({
                force: 0
            });
            // hande simple action here
        }
    }

    render() {
        const { forceAnimationValue } = this;
        return (
            <View style={s.wrapper}>
                <ScrollView style={s.container}  contentContainerStyle={s.containerContent}>
                    <Image style={s.grandude} source={{ url: 'assets/images/grandude.png' }} />
                    <View style={s.buttons}>
                        <TouchableOpacity style={s.leftButton}>
                            <Image style={s.avatar} source={{ url: 'assets/images/avatar.png' }} />
                            <View style={s.leftTextBlock}>
                                <Text style={s.buttonTitle}>Профиль</Text>
                                <Text style={s.buttonDescription}>Lorem ipsum dolor sit amet</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={s.rightButton}>
                            <Image style={s.icon} source={{ url: 'assets/icons/calendar_icon.png' }} />
                            <View>
                                <Text style={[ s.buttonTitle, { textAlign: 'center' }]}>Мои обращения</Text>
                                <Text style={[ s.buttonDescription, { textAlign: 'center' }]}>21 обращение</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity style={s.chatButton}>
                        <Image style={s.icon} source={{ url: 'assets/icons/calendar_icon.png' }} />
                        <View>
                            <Text style={[ s.buttonTitle, { textAlign: 'center' }]}>Мои обращения</Text>
                            <Text style={[ s.buttonDescription, { textAlign: 'center' }]}>21 обращение</Text>
                        </View>
                    </TouchableOpacity>
                </ScrollView>
                <View
                    onStartShouldSetResponder={() => true}

                    onResponderMove={!this.state.forceAction ? this.handleResponderMove : null}
                    onResponderRelease={this.handleResponderRelease}
                    style={[ s.callButton, {
                        transform: [{ scale: this.state.force / 2 + 1 }],
                        width: forceAnimationValue.interpolate({
                            inputRange: [ 0, 1 ],
                            outputRange: [ 84, 184 ]
                        })
                    }]}>
                    <Image style={s.callIcon} source={{ url: 'assets/icons/phone_icon.png' }} />
                </View>
            </View>
        );
    }
}

const s = StyleSheet.create({
    wrapper: {
        width: '100%',
        height: '100%'
    },
    container: {
        backgroundColor: 'white'
    },
    containerContent: {
        alignItems: 'center'
    },
    grandude: {
        width: 263,
        height: 274,
        resizeMode: 'contain',
        marginVertical: 50
    },

    // Buttons
    buttons: {
        alignItems: 'center',
        justifyContent: 'space-around',
        flexDirection: 'row',
        width: '95%'
    },
    leftButton: {
        width: 168,
        height: 92,
        borderRadius: 7,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        backgroundColor: '#B7ACE1',
        elevation: 6,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6
    },
    rightButton: {
        width: 168,
        height: 92,
        borderRadius: 7,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#B7ACE1',
        elevation: 6,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.15,
        shadowRadius: 6
    },
    avatar: {
        width: 57,
        height: 57
    },
    leftTextBlock: {
        width: '55%',
        paddingLeft: 11
    },
    buttonTitle: {
        fontSize: 15,
        marginVertical: 3
    },
    buttonDescription: {
        fontSize: 10
    },
    icon: {
        width: 38,
        height: 38
    },

    // Call
    callButton: {
        position: 'absolute',
        backgroundColor: '#FF386C',
        // width: 84,
        height: 84,
        bottom: 21,
        right: 14,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 42,
        elevation: 13,
        shadowColor: '#000',
        shadowOffset: { width: 5, height: 5 },
        shadowOpacity: 0.7,
        shadowRadius: 13
    },
    callIcon: {
        width: 31,
        height: 31
    },

    chatButton: {

    }
});

export { Main };