chore: add new example app skeleton

Author: Joaguirrem

example/.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+expo-env.d.ts
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+app-example

example/.prettierignore

@@ -0,0 +1,7 @@
+.expo/*
+android/*
+ios/*
+node_modules/*
+
+package-lock.json
+README.md

example/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": true,
+  "bracketSpacing": true,
+  "semi": false,
+  "singleQuote": true
+}

example/app.json

@@ -0,0 +1,41 @@
+{
+  "expo": {
+    "name": "example-app",
+    "slug": "example-app",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/images/icon.png",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": false,
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static",
+      "favicon": "./assets/images/favicon.png"
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-splash-screen",
+        {
+          "image": "./assets/images/splash-icon.png",
+          "imageWidth": 200,
+          "resizeMode": "contain",
+          "backgroundColor": "#ffffff"
+        }
+      ]
+    ],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

example/app/(app)/index.tsx

@@ -0,0 +1,33 @@
+import Line from '@xmartlabs/react-native-line'
+import { Image, StyleSheet } from 'react-native'
+
+import Logo from '@/assets/images/logo.png'
+import { LineButton } from '@/components/LineButton'
+import { ThemedView } from '@/components/ThemedView'
+
+export default function () {
+  function logIn() {
+    return Line.login()
+  }
+
+  return (
+    <ThemedView style={styles.container}>
+      <Image source={Logo} style={styles.logo} />
+      <LineButton onPress={logIn} />
+    </ThemedView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    gap: 8,
+    justifyContent: 'center',
+    padding: 16,
+  },
+  logo: {
+    height: 112,
+    resizeMode: 'contain',
+  },
+})

example/app/+not-found.tsx

@@ -0,0 +1,39 @@
+import { Link, Stack } from 'expo-router'
+import { Fragment } from 'react'
+import { StyleSheet } from 'react-native'
+
+import { ThemedText } from '@/components/ThemedText'
+import { ThemedView } from '@/components/ThemedView'
+
+export default function () {
+  return (
+    <Fragment>
+      <Stack.Screen options={{ title: strings.title }} />
+      <ThemedView style={styles.container}>
+        <ThemedText type="title">{strings.header}</ThemedText>
+        <Link href="/" style={styles.link}>
+          <ThemedText type="link">{strings.link}</ThemedText>
+        </Link>
+      </ThemedView>
+    </Fragment>
+  )
+}
+
+const strings = {
+  header: "This screen doesn't exist.",
+  link: 'Go to home screen!',
+  title: 'Oops!',
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 20,
+  },
+  link: {
+    marginTop: 15,
+    paddingVertical: 15,
+  },
+})

example/app/_layout.tsx

@@ -0,0 +1,42 @@
+import 'react-native-reanimated'
+
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from '@react-navigation/native'
+import { useFonts } from 'expo-font'
+import { Stack } from 'expo-router'
+import * as SplashScreen from 'expo-splash-screen'
+import { StatusBar } from 'expo-status-bar'
+import { useEffect } from 'react'
+
+import SpaceMono from '@/assets/fonts/SpaceMono-Regular.ttf'
+import { useColorScheme } from '@/hooks/useColorScheme'
+
+SplashScreen.preventAutoHideAsync()
+
+export default function () {
+  const colorScheme = useColorScheme()
+  const [loaded] = useFonts({ SpaceMono })
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync()
+    }
+  }, [loaded])
+
+  if (!loaded) {
+    return null
+  }
+
+  return (
+    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+      <Stack>
+        <Stack.Screen name="(app)/index" options={{ headerShown: false }} />
+        <Stack.Screen name="+not-found" />
+      </Stack>
+      <StatusBar style="auto" />
+    </ThemeProvider>
+  )
+}

example/assets/fonts/SpaceMono-Regular.ttf

@@ -0,0 +1,63 @@
+import React, { FunctionComponent } from 'react'
+import { Image, StyleSheet, Text } from 'react-native'
+
+import Line from '@/assets/images/line.png'
+import { PressableOpacity } from '@/components/PressableOpacity'
+import { VerticalDivider } from '@/components/VerticalDivider'
+import { BaseColors } from '@/constants/Colors'
+
+interface Props {
+  disabled?: boolean
+  onPress?: VoidFunction
+  size?: number
+}
+
+export const LineButton: FunctionComponent<Props> = ({
+  disabled = false,
+  onPress,
+}) => {
+  const backgroundColor = disabled ? BaseColors.White : BaseColors.Green
+  const lineColor = disabled ? BaseColors.LightGray60PCT : BaseColors.Black8PCT
+  const textColor = disabled ? BaseColors.Gray20PCT : BaseColors.White
+  const tintColor = disabled ? BaseColors.Gray20PCT : BaseColors.White
+
+  const borderWidth = disabled ? 1 : 0
+
+  return (
+    <PressableOpacity
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.container, { backgroundColor, borderWidth }]}>
+      <Image source={Line} style={[styles.image, { tintColor }]} />
+      <VerticalDivider backgroundColor={lineColor} />
+      <Text style={[styles.text, { color: textColor }]}>{strings.text}</Text>
+    </PressableOpacity>
+  )
+}
+
+const strings = {
+  text: 'Log In',
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    borderColor: BaseColors.LightGray60PCT,
+    borderRadius: 12,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 4,
+    justifyContent: 'space-between',
+    padding: 4,
+  },
+  image: {
+    height: 50,
+    width: 50,
+  },
+  text: {
+    flex: 1,
+    fontSize: 18,
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+})

example/assets/images/adaptive-icon.png

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react'
+import { Pressable, PressableProps, StyleSheet } from 'react-native'
+
+export const PressableOpacity: FunctionComponent<PressableProps> = ({
+  accessibilityRole = 'button',
+  hitSlop = 16,
+  style,
+  ...rest
+}) => (
+  <Pressable
+    accessibilityRole={accessibilityRole}
+    hitSlop={hitSlop}
+    style={state => [
+      state.pressed && styles.opacity,
+      typeof style === 'function' ? style(state) : style,
+    ]}
+    {...rest}
+  />
+)
+
+const styles = StyleSheet.create({
+  opacity: {
+    opacity: 0.5,
+  },
+})

example/assets/images/favicon.png

@@ -0,0 +1,60 @@
+import { StyleSheet, Text, type TextProps } from 'react-native'
+
+import { useThemeColor } from '@/hooks/useThemeColor'
+
+export type ThemedTextProps = TextProps & {
+  lightColor?: string
+  darkColor?: string
+  type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'
+}
+
+export function ThemedText({
+  style,
+  lightColor,
+  darkColor,
+  type = 'default',
+  ...rest
+}: ThemedTextProps) {
+  const color = useThemeColor({ dark: darkColor, light: lightColor }, 'text')
+
+  return (
+    <Text
+      style={[
+        { color },
+        type === 'default' ? styles.default : undefined,
+        type === 'title' ? styles.title : undefined,
+        type === 'defaultSemiBold' ? styles.defaultSemiBold : undefined,
+        type === 'subtitle' ? styles.subtitle : undefined,
+        type === 'link' ? styles.link : undefined,
+        style,
+      ]}
+      {...rest}
+    />
+  )
+}
+
+const styles = StyleSheet.create({
+  default: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+  defaultSemiBold: {
+    fontSize: 16,
+    fontWeight: '600',
+    lineHeight: 24,
+  },
+  link: {
+    color: '#0A7EA4',
+    fontSize: 16,
+    lineHeight: 30,
+  },
+  subtitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    lineHeight: 32,
+  },
+})

example/assets/images/icon.png

@@ -0,0 +1,22 @@
+import { View, type ViewProps } from 'react-native'
+
+import { useThemeColor } from '@/hooks/useThemeColor'
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string
+  darkColor?: string
+}
+
+export function ThemedView({
+  style,
+  lightColor,
+  darkColor,
+  ...otherProps
+}: ThemedViewProps) {
+  const backgroundColor = useThemeColor(
+    { dark: darkColor, light: lightColor },
+    'background',
+  )
+
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />
+}