styled-components

리액트에서의 styled-components 라이브러리는 리액트 네이티브에서도 사용할 수 있습니다.

yarn addd styled-components

설치는 동일하지만 임포트 시에 native폴더를 가리켜야 합니다.

import styled from "styled-components/native`

사용방법은 기존 웹에서와 동일합니다. styled.컴포넌트 형식으로 사용하면 됩니다. 웹에서는 HTML태그들을 선택했었다면 리액트 네이티브에서는 styled.View, styled.TouchableOpacity와 같이 사용하면 됩니다.

const Btn = styled.TouchableOpacity`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Movies = () => (
    <Btn>
        <Text>Movies</Text>
    </Btn>
);

styled-components를 사용하게 된다면 개발하는 입장에서 코드를 더 시맨틱하게 작성할 수 있다는 것이 장점입니다.

Theme

App.js에서 루트 컴포넌트로 ThemeProvider 컴포넌트를 사용합니다. ThemeProvider의 theme 프롭스로 객체를 전달하면 모든 하위 컴포넌트에서 해당 객체 프로퍼티에 접근할 수 있게 됩니다.

따라서 컬러에 대한 코드값이라던지 컬러명 등을 통해 styled-components에서 프롭스 값으로 활용할 수 있게 됩니다. (웹에서의 리액트 테마 기능과 동일)

styled.js라는 이름으로 파일을 생성하여 컬러 및 스타일과 관련된 값들을 객체에 저장합니다.

export const lightTheme = {
    mainBgColor: 'white',
    textColor: '#1e272e',
};
export const darkTheme = {
    mainBgColor: '#1e272e',
    textColor: '#d2dae2',
};

이후 App.js에 ThemeProvider와 함께 관련값들을 제공합니다.

// App.js
import { ThemeProvider } from 'styled-components';
import { darkTheme, lightTheme } from './styled';

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

마지막으로 테마에 있는 스타일링 객체를 사용할때 프롭스값을 불러와 등록합니다.

// styled-components 컴포넌트
const Btn = styled.TouchableOpacity`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: ${(props) => props.theme.mainBgColor};
`;

expo-linear-gradient

엑스포에서는 linear-gradient 효과를 갖는 컴포넌트를 제공합니다.

# 설치
expo install expo-linear-gradient

# 설치 후 ios 개발 중이라면 새로 빌드
npx pod-install ios

# ios 빌드
npm run ios

import { LinearGradient } from 'expo-linear-gradient';

function Component() {
    return (
        <Container>
            <LinearGradient
                colors={['transparent', BLACK_COLOR]}
                style={StyleSheet.absoluteFill}
            />
        </Container>
    );
}