키보드 제어하기

import {
	Image,
	KeyboardAvoidingView,
	StyleSheet,
	View,
	Platform,
	Pressable,
	Keyboard,
} from 'react-native';
import Input, { KeyboardTypes, ReturnkeyTypes } from '../components/Input';

const TestAvoid = () => {
	return (
		<KeyboardAvoidingView
			style={styles.avoid}
			behavior={Platform.select({
				ios: 'position',
			})}
			contentContainerStyle={{ flex: 1 }}
		>
			<Pressable style={{ flex: 1 }} onPress={() => Keyboard.dismiss()}>
				<View style={[styles.views, { backgroundColor: '#047857' }]}>
					<Image
						source={require('../../assets/main.png')}
						style={styles.image}
						resizeMode="cover"
					></Image>
				</View>
				<View style={[styles.views, { backgroundColor: '#0369a1' }]}>
					<Input
						title={'email'}
						placeholder={'your@email.com'}
						keyboardType={KeyboardTypes.EMAIL}
						returnkeyType={ReturnkeyTypes.NEXT}
					></Input>
				</View>
			</Pressable>
		</KeyboardAvoidingView>
	);
};

const styles = StyleSheet.create({
	avoid: {
		flex: 3,
	},
	views: {
		flex: 1,
		justifyContent: 'center',
		align: 'center',
	},
	image: { width: 200, height: 200 },
});

export default TestAvoid;

위 코드는 키보드를 제어하기 위한 코드이다.

• behavior 속성 사용하기
• Pressable 을 써서 키보드 외부를 클릭했을 때 숨겨지게 하기 (Keyboard.dismiss())

위는 많이 쓰는 컴포넌트이므로

import {
	View,
	StyleSheet,
	Text,
	Image,
	KeyboardAvoidingView,
	Pressable,
	Keyboard,
} from 'react-native';
import PropTypes from 'prop-types';

const SafeInputView = ({ children }) => {
	return (
		<KeyboardAvoidingView style={styles.avoid}>
			<Pressable style={styles.avoid} onPress={Keyboard.dismiss}>
				{children}
			</Pressable>
		</KeyboardAvoidingView>
	);
};

SafeInputView.propTypes = {
	children: PropTypes.node,
};

const styles = StyleSheet.create({
	avoid: {
		flex: 1,
	},
	container: {
		flex: 1,
		alignItems: 'center',
		justifyContent: 'center',
	},
	image: {
		width: 200,
		height: 200,
	},
});

export default SafeInputView;

위와 같이 컴포넌트로 만들어두고 prop으로 node를 받아오면 그를 태그로 감싸기만해도 해당 내용이 적용된다.