Avatar 컴포넌트에서는 size를 Props로 받아와서 이 값을 컴포넌트의 크기로 설정하도록 구현해줬습니다. 그리고 size가 주어지지 않으면 기본값으로 32를 사용하도록 설정해줬습니다.

그럼 이제 이 컴포넌트를 Profile 컴포넌트에서 사용해볼까요?

components/Profile.js

(...)
import Avatar from './Avatar';

function Profile({userId}) {
  (...)
  return (
    <FlatList
      style={styles.block}
      ListHeaderComponent={
        <View style={styles.userInfo}>
          <Avatar source={user.photoURL && {uri: user.photoURL}} size={128}/>
          <Text style={styles.username}>{user.displayName}</Text>
        </View>
      }
    />
  );
}

(...)