@hero-design/rn 7.1.3-alpha8 → 7.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha8",
+  "version": "7.2.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.1.2"
+    "@hero-design/colors": "7.2.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/playground/index.tsx

@@ -6,8 +6,15 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList } from 'react-native';
-import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
+import { SafeAreaView, FlatList, View, TouchableOpacity } from 'react-native';
+import {
+  ThemeProvider,
+  theme,
+  useTheme,
+  Typography,
+  Icon,
+  Divider,
+} from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import Button from './components/Button';
@@ -52,44 +59,45 @@ const components = [
   { name: 'Typography', component: TypographyPlayground },
 ] as const;
 
-const ComponentItem = ({
-  name,
-  onPress,
-}: {
-  name: string;
-  onPress: () => void;
-}) => {
+const ComponentItem = ({ name }: { name: string }) => {
   const hdTheme = useTheme();
   return (
-    <Typography.Text
-      fontSize="large"
-      onPress={onPress}
+    <View
       style={{
-        marginTop: hdTheme.space.medium,
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginHorizontal: hdTheme.space.medium,
+        marginVertical: hdTheme.space.medium,
       }}
     >
-      {name}
-    </Typography.Text>
-  );
-};
-
-const ComponentList = ({ navigation }: Navigation) => {
-  const hdTheme = useTheme();
-  return (
-    <SafeAreaView style={{ marginHorizontal: hdTheme.space.large }}>
-      <FlatList
-        data={components}
-        renderItem={({ item }) => (
-          <ComponentItem
-            name={item.name}
-            onPress={() => navigation.navigate(item.name)}
-          />
-        )}
+      <Typography.Text fontSize="large">{name}</Typography.Text>
+      <Icon
+        icon="arrow-right"
+        size="small"
+        style={{ color: hdTheme.colors.disabledText }}
       />
-    </SafeAreaView>
+    </View>
   );
 };
 
+const ComponentList = ({ navigation }: Navigation) => (
+  <SafeAreaView>
+    <FlatList
+      data={components}
+      renderItem={({ item }) => (
+        <>
+          <TouchableOpacity onPress={() => navigation.navigate(item.name)}>
+            <ComponentItem name={item.name} />
+          </TouchableOpacity>
+          <Divider marginHorizontal="small" />
+        </>
+      )}
+    />
+  </SafeAreaView>
+);
+
 const App = () => {
   const CustomNavigationTheme = {
     ...DefaultTheme,

package/.expo/README.md

@@ -1,15 +0,0 @@
-> Why do I have a folder named ".expo" in my project?
-
-The ".expo" folder is created when an Expo project is started using "expo start" command.
-
-> What do the files contain?
-
-- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
-- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
-- "settings.json": contains the server configuration that is used to serve the application manifest.
-
-> Should I commit the ".expo" folder?
-
-No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
-
-Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/.expo/packager-info.json

@@ -1,10 +0,0 @@
-{
-  "devToolsPort": 19002,
-  "expoServerPort": null,
-  "packagerPort": 19000,
-  "packagerPid": null,
-  "expoServerNgrokUrl": null,
-  "packagerNgrokUrl": null,
-  "ngrokPid": null,
-  "webpackServerPort": null
-}

package/.expo/settings.json

@@ -1,10 +0,0 @@
-{
-  "hostType": "lan",
-  "lanType": "ip",
-  "dev": true,
-  "minify": false,
-  "urlRandomness": null,
-  "https": false,
-  "scheme": null,
-  "devClient": false
-}