Resize Component On Another Screen

Question

I have this Avatar component and I'm trying to resize it on another screen but with no luck Avatar:

import React from "react";
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  ActivityIndicator,
} from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import * as ImagePicker from "expo-image-picker";
import * as Permissions from "expo-permissions";
import firebase from "firebase";

export default class Avatar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: "https://reactnative.dev/img/tiny_logo.png",
    };
  }

  _pickImage = async () => {
    await Permissions.askAsync(Permissions.CAMERA_ROLL);
    console.log("PICKER");
    let pickerResult = await ImagePicker.launchImageLibraryAsync({
      allowsEditing: true,
      aspect: [4, 3],
    });

    this._handleImagePicked(pickerResult);
  };

  _handleImagePicked = async (pickerResult) => {
    try {
      this.setState({ uploading: true });
      if (!pickerResult.cancelled) {
        var uploadUrl = await this.uploadImageAsync(pickerResult.uri);
        this.setState({ image: uploadUrl });
      }
    } catch (e) {
      console.log(e);
      alert("Upload failed, sorry :(");
    } finally {
      this.setState({ uploading: false });
    }
  };

  uploadImageAsync = async (uri) => {
    const blob = await new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();
      xhr.onload = function () {
        resolve(xhr.response);
      };
      xhr.onerror = function (e) {
        console.log(e);
        reject(new TypeError("Network request failed"));
      };
      xhr.responseType = "blob";
      xhr.open("GET", uri, true);
      xhr.send(null);
    });

    const ref = firebase.storage().ref().child(this.props.user.uid);
    const snapshot = await ref.put(blob);

    // We're done with the blob, close and release it
    blob.close();

    return await snapshot.ref.getDownloadURL();
  };

  render() {
    let { image } = this.state;
    return (
      <TouchableOpacity style={styles.container} onPress={this._pickImage}>
        {this.state.uploading ? (
          <View style={styles.waiting}>
            <ActivityIndicator></ActivityIndicator>
          </View>
        ) : (
          <Image
            source={{
              uri: image,
            }}
            style={styles.avatar}
          />
        )}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  avatar: {
    width: 120,
    height: 120,
    borderRadius: 100,
  },
  waiting: {
    width: wp(29),
    height: hp(13.4),
    borderRadius: 100,
  },
});

and that is the screen Im trying to resize on:

import React from "react";
import { StyleSheet, Platform, Image, Button, Text, View } from "react-native";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";
import firebase from "../../util/firebase";
import Avatar from "../../components/Avatar";

export default class Home extends React.Component {
  state = { currentUser: null };
  handleLogout = () => {
    firebase
      .auth()
      .signOut()
      .then(function () {
        // Sign-out successful.
      })
      .catch(function (error) {
        // An error happened.
      });
  };
  render() {
    const { currentUser } = this.state;
    const { navigation } = this.props;
    return (
      <View style={styles.container}>
        <View style={styles.header}>
          <View style={styles.avater}>
            <Avatar />
          </View>
          <View style={styles.text}></View>
          <View style={styles.icon}></View>
        </View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
        <View style={styles.container}></View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#ffffff",
  },
  header: {
    height: hp(13.4),
  },
  avatar: {
    height: hp(11.4),
    width: wp(11.4),
  },
  text: {},
  icon: {},
});

I have tried inline styling inside the render, it didn't work I have also tried removing the weight and height from the avatar component but it didn't work either
what am I missing?

Answer 1

Why not try passing the style/height,width as props to Avatar component? By doing so, you can remove the parent View you have used to style it and provide the styling directly to the component.

In Avatar Component try

render() {
  let { image } = this.state;
  const {avatarStyle} = this.props;
  return (
    <TouchableOpacity style={avatarStyle} onPress={this._pickImage}>
      {this.state.uploading ? (
        <View style={styles.waiting}>
          <ActivityIndicator></ActivityIndicator>
        </View>
      ) : (
        <Image
          source={{
            uri: image,
          }}
          style={{flex:1}}
          resizeMode='contain'
        />
      )}
    </TouchableOpacity>
  );
  }

Here you might see I have used the resizeMode='contain' prop to fit the image in the container. Read more about it here

And wherever you use this component

return (
  <>
    <Avatar avatarStyle={{height: hp(11.4), width: wp(11.4), overflow:'hidden'}}/>
  </>
)