<commit_before>import React, { Component } from 'react';
import {
    View,
    Image,
    TouchableWithoutFeedback
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import { Popup } from '../common/';

class AchievementItem extends Component {

    state = { showModal: false };

    onRowPress() {
        this.setState({ showModal: true });
    }

    onAccept() {
        this.setState({ showModal: false });
    }

    createMessage(message, achieved, achievementDate) {
        if (achieved) {
            return I18n.t('achievements_message_congratulations_award', 
                { message, achievementDate });
        }
        return message;
    }

    renderAnimatedImage(uri) {
        return (
            <Animatable.Image
                animation="bounceIn" easing="ease-out" iterationCount={1}
                style={styles.badgeStyle}
                source={{ uri }}
                defaultSource={{ uri: 'placeholderBadge' }}
            />
        );
    }

    renderImage(uri, achieved) {
        return (
                    <Image
                        style={styles.badgeStyle}
                        source={{ uri }}
                        defaultSource={{ uri: 'placeholderBadge' }}
                    >
                            <View style={achieved ? {} : styles.notAchievedStyle} />
                    </Image>
        );
    }

    render() {
        const { achievementImageURI, achievementDescription, 
            achieved, achievementDate } = this.props.achievement;
        return (  
            <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>
                <View style={styles.itemStyle}>
                        {this.renderImage(achievementImageURI, achieved)}
                    <Popup
                        visible={this.state.showModal}
                        onAccept={this.onAccept.bind(this)}
                        message={this.createMessage(achievementDescription, 
                            achieved, achievementDate)}
                    >
                        {achieved ? this.renderAnimatedImage(achievementImageURI) : 
                            this.renderImage(achievementImageURI)}
                    </Popup>
                </View>
            </TouchableWithoutFeedback>

        );
    }
}

const styles = {
    itemStyle: {
        backgroundColor: 'transparent',
        height: 100,
        width: 100
    },
    badgeStyle: {
        alignSelf: 'center',
        marginTop: 10,
        width: 80,
        height: 80,
    },
    notAchievedStyle: {
        width: 80,
        height: 80,
        borderRadius: 40,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    }
};

export default AchievementItem;
<commit_msg>last fix iphone 4/5<commit_after>import React, { Component } from 'react';
import {
    View,
    Image,
    TouchableWithoutFeedback,
    Dimensions
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import { Popup } from '../common/';

class AchievementItem extends Component {

    state = { showModal: false };

    onRowPress() {
        this.setState({ showModal: true });
    }

    onAccept() {
        this.setState({ showModal: false });
    }

    createMessage(message, achieved, achievementDate) {
        if (achieved) {
            return I18n.t('achievements_message_congratulations_award', 
                { message, achievementDate });
        }
        return message;
    }

    renderAnimatedImage(uri) {
        return (
            <Animatable.Image
                animation="bounceIn" easing="ease-out" iterationCount={1}
                style={styles.badgeStyle}
                source={{ uri }}
                defaultSource={{ uri: 'placeholderBadge' }}
            />
        );
    }

    renderImage(uri, achieved) {
        return (
                    <Image
                        style={styles.badgeStyle}
                        source={{ uri }}
                        defaultSource={{ uri: 'placeholderBadge' }}
                    >
                            <View style={achieved ? {} : styles.notAchievedStyle} />
                    </Image>
        );
    }

    render() {
        const { achievementImageURI, achievementDescription, 
            achieved, achievementDate } = this.props.achievement;
        return (  
            <TouchableWithoutFeedback onPress={this.onRowPress.bind(this)}>
                <View style={styles.itemStyle}>
                        {this.renderImage(achievementImageURI, achieved)}
                    <Popup
                        visible={this.state.showModal}
                        onAccept={this.onAccept.bind(this)}
                        message={this.createMessage(achievementDescription, 
                            achieved, achievementDate)}
                    >
                        {achieved ? this.renderAnimatedImage(achievementImageURI) : 
                            this.renderImage(achievementImageURI)}
                    </Popup>
                </View>
            </TouchableWithoutFeedback>

        );
    }
}

const deviceWidth = Dimensions.get('window').width;

const styles = {
    itemStyle: {
        backgroundColor: 'transparent',
        margin: (deviceWidth <= 320) ? 0 : 5,
        height: 100,
        width: 100
    },
    badgeStyle: {
        alignSelf: 'center',
        marginTop: 10,
        width: 80,
        height: 80,
    },
    notAchievedStyle: {
        width: 80,
        height: 80,
        borderRadius: 40,
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    }
};

export default AchievementItem;

{'fraction_non_alphanumeric': 0.10605794556628621, 'fraction_numerical': 0.011764705882352941, 'mean_word_length': 1.5462673223066608, 'pattern_counts': {'":': 0, '<': 24, '<?xml version=': 0, '>': 23, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4886040', 'n_tokens_mistral': 1581, 'n_tokens_neox': 1478, 'n_words': 282}