TouchableOpacity и TouchableHighlight всегда отключены

Я пытаюсь отключить элемент TouchableOpacity, когда поля имени пользователя/пароля не заполнены. Это не работает. Он всегда находится в отключенном состоянии.

Я напечатал условие !this.state.username || !this.state.password на консоль, и оно ложно только тогда, когда оба заполнены, что является желаемым результатом, но отключенное свойство TouchableOpacity, похоже, не отражает значение в этом условии. Ниже приведен фрагмент моего кода:

может кто подскажет решение этой проблемы?

<ScrollView style={styles.content}>
      <View style={[styles.container, styles.content]}>
        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={emailicon}/>
          <TextInput style={[styles.inputs]}
              ref={`username`}
              placeholder="Email"
              keyboardType="email-address"
              underlineColorAndroid='transparent'
              onChangeText={(text) => {this.state.username = text}}
              required={true}
          />
        </View>

        <View style={styles.inputContainer}>
          <Image style={styles.inputIcon} source={keyicon}/>
          <TextInput
              style={styles.inputs}
              ref={`password`}
              placeholder="Password"
              secureTextEntry={true}
              underlineColorAndroid='transparent'
              onChangeText={(text) => {this.state.password = text}}
              required={true}
          />
        </View>

        <TouchableOpacity style={[styles.buttonContainer, styles.loginButton]}
                            onPress={() => { console.log(!this.state.username || !this.state.password) }} disabled={!this.state.username || !this.state.password}>
          <Text style={styles.loginText}>Login</Text>
        </TouchableOpacity>