feat: mobile app package (#1075)

packages/mobile/src/Components/HeaderTitleView.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { Platform } from 'react-native'
+import styled from 'styled-components/native'
+
+type Props = {
+  subtitleColor?: string
+  title: string
+  subtitle?: string
+}
+
+const Container = styled.View`
+  /* background-color: ${props => props.theme.stylekitContrastBackgroundColor}; */
+  flex: 1;
+  justify-content: center;
+
+  ${Platform.OS === 'android' && 'align-items: flex-start; min-width: 100px;'}
+`
+const Title = styled.Text`
+  color: ${props => props.theme.stylekitForegroundColor};
+  font-weight: bold;
+  font-size: 18px;
+  text-align: center;
+`
+const SubTitle = styled.Text.attrs(() => ({
+  adjustsFontSizeToFit: true,
+  numberOfLines: 1,
+}))<{ color?: string }>`
+  color: ${props => props.color ?? props.theme.stylekitForegroundColor};
+  opacity: ${props => (props.color ? 1 : 0.6)};
+  font-size: ${Platform.OS === 'android' ? 13 : 12}px;
+  ${Platform.OS === 'ios' && 'text-align: center'}
+`
+
+export const HeaderTitleView: React.FC<Props> = props => (
+  <Container>
+    <Title>{props.title}</Title>
+    {props.subtitle && props.subtitle.length > 0 ? (
+      <SubTitle color={props.subtitleColor}>{props.subtitle}</SubTitle>
+    ) : undefined}
+  </Container>
+)