안녕하세요, 질문있어서 글 올립니다.

[Kwon9tae]

버튼 컴포넌트 제작시에, rn-photo에 이메일 컴포넌트 칸과 비밀번호 컴포넌트 칸의 좌우 너비만큼 로그인 버튼을 만드려면 어떻게 해야 하나요? 계속 아래와 같이 나오네요.

방법을 도무지 모르겠어서 너무 슬픕니다..ㅜㅜ

import {
ActivityIndicator,
Pressable,
StyleSheet,
Text,
View,
} from "react-native";
import PropTypes from "prop-types";
import { WHITE, GRAY, PRIMARY } from "../Colors";

const Button = ({ styles, title, onPress, disabled, isLoading }) => {
return (
<View sytle={[defaultStyles.container, styles?.container]}>
<Pressable
onPress={() => onPress()}
disabled={disabled || isLoading}
style={({ pressed }) => [
defaultStyles.button,
{
backgroundColor: (() => {
switch (true) {
case disabled || isLoading:
return PRIMARY.LIGHT;
case pressed:
return PRIMARY.DARK;
default:
return PRIMARY.DEFAULT;
}
})(),
},
styles?.button,
]}
>
{isLoading ? (

) : (
<Text style={[defaultStyles.title, styles?.title]}>{title}
)}


);
};

Button.propTypes = {
styles: PropTypes.object,
title: PropTypes.string.isRequired,
onPress: PropTypes.func.isRequired,
disabled: PropTypes.bool,
isLoading: PropTypes.bool,
};

const defaultStyles = StyleSheet.create({
container: {
width: "100%",
},
button: {
paddingVertical: 20,
justifyContent: "center",
alignItems: "center",
},
title: {
color: WHITE,
fontSize: 16,
fontWeight: "700",
lineHeight: 20,
},
});

export default Button;

import { useNavigation } from "@react-navigation/native";
import { StyleSheet, Text, View } from "react-native";
import { ContentRoutes } from "../navigations/routes";
import Input, { InputTypes, ReturnKeyTypes } from "../components/Input";
import { useState } from "react";
import Button from "../components/Button";

const SignInScreen = () => {
const navigation = useNavigation();

const [id, setID] = useState("");
const [password, setPassword] = useState("");

return (

Sign In
<Input
styles={inputStyles}
value={id}
onChangeText={(text) => setID(text.trim())}
inputType={InputTypes.ID}
returnKeyType={ReturnKeyTypes.NEXT}
/>
<Input
styles={inputStyles}
value={password}
onChangeText={(text) => setPassword(text.trim())}
inputType={InputTypes.PASSWORD}
returnKeyType={ReturnKeyTypes.DONE}
/>
<Button
title="로그인"
onPress={() => navigation.navigate(ContentRoutes.HOME)}
styles={{
container: {
paddingHorizontal: 20,
marginTop: 20,
},
}}
/>

);
};

const inputStyles = StyleSheet.create({
container: { marginBottom: 20, paddingHorizontal: 20 },
input: { borderWidth: 1 },
});

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});

export default SignInScreen;

[Alchemist85K]

안녕하세요 @Kwon9tae

SignInScreen.js 파일에서 컴포넌트를 View 컴포넌트로 감싸고, 스타일을 적용해보세요.
그리고 Button 컴포넌트의 View 컴포넌트에 오타 있습니다. sytle이 아니라 style입니다.

질문을 할 때는, 프로젝트 전체를 깃헙에 올리고 해당 레포 링크를 남겨주세요.
추가로, 책의 내용을 벗어난 내용(ex. 개인 프로젝트)에 대해서는 답변하지 않고 있습니다.

감사합니다.