Attempted to assign to readonly property - Error

[hjain1]

Hi ,

We are facing attached issue after adding this library to our exitsting project. please guide us if anyone can.

I am attaching code also.

'use strict';

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

**import Dialogflow from "react-native-dialogflow";

var userMsgtime, botResponseTime;
export default class App extends Component {
constructor() {
super();

    this.state = {
        valueArray: [], disabled: false, listHeight: 0,
        scrollViewHeight: 0, chatText: '', messageArray: [],
    }


    this.index = 0;

    this.animatedValue = new Animated.Value(0);

    Dialogflow.setConfiguration(
        "djfhdjfdjfdjfdjfjdfj", Dialogflow.LANG_ENGLISH
    );
}

componentDidUpdate() {
    this.scrollToBottom()
}

scrollToBottom() {
    const bottomOfList = this.state.listHeight - this.state.scrollViewHeight
    console.log('scrollToBottom');
    this.scrollView.scrollTo({ y: bottomOfList })
}

onSendClick = () => {
    if (this.state.chatText == '') {
        return;
    }

    var today = new Date();

    var hours = ("0" + today.getHours()).slice(-2);
    var min = ("0" + today.getMinutes()).slice(-2);
    var ampm = (hours >= 12) ? "pm" : "am";
    userMsgtime = hours + ":" + min + " " + ampm;

    this.state.messageArray.push(this.state.chatText.trim());
    this.addMore();
    Dialogflow.requestQuery(this.state.chatText, result => this.setText(result), error => console.log(error));
    this.clearText();
}


addMore = () => {

    this.animatedValue.setValue(0);

    let newlyAddedValue = { index: this.index }

    this.setState({ disabled: true, valueArray: [...this.state.valueArray, newlyAddedValue] }, () => {
        Animated.timing(
            this.animatedValue,
            {
                toValue: 1,
                duration: 500,
                useNativeDriver: true
            }
        ).start(() => {
            this.index = this.index + 1;
            this.setState({ disabled: false });
        });
    });

}

setText(result) {
    console.log(result)

    var jsonResult = result.result.fulfillment.speech

    this.setState({ outputText: jsonResult })

    this.state.messageArray.push(this.state.outputText);

    var today = new Date();
    var hours = ("0" + today.getHours()).slice(-2);
    var min = ("0" + today.getMinutes()).slice(-2);
    var ampm = (hours >= 12) ? "pm" : "am";
    botResponseTime = hours + ":" + min + " " + ampm;

    this.addMore();
}

clearText() {
    this.textInput.setNativeProps({ text: '' });
}

render() {
    const animationValue = this.animatedValue.interpolate(
        {
            inputRange: [0, 1],
            outputRange: [-59, 0]
        });

    let newArray = this.state.valueArray.map((item, key) => {
        if ((key) == this.index) {

            if ((key % 2) == 0) {
                return (
                    <Animated.View key={key} style={[styles.viewHolder, styles.userStyle, { opacity: this.animatedValue, transform: [{ translateY: animationValue }] }]}
                    >
                        <Text style={[{ backgroundColor: '#FEF5E7' }, styles.text]}>
                            {this.state.messageArray[key]}
                        </Text>
                        <Text style={{ color: 'black', fontSize: 10 }}>
                            {userMsgtime}
                        </Text>
                    </Animated.View>
                );
            } else {
                return (
                    <Animated.View key={key} style={[styles.viewHolder, styles.botStyle, { opacity: this.animatedValue, transform: [{ translateY: animationValue }] }]}>


                        <Image source={require('./images/bot.png')} style={styles.botImage} />
                        <Text style={[{ backgroundColor: 'white' }, styles.text]}>{this.state.messageArray[key]}</Text>
                        <Text style={{ fontSize: 10, color: 'black', alignSelf: 'flex-end' }}>
                            {botResponseTime}
                        </Text>
                    </Animated.View>
                );
            }

        }
        else {

            if ((key % 2) == 0) {
                return (
                    <View key={key} style={[styles.viewHolder, styles.userStyle]}
                    >
                        <Text style={[{ backgroundColor: '#FEF5E7' }, styles.text]}>{this.state.messageArray[key]}</Text>
                        <Text style={{ fontSize: 10, color: 'black', }}>
                            {userMsgtime}
                        </Text>
                    </View>
                );
            } else {
                return (
                    <View key={key} style={[styles.viewHolder, styles.botStyle]}>
                        <Image source={require('./images/bot.png')} style={styles.botImage} />
                        <Text style={[{ backgroundColor: 'white' }, styles.text]}>{this.state.messageArray[key]}</Text>
                        <Text style={{ fontSize: 10, color: 'black', alignSelf: 'flex-end' }}>
                            {botResponseTime}
                        </Text>
                    </View>

                );
            }

        }
    });

    return (
        <View style={styles.container}>

            <View
                style={{
                    position: 'absolute',
                    top: 0,
                    left: 0,
                    width: '100%',
                    height: '100%',
                }}
            >
                <Image
                    style={{
                        flex: 1,
                        resizeMode: 'cover'
                    }}
                    source={require('./images/background.jpg')}
                />
            </View>

            <ScrollView contentContainerStyle={this.scrollViewStyle}
                onContentSizeChange={(contentWidth, contentHeight) => {
                    this.setState({ listHeight: contentHeight })
                }}
                onLayout={(e) => {
                    const height = e.nativeEvent.layout.height
                    this.setState({ scrollViewHeight: height })
                }}
                ref={(ref) => this.scrollView = ref}
            >
                <View style={{ flex: 1, padding: 4 }}>
                    {
                        newArray
                    }
                </View>
            </ScrollView>


            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                <View style={{ flex: 1, flexDirection: 'row', margin: 4 }}>
                    <TextInput placeholder='Enter Message'
                        multiline={true}
                        ref={(ref) => this.textInput = ref}
                        underlineColorAndroid='transparent'
                        onChangeText={(chatText) => this.setState({ chatText })}
                        style={styles.textInput}>
                    </TextInput>
                </View>
                <TouchableOpacity activeOpacity={0.8} style={styles.btn} disabled={this.state.disabled} onPress={this.onSendClick}>
                    <Image source={require('./images/send_button.png')} style={styles.btnImage} />
                </TouchableOpacity>
            </View>

        </View >
    );
}

}

const styles = StyleSheet.create(
{
textInput: {
flex: 1,
fontSize: 16,
textAlign: 'left',
backgroundColor: 'white',
borderRadius: 20,
margin: 5,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 5,
paddingBottom: 5,
flexWrap: 'wrap',
},
container:
{
flex: 1,
// backgroundColor: '#FADBD8',

            justifyContent: 'center',
            // paddingTop: (Platform.OS == 'ios') ? 20 : 0
        },

    botStyle: {
        justifyContent: 'flex-start',
        alignItems: 'flex-start'
    },
    userStyle: {
        justifyContent: 'flex-end',
        alignItems: 'flex-end'
    },
    viewHolder:
        {
            flexDirection: 'row',
            margin: 4,
        },

    text:
        {
            padding: 10,
            minWidth: 20,
            borderRadius: 20,
            flex: .8,
            color: '#595757',
            fontSize: 14,
            flexWrap: 'wrap',
        },

    btn:
        {
            borderRadius: 30,
            width: 40,
            height: 40,
            marginRight: 5,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#728F49',
            padding: 15
        },
    botImage:
        {
            borderRadius: 30,
            width: 35,
            height: 35,
            marginRight: 5,
            padding: 15,
            alignSelf: 'center'
        },
    btnImage:
        {
            // resizeMode: 'contain',
            width: 20,
            height: 20,
            tintColor: 'white'
        }
});**

Thanks in advance.

[praba1989]

am also facing this issue. could anyone help to fix this issue?

[hjain1]

@praba1989 Please refer solution from following:
[(https://stackoverflow.com/questions/47918336/attempted-to-assign-to-readonly-property-with-react-native-dialogflow-error)]

If you will face this problem again after that solution, Please let me know.

[praba1989]

Hi @hjain1 After adding this line am facing error like "attempted to assign to readonly property"
import Dialogflow from "react-native-dialogflow"

Let me check with this new project

Thanks

[hjain1]

@praba1989 Please Don't install dialogFlow Library from yarn. Install it with npm. It should resolve your issue. DialogFlow doesn't support yarn.

[praba1989]

Hi @hjain1 I used npm

[praba1989]

I used "react-native": "0.44.0" it's works for me..

Thanks