더북(TheBook)

이미지 업로드는 보통 1~3초 정도 걸리기 때문에 이미지를 업로드하는 동안 스피너를 보여주는 것이 좋습니다. loading 상태가 true일 때 버튼 대신에 ActivityIndicator 컴포넌트를 보여주도록 구현해보세요.

components/SetupProfile.js

(...)
import {
  (...)
  ActivityIndicator,
} from 'react-native';
(...)

function SetupProfile() {
  (...)
  return (
    <View style={styles.block}>
      (...)
      <View style={styles.form}>
        <BorderedInput
          placeholder="닉네임"
          value={displayName}
          onChangeText={setDisplayName}
          onSubmitEditing={onSubmit}
          returnKeyType="next"
        />
        {loading ? (
          <ActivityIndicator size={32} color="#6200ee" style={styles.spinner} />
        ) : (
          <View style={styles.buttons}>
            <CustomButton title="다음" onPress={onSubmit} hasMarginBottom />
            <CustomButton title="취소" onPress={onCancel} theme="secondary" />
          </View>
        )}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    alignItems: 'center',
    marginTop: 24,
    paddingHorizontal: 16,
    width: '100%',
  },
(...)
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.