상태 변수

상태변수란, 그 Text에 바인딩되는 변수 변수를 ‘’ 로 설정하면, 계속 빈값으로 됨.

useState를 쓴 값에 change이벤트를 걸어주어 연결시켜줘야 한다.

아래와 같음

변수 생성

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

value, onChageText 이벤트 연결

<Input
	value={email}
	onChangeText={text => setEmail(text.trim())}
	title={'email'}
	placeholder={'your@email.com'}
	keyboardType={KeyboardTypes.EMAIL}
	returnkeyType={ReturnkeyTypes.NEXT}
></Input>

<TextInput
	value={value}
	onChangeText={onChangeText}
	...
></TextInput>

위와 같이 작업해주면 연결됨.

isFocused, isValue

focus되었을 때와 값이 있을 때, 색상 설정

먼저 색상 설정 js 파일

export const WHITE = '#ffffff';
export const BLACK = '#000000';
export const PRIMARY = {
	DEFAULT: '#2563eb',
};

export const GRAY = {
	DEFAULT: '#a3a3a3',
};

input.js 에서 다음과 같이 사용한다.

import { TextInput, Text, View, StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { BLACK, GRAY, PRIMARY } from '../colors';
import { useState } from 'react';

export const KeyboardTypes = {
	DEFAULT: 'default',
	EMAIL: 'email-address',
};

export const ReturnkeyTypes = {
	DONE: 'done',
	NEXT: 'next',
};

const Input = ({
	title,
	placeholder,
	value,
	onChangeText,
	keyboardType,
	returnkeyType,
	secureTextEntry,
}) => {
	const [isFocued, setIsFocused] = useState(false);
	return (
		<View style={styles.container}>
			<Text
				style={[
					styles.title,
					value && styles.hasValueTitle,
					isFocued && styles.focusedTitle,
				]}
			>
				{title}
			</Text>
			<TextInput
				value={value}
				onChangeText={onChangeText}
				style={[styles.input, isFocued && styles.focusedTitle]}
				placeholder={placeholder ?? title}
				placeholderTextColor={GRAY.DEFAULT}
				autoCapitalize="none"
				autoCorrect={false}
				keyboardType={keyboardType}
				returnKeyType={returnkeyType}
				textContentType="none"
				secureTextEntry={secureTextEntry}
				onBlur={() => setIsFocused(false)}
				onFocus={() => setIsFocused(true)}
			></TextInput>
		</View>
	);
};

Input.propTypes = {
	title: PropTypes.string,
	placeholder: PropTypes.string,
	value: PropTypes.string,
	keyboardType: PropTypes.oneOf(Object.values(KeyboardTypes)),
	returnKeyType: PropTypes.oneOf(Object.values(ReturnkeyTypes)),
	secureTextEntry: PropTypes.bool,
};

const styles = StyleSheet.create({
	container: {
		width: '100%',
		paddingHorizontal: 20,
		marginVertical: 10,
	},
	title: {
		color: GRAY.DEFAULT,
		marginBottom: 4,
	},
	focusedTitle: {
		color: PRIMARY.DEFAULT,
		borderColor: PRIMARY.DEFAULT,
		marginBottom: 4,
	},
	hasValueTitle: {
		color: BLACK,
		fontWeight: 600,
	},
	input: {
		borderWidth: 1,
		borderRadius: 8,
		borderColor: GRAY.DEFAULT,
		paddingHorizontal: 20,
		height: 42,
	},
	hasValueInput: {
		borderColor: BLACK,
		color: BLACK,
	},
});

export default Input;