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.

Avatar Background Image Flashing Grey

See original GitHub issue

Issue- when I type into handle change basically every time it re-renders the overlayContainerStyle every time. I am able to switch to just image and it will never re-render, but I would like to use the avatar and edit badge. I included a video attachment with what is going on

Versions:

“react-native-elements”: “^1.2.0”, “react-native”: “0.60.5”,

Video of issue:

https://vimeo.com/user105102986/review/372705871/7aa951b3a3

Code:

WHERE THE ISSUES IS:

<Avatar
                  size="xlarge"
                  rounded
                  source={{ uri: this.state.profilePicture }}
                  showEditButton
                />

Full code

import React, { Component } from "react";
import { connect } from "react-redux";
import {
  updateProfilePhoto,
  updateUserInformation,
  loadCurrentUserProfile
} from "../../../store/profile/actions";
import { loadCurrentUser } from "../../../store/chat/actions";

import {
  Text,
  TextInput,
  View,
  SafeAreaView,
  ScrollView,
  ActivityIndicator,
} from "react-native";
import { Avatar } from "react-native-elements";
import styles from "./Styles";

class EditProfileComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      description: this.props.currentUser.about,
      profilePicture: this.props.currentUser.profilePicture,
    };

    this.handleDescriptionChange = description => {
      this.setState({ description });
    };
  }

  componentDidMount() {
    this.props.updateProfilePhoto;
    this.props.updateUserInformation;
    this.props.loadCurrentUser;
  }

  componentDidUpdate(prevProps) {
    if (this.props.photoUrl && prevProps.photoUrl !== this.props.photoUrl) {
      this.setState({ profilePicture: this.props.photoUrl });
    }
  }

  
  render() {
    const { username, loadingProfilePicture } = this.props;
    const {
      header,
      flex1,
      safeAreaView,
      label,
      descriptionContainer,
      descriptionText,
      characterCount,
    } = styles;
    return (
      <SafeAreaView style={safeAreaView}>
        <View style={flex1}>
          <ScrollView style={flex1}>
            <View style={header}>
              {!loadingProfilePicture ? (
                <Avatar
                  size="xlarge"
                  rounded
                  source={{ uri: this.state.profilePicture }}
                  showEditButton
                />
              ) : (
                <ActivityIndicator />
              )}
              <Text style={styles.username}>{username}</Text>
            </View>
            <View style={flex1}>
              <Text style={label}>ABOUT ME:</Text>
              <View style={descriptionContainer}>
                <TextInput
                  multiline={true}
                  numberOfLines={10}
                  onChangeText={this.handleDescriptionChange}
                  value={this.state.description}
                  placeholder="Tell everyone about your riding style, 
                  favorite mountains, what makes you unique, etc.."
                  editable={true}
                  maxLength={300}
                  style={descriptionText}
                />
              </View>
              {this.state.description ? (
                <Text style={characterCount}>
                  Characters Count: {this.state.description.length}/300
                </Text>
              ) : null}
            </View>
          </ScrollView>
        </View>
      </SafeAreaView>
    );
  }
}

const mapStateToProps = state => ({
  loadingProfilePicture: state.profile.loadingProfilePicture,
  loadingProfileDescription: state.profile.loadingProfileDescription,
  currentUser: state.chat.currentUser,
  loading: state.chat.loadCurrentUser,
  photoUrl: state.profile.photoUrl,
  interests: state.profile.interests,
  currentUserProfile: state.profile.currentUserProfile
});

const mapDispatchToProps = {
  updateProfilePhoto,
  updateUserInformation,
  loadCurrentUser,
  loadCurrentUserProfile
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(EditProfileComponent);