개발/리액트 네이티브

React Native: onLayout Callback으로 컴포넌트 사이즈 측정하기

한희송 2021. 1. 7. 18:01

리액트 네이티브 onLayout을 활용한 컴포넌트 사이즈 측정 훅으로 만들기:

const useComponentSize = () => {
	const [size, setSize] = useState(0);
    const onLayout = useCallback((event) => {
    	const {width, height, x, y} = event.nativeEvent.layout;
        setSize({width, height, x, y});
    }, []);
    
    return [size, onLayout];
}

const App = () => {
	const [size, setSize] = useComponentSize();

	[...]
    <View onLayout={onLayout] />
}