import React, { useContext } from 'react' import { Switch } from 'react-native' import { useTheme } from 'styled-components' import styled from 'styled-components/native' import { ThemeActionsContext } from 'store' import { useTranslation } from 'react-i18next' import Container from 'components/atoms/container' import Link from 'components/atoms/link' const Wrapper = styled.View` height: 85px; flex-direction: row; align-items: stretch; background-color: ${props => props.theme.colors.backgroundPrimary}; ` const Column = Container const Left = styled(Column)` padding-left: 20px; ` const Right = styled(Column)` padding-right: 20px; ` const Center = styled(Container)` height: 100%; ` const ThemeText = styled.Text` color: ${props => props.theme.colors.textPrimary}; ` export default function Header() { const { t } = useTranslation() const { toggleTheme } = useContext(ThemeActionsContext) const theme = useTheme() return ( <Wrapper> <Left> <Link title={t('home:title')} path={'/'} /> </Left> <Center> <ThemeText>{t('nav:topCenter')}</ThemeText> </Center> <Right> <Link title={t('home:settingsButton')} path={'/settings'} /> <Switch onValueChange={toggleTheme} value={theme.name !== 'light'} testID="theme-switch" /> </Right> </Wrapper> ) }