import React, { FunctionComponent, ReactNode } from 'react';
import { ScrollView,
{{#unless hasStyledComponents}}StyleSheet, {{/unless}}Text, useColorScheme, View } from 'react-native';
{{#if hasI18n}}
import { useTranslation } from 'react-i18next';
{{#unless hasReactNavigationExample}}
import ChangeLanguage from 'i18n/ChangeLanguageButton/ChangeLanguage';
{{/unless}}
{{/if}}
import {
Colors,
Header,
LearnMoreLinks,
{{#unless hasI18n}}
DebugInstructions,
ReloadInstructions
{{/unless}}
} from 'react-native/Libraries/NewAppScreen';
{{#if hasStyledComponents}}
import styled from 'styled-components/native';
{{/if}}
const Section: FunctionComponent<{
children: ReactNode;
title: string;
}> = ({ children, title }) => {
return (
{{#if hasStyledComponents}}
{title}
{children}
{{else}}
{title}
{children}
{{/if}}
);
};
const Body: FunctionComponent = () => {
{{#if hasI18n}}
const { t } = useTranslation();
{{/if}}
return (
{{#if hasI18n}}
{t('Edit')} {{#if hasStyledComponents}}App.tsx{{else}}App.tsx{{/if}} {t('Screen Change')}
{t('Press')} {{#if hasStyledComponents}}Cmd + R{{else}}Cmd + R{{/if}} {t('Simulator')} {t('Reload')}
{t('Press')} {{#if hasStyledComponents}}Cmd + D{{else}}Cmd + D{{/if}} {t('Simulator')} {t('Or')}{' '}
{{#if hasStyledComponents}}{t('Shake')}{{else}}{t('Shake')}{{/if}} {t('Dev Menu')}
{{else}}
Edit {{#if hasStyledComponents}}App.tsx{{else}}App.tsx{{/if}} to change this screen and then come back to see your edits.
Read the docs to discover what to do next:
{{/if}}
)
}
export const HomeComponent = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
};
return (
{{#unless hasReactNavigationExample}}
{{#if hasI18n}}
{{/if}}
{{/unless}}
);
};
{{#if hasStyledComponents}}
const StyledSectionContainer = styled.View`
margin-top: 32px;
padding-horizontal: 24px;
`;
const HighlightedText = styled.Text`
font-weight: 700;
`;
{{else}}
const styles = StyleSheet.create({
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24
},
highlight: {
fontWeight: '700'
}
});
{{/if}}