Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Touchableopacity not working inside Animated.View

See original GitHub issue

Description: Touchableopacity having style container_icon are not working, i have tried everything. Please Help. I think this might be related to Something like Touchableopacity not working inside Animated.View

React Native version:

System:
OS: Windows 10 10.0.18363
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Memory: 14.21 GB / 23.89 GB

Binaries: Node: 12.10.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.19.1 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD SDKs: Android SDK: API Levels: 19, 23, 24, 25, 26, 27, 28, 29 Build Tools: 19.1.0, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3, 29.0.2 System Images: android-19 | Intel x86 Atom, android-19 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom_64, android-27 | Google APIs Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5

Steps To Reproduce

`import React, { Component } from ‘react’; import { Animated, Easing, View, SafeAreaView, Text, FlatList, StyleSheet, Image, Dimensions, TouchableOpacity, ImageBackground, ScrollView, TextInput, Keyboard } from ‘react-native’; import { Icon, Content } from “native-base”; import { connect } from ‘react-redux’; import Footer from “…/components/Footer”;

const width = Dimensions.get(‘screen’).width; const height = Dimensions.get(‘screen’).height; class Profile extends Component { constructor(props) { console.log(props); super(props); this.state = { loginData: props.LoginReducer.loginData, scrollY: new Animated.Value(0) } this.animatedValue = new Animated.Value(0) }

componentDidMount() {
    this.keyboardDidShowListener = Keyboard.addListener(
        'keyboardDidShow',
        () => {
            this.animate()
        },
    );
    this.keyboardDidHideListener = Keyboard.addListener(
        'keyboardDidHide',
        () => {
            this.animateBack()
        },
    );
}
onChangeText = (text, state) => {
    this.setState({ [state]: text })
}

_getHeaderBackgroundColor = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: ['#E4335A', '#fff'],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCoverAndCardHeight = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [200, 120],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCardWidth = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: ['80%', '100%'],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCardBottom = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [-100, 0],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCardImageParentW = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [100, 50],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};
_getCardImageParentH = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [100, 50],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};
_getCardImageParentLeft = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [(width / 2) - 100, 10],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};
_getCardImageParentTop = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [-50, 5],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCardMainMT = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [70, 0],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getCardNameFontSize = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [18, 26],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};


_getCardIconParentColor = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: ['#fff', '#E4335A'],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};
_getIconColor = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: ['#E4335A', '#fff'],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

_getPageContainerMT = () => {
    return this.animatedValue.interpolate({
        inputRange: [0, 500],
        outputRange: [120, 10],
        extrapolate: 'clamp',
        useNativeDriver: true
    });
};

animate = () => {
    const createAnimation = function (value, duration, easing, delay = 0) {
        return Animated.timing(
            value,
            {
                toValue: 500,
                duration,
                easing,
                delay
            }
        )
    }
    Animated.parallel([
        createAnimation(this.animatedValue, 200, Easing.ease),
    ]).start()
}

animateBack = () => {
    const createAnimation = function (value, duration, easing, delay = 0) {
        return Animated.timing(
            value,
            {
                toValue: 0,
                duration,
                easing,
                delay
            }
        )
    }
    Animated.parallel([
        createAnimation(this.animatedValue, 200, Easing.ease),
    ]).start()
}


render() {
    const headerBackgroundColor = this._getHeaderBackgroundColor();
    const coverAndCardHeight = this._getCoverAndCardHeight()
    const cardBottom = this._getCardBottom()
    const cardImageParentH = this._getCardImageParentH()
    const cardImageParentLeft = this._getCardImageParentLeft()
    const cardImageParentTop = this._getCardImageParentTop()
    const cardMainMT = this._getCardMainMT()
    const cardNameFontSize = this._getCardNameFontSize()
    const cardIconParentColor = this._getCardIconParentColor()
    const iconColor = this._getIconColor()
    const cardWidth = this._getCardWidth()
    const pageContainerMT = this._getPageContainerMT()
    const AnimatedIcon = Animated.createAnimatedComponent(Icon)

    return (
        <SafeAreaView style={{ flex: 1 }}>
            <View style={styles.container}>
                <Animated.View style={[styles.cover, { backgroundColor: headerBackgroundColor, height: coverAndCardHeight }]}>
                    <Animated.View style={[styles.card, { height: coverAndCardHeight, bottom: cardBottom, width: cardWidth }]}>
                        <Animated.View style={[styles.cardImageParent, {
                            height: cardImageParentH, width: cardImageParentH, top: cardImageParentTop, left: cardImageParentLeft
                        }]}>
                            <Image
                                style={styles.cardImage}
                                source={{ uri: this.state.loginData.photo }}
                            />
                        </Animated.View>
                        <Animated.View style={[styles.cardMain, { marginTop: cardMainMT }]}>
                            <View style={styles.cardNameParent}>
                                <Animated.Text style={[styles.cardName, { fontSize: cardNameFontSize }]}>{this.state.loginData.fname} {this.state.loginData.lname}</Animated.Text>
                            </View>
                            <Animated.View style={[styles.cardIconParent, { backgroundColor: cardIconParentColor }]}>
                                <TouchableOpacity style={styles.container_icon} onPress={() => { alert() }}>
                                    <AnimatedIcon type="SimpleLineIcons" name="user-female" style={[styles.icon, { color: iconColor }]} />
                                    <Animated.Text style={[styles.cardIconText, { color: iconColor }]}>Personal</Animated.Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.container_icon}>
                                    <AnimatedIcon type="FontAwesome" name="address-book-o" style={[styles.icon, { color: iconColor }]} />
                                    <Animated.Text style={[styles.cardIconText, { color: iconColor }]}>Address Book</Animated.Text>
                                </TouchableOpacity>
                                <TouchableOpacity style={styles.container_icon}>
                                    <AnimatedIcon type="MaterialCommunityIcons" name="chess-queen" style={[styles.icon, { color: iconColor }]} />
                                    <Animated.Text style={[styles.cardIconText, { color: iconColor }]}>Rewards</Animated.Text>
                                </TouchableOpacity>
                            </Animated.View>
                        </Animated.View>

                    </Animated.View>
                </Animated.View>
                <Animated.ScrollView
                    keyboardShouldPersistTaps="never"
                    overScrollMode={'never'}
                    style={[styles.pageContainer, { marginTop: pageContainerMT }]}
                    scrollEventThrottle={16}>
                    <View style={styles.parentField}>
                        <Text style={styles.parentFieldLabel}>First Name</Text>
                        <TextInput style={styles.parentFieldInput}
                            autoCompleteType={"name"}
                            keyboardType={"default"}
                            onChangeText={text => this.onChangeText(text, 'fname')}
                            value={this.state.fname} placeholder={'First Name'} placeholderTextColor={"#A9A9A9"}></TextInput>
                    </View>
                    <View style={styles.parentField}>
                        <Text style={styles.parentFieldLabel}>Last Name</Text>
                        <TextInput style={styles.parentFieldInput}
                            autoCompleteType={"name"}
                            keyboardType={"default"}
                            onChangeText={text => this.onChangeText(text, 'lname')}
                            value={this.state.lname} placeholder={'Last Name'} placeholderTextColor={"#A9A9A9"}></TextInput>
                    </View>
                    <View style={styles.parentField}>
                        <Text style={styles.parentFieldLabel}>Email</Text>
                        <TextInput style={styles.parentFieldInput}
                            autoCompleteType={"email"}
                            keyboardType={"email-address"}
                            onChangeText={text => this.onChangeText(text, 'email')}
                            value={this.state.email} placeholder={'Email'} placeholderTextColor={"#A9A9A9"}></TextInput>
                    </View>
                    <View style={styles.parentField}>
                        <Text style={styles.parentFieldLabel}>Phone</Text>
                        <TextInput style={styles.parentFieldInput}
                            autoCompleteType={"tel"}
                            keyboardType={"number-pad"}
                            onChangeText={text => this.onChangeText(text, 'phone')}
                            value={this.state.phone} placeholder={'Phone'} placeholderTextColor={"#A9A9A9"}></TextInput>
                    </View>
                </Animated.ScrollView>

            </View>
            <Footer navigation={this.props.navigation} route={this.props.route} />
        </SafeAreaView >
    );
}

}

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: ‘#fff’ }, cover: { // height: 200, position: ‘relative’, justifyContent: ‘center’, alignItems: ‘center’, // backgroundColor: ‘#E4335A’ }, card: { // height: 200, position: ‘absolute’, backgroundColor: ‘rgba(255,255,255,0.9)’, // bottom: - 100, // width: ‘80%’, borderRadius: 5, justifyContent: ‘flex-start’, alignItems: ‘center’, }, cardImageParent: { borderRadius: 50, borderColor: ‘#fff’, borderWidth: 1, position: ‘absolute’//top: -50,height: 100, width: 100, }, cardImage: { alignSelf: ‘center’, height: ‘100%’, width: ‘100%’, borderRadius: 50 }, cardMain: {},//marginTop: 70 cardNameParent: { flex: 1, alignItems: ‘center’, justifyContent: ‘center’ }, cardName: { fontWeight: ‘bold’, textAlign: ‘center’, },//fontSize: 18,flex: 1 cardIconParent: { flexDirection: ‘row’, justifyContent: ‘space-around’, alignItems: ‘center’, width: ‘100%’ }, container_icon: { flex: 1, justifyContent: ‘center’, alignItems: ‘center’ }, icon: { fontSize: 35, padding: 3 }, cardIconText: { fontSize: 14, fontWeight: ‘bold’ }, pageContainer: {},//marginTop: 120, parentField: { justifyContent: ‘flex-start’, alignItems: ‘flex-start’, padding: 5, margin: 5, position: ‘relative’ }, parentFieldLabel: { fontSize: 14, fontWeight: ‘bold’, color: ‘#E4335A’, backgroundColor: ‘#fff’, position: ‘absolute’, zIndex: 1, left: 5, top: 0 }, parentFieldInput: { height: 50, borderColor: ‘#E4335A’, borderWidth: 2, borderRadius: 5, width: width / 1.8, fontSize: 18, textAlignVertical: ‘center’, color: ‘#101010’, backgroundColor: ‘rgba(255, 255, 255, 0.8)’, padding: 5, paddingTop: 10, width: ‘100%’ },

});

const mapStateToProps = state => { console.log(‘profile’, state) return { LoginReducer: state.LoginReducer }; };

const mapDispatchToProps = { };

export default connect(mapStateToProps, mapDispatchToProps)(Profile);`