ThemeProvider

Theme를 변경하기 위해 기본적으로 background color / text color 들을 변경한다.

이걸 위해서

매번 $(props=>props.light?:"light":"dark")

이런 식으로 매번 모든 컴포넌트에서 사용하면 코드가 복잡해지고 헷갈리게 된다.

이를 위해서 ThemeProvider를 App.js 전체를 묶어 어디에서나 받을 수 있게 사용한다.

1. styled 되어 있는 theme.js를 만든다

export const lightTheme = {
  BgColor:"="
  textColor:"",
}
export const darkTheme = {
  BgColor:"="
  textColor:"",
}

2. App.js 에서 받아온다.

import { lightTheme, darkTheme } from './styled';

// hook을 이용하여 현재 theme를 받아온다.

const isLight = useColorScheme() === "Light";

// 그리고 return에서 ThemeProvider를 사용한다.

return (
  <ThemeProvider theme={isLight ? lightTheme : darkTheme}>
  	<NavigationContainer>
  		<Root></Root>
	</NavigationContainer>
  </ThemeProvider>
);

3. App.js 내부에 있는 어디서든 theme을 prop로 받아 올 수 있다.

const Title = styled.Text`
	color:${props=>props.theme.textColor};
`;