useSafeAreaInsets & TypeScript

참고 : https://velog.io/@hwang-eunji/styled-component-typescript

styled-component에 props 전달시...

styledPropsType 이라는 타입을 지정하고

제너릭 타입으로 전달하여 해결

import React from 'react';
import styled from 'styled-components/native';
import { themeType } from '../theme';
import { Button } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const Conatiner = styled.View<styledPropsType>` // ⭐️⭐️⭐️
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${({ theme }) => theme.background};
  padding: 0 20px;
  padding-top: ${({ insets }) => insets.top}px;
  padding-bottom: ${({ insets }) => insets.bottom}px;
  padding-left: ${({ insets }) => insets.left}px;
  padding-right: ${({ insets }) => insets.right}px;
`;

const StyledText = styled.Text`
  font-size: 30px;
  color: ${({ theme }: { theme: themeType }) => theme.text};
`;

interface styledPropsType {   // ⭐️⭐️⭐️
  insets: {
    bottom: number;
    left: number;
    right: number;
    top: number;
  };
  theme: themeType;
}

const Signin = () => {
  const insets = useSafeAreaInsets();

  return (
    <Conatiner insets={insets}>
      <StyledText>Signin</StyledText>
      <Button title="signup" onPress={() => {}} />
    </Conatiner>
  );
};

export default Signin;