chore(example): added a new expo app with a button example

Author: coderdiaz

packages/app/.gitignore

@@ -0,0 +1,36 @@
+# 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

packages/app/.npmrc

@@ -0,0 +1 @@
+node-linker=hoisted

packages/app/App.js

@@ -0,0 +1,49 @@
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { styles } from './lib/tokens';
+
+export const Button = (props) => {
+ return (<TouchableOpacity style={buttonStyles({ intent: props.intent, size: props.size })}>
+ <Text>Button</Text>
+ </TouchableOpacity>)
+}
+
+const buttonStyles = styles({
+ base: { borderRadius: '$spacing.md' },
+ variants: {
+ intent: {
+ primary: {
+ backgroundColor: '$colors.primary50',
+ },
+ secondary: {
+ backgroundColor: '$colors.secondary50',
+ }
+ },
+ size: {
+ md: {
+ paddingHorizontal: '$spacing.md',
+ paddingVertical: '$spacing.sm',
+ }
+ }
+ },
+ defaultVariants: {
+ intent: 'primary',
+ size: 'md'
+ }
+})
+
+export default function App() {
+ return (
+ <View style={sty.container}>
+ <Button intent="primary" />
+ </View>
+ );
+}
+
+const sty = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+});

packages/app/app.json

@@ -0,0 +1,28 @@
+{
+ "expo": {
+ "name": "app",
+ "slug": "app",
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/icon.png",
+ "userInterfaceStyle": "light",
+ "newArchEnabled": true,
+ "splash": {
+ "image": "./assets/splash-icon.png",
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ },
+ "ios": {
+ "supportsTablet": true
+ },
+ "android": {
+ "adaptiveIcon": {
+ "foregroundImage": "./assets/adaptive-icon.png",
+ "backgroundColor": "#ffffff"
+ }
+ },
+ "web": {
+ "favicon": "./assets/favicon.png"
+ }
+ }
+}

packages/app/assets/adaptive-icon.png

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

packages/app/assets/favicon.png

@@ -0,0 +1,31 @@
+import { createTokens } from "jacaranda";
+
+export const { styles } = createTokens({
+ colors: {
+ primary50: '#ecfeff',
+ primary100: '#cffafe',
+ primary200: '#a5f3fc',
+ primary300: '#67e8f9',
+ primary400: '#22d3ee',
+ primary500: '#06b6d4',
+ primary600: '#0e93d1',
+ primary700: '#1570ad',
+ // Secondary
+ secondary50: '#ecfdf5',
+ secondary100: '#d9f9eb',
+ secondary200: '#bbfde8',
+ secondary300: '#86f9d9',
+ secondary400: '#0d9488',
+ secondary500: '#027a7b',
+ secondary600: '#016464',
+ secondary700: '#014747',
+ },
+ spacing: {
+ xs: 4,
+ sm: 8,
+ md: 16,
+ lg: 24,
+ xl: 32,
+ xxl: 40,
+ },
+})