Infra/assets internal new structure

demo/src/configurations.js

@@ -16,7 +16,10 @@ export const loadDemoConfigurations = () => {
     settings: require('./assets/icons/settings.png'),
     share: require('./assets/icons/share.png'),
     info: require('./assets/icons/info.png'),
-    exclamation: require('./assets/icons/exclamationFillSmall.png')
+    exclamation: require('./assets/icons/exclamationFillSmall.png'),
+    check: require('./assets/icons/check.png'),
+    x: require('./assets/icons/x.png'),
+    minus: require('./assets/icons/minusSmall.png')
   });
 
   Assets.loadAssetsGroup('images.demo', {

demo/src/screens/__tests__/__snapshots__/AvatarScreen.spec.js.snap

@@ -937,6 +937,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -1194,6 +1198,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -1465,6 +1473,10 @@ exports[`AvatarScreen renders screen 1`] = `
             }
             style={
               [
+                {
+                  "height": undefined,
+                  "width": undefined,
+                },
                 undefined,
                 undefined,
                 {
@@ -1659,6 +1671,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -1916,6 +1932,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -2046,6 +2066,10 @@ exports[`AvatarScreen renders screen 1`] = `
               }
               style={
                 [
+                  {
+                    "height": undefined,
+                    "width": undefined,
+                  },
                   null,
                   undefined,
                   undefined,
@@ -2218,6 +2242,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -2448,6 +2476,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -2678,6 +2710,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {
@@ -2866,6 +2902,10 @@ exports[`AvatarScreen renders screen 1`] = `
           }
           style={
             [
+              {
+                "height": undefined,
+                "width": undefined,
+              },
               undefined,
               undefined,
               {

demo/src/screens/__tests__/__snapshots__/TextFieldScreen.spec.js.snap

@@ -3294,6 +3294,7 @@ exports[`TextField Screen renders screen 1`] = `
                 }
                 style={
                   [
+                    {},
                     undefined,
                     {
                       "height": 16,
@@ -3933,11 +3934,19 @@ exports[`TextField Screen renders screen 1`] = `
                 accessible={false}
                 source={
                   {
-                    "testUri": "../../../src/assets/icons/xFlat.png",
+                    "height": 16,
+                    "uri": {
+                      "testUri": "../../../src/assets/internal/icons/xFlat.png",
+                    },
+                    "width": 16,
                   }
                 }
                 style={
                   [
+                    {
+                      "height": 16,
+                      "width": 16,
+                    },
                     undefined,
                     undefined,
                     undefined,
@@ -3966,6 +3975,7 @@ exports[`TextField Screen renders screen 1`] = `
             }
             style={
               [
+                {},
                 undefined,
                 undefined,
                 undefined,
@@ -4662,6 +4672,7 @@ exports[`TextField Screen renders screen 1`] = `
               }
               style={
                 [
+                  {},
                   undefined,
                   undefined,
                   undefined,
@@ -6854,6 +6865,7 @@ exports[`TextField Screen renders screen 1`] = `
               }
               style={
                 [
+                  {},
                   {
                     "marginLeft": 4,
                   },
@@ -7787,6 +7799,7 @@ exports[`TextField Screen renders screen 1`] = `
               }
               style={
                 [
+                  {},
                   undefined,
                   undefined,
                   undefined,

demo/src/screens/componentScreens/CheckboxScreen.tsx

@@ -51,7 +51,7 @@ export default class CheckboxScreen extends Component {
             borderRadius={2}
             size={30}
             color={Colors.purple30}
-            selectedIcon={Assets.icons.x}
+            selectedIcon={Assets.icons.demo.x}
             marginL-s5
           />
 

demo/src/screens/componentScreens/IconScreen.tsx

@@ -24,7 +24,7 @@ const IconScreen = () => {
         <Icon
           size={customSize ? size : undefined}
           tintColor={customColor ? (color as string) : undefined}
-          source={Assets.icons.search}
+          source={Assets.icons.demo.search}
           badgeProps={
             useBadge
               ? {

demo/src/screens/componentScreens/ModalScreen.tsx

@@ -123,7 +123,7 @@ export default class ModalScreen extends Component<ModalScreenProps, State> {
               ]}
               leftButtons={[
                 {
-                  icon: Assets.icons.x,
+                  icon: Assets.icons.demo.x,
                   onPress: () => Alert.alert('back'),
                   buttonProps: {hitSlop: BUTTONS_HIT_SLOP, iconStyle: {tintColor: Colors.yellow10}}
                 }

demo/src/screens/componentScreens/PickerScreen.tsx

@@ -44,7 +44,7 @@ const renderContact = (contactValue: any, props: any) => {
           {contact?.name}
         </Text>
       </View>
-      {props.isSelected && <Icon source={Assets.icons.check} tintColor={Colors.$iconDefault}/>}
+      {props.isSelected && <Icon source={Assets.icons.demo.check} tintColor={Colors.$iconDefault}/>}
     </View>
   );
 };

demo/src/screens/componentScreens/RadioButtonScreen.js

@@ -102,8 +102,8 @@ export default class RadioButtonScreen extends Component {
               Yes or No?
             </Text>
             <View row>
-              {this.renderRadioButtonWithImage('yes', Assets.icons.check, {tintColor: 'green'})}
-              {this.renderRadioButtonWithImage('no', Assets.icons.x, {tintColor: 'red'})}
+              {this.renderRadioButtonWithImage('yes', Assets.icons.demo.check, {tintColor: 'green'})}
+              {this.renderRadioButtonWithImage('no', Assets.icons.demo.x, {tintColor: 'red'})}
             </View>
             <Text marginT-10>You chose: {this.state.value}</Text>
           </RadioGroup>

demo/src/screens/componentScreens/SegmentedControlScreen.tsx

@@ -1,14 +1,24 @@
 import React, {useCallback, useState} from 'react';
 import {StyleSheet} from 'react-native';
-import {Text, View, Colors, SegmentedControl, Assets, Spacings, BorderRadiuses, Typography, SegmentedControlItemProps} from 'react-native-ui-lib';
+import {
+  Text,
+  View,
+  Colors,
+  SegmentedControl,
+  Assets,
+  Spacings,
+  BorderRadiuses,
+  Typography,
+  SegmentedControlItemProps
+} from 'react-native-ui-lib';
 
 const segments: Record<string, Array<SegmentedControlItemProps>> = {
   first: [{label: 'Default'}, {label: 'Form'}],
   second: [{label: '1'}, {label: '2'}, {label: '3'}, {label: Assets.emojis.airplane}, {label: '5'}],
   third: [
     {
       label: 'Very Long Label with icon',
-      iconSource: Assets.icons.search,
+      iconSource: Assets.icons.demo.search,
       iconStyle: {marginLeft: Spacings.s1, width: 16, height: 16},
       iconOnRight: true
     },
@@ -18,7 +28,11 @@ const segments: Record<string, Array<SegmentedControlItemProps>> = {
   fifth: [{label: 'Full'}, {label: 'Width'}],
   sixth: [{label: 'Full'}, {label: 'Width'}, {label: 'With'}, {label: 'A'}, {label: 'Very Long Segment'}],
   seventh: [{label: '$'}, {label: '%'}],
-  eighth: [{label: 'Plus', iconSource: Assets.icons.plusSmall}, {label: 'Minus', iconSource: Assets.icons.minusSmall}, {label: 'Check', iconSource: Assets.icons.checkSmall}],
+  eighth: [
+    {label: 'Plus', iconSource: Assets.icons.demo.plus},
+    {label: 'Minus', iconSource: Assets.icons.demo.minus},
+    {label: 'Check', iconSource: Assets.icons.demo.check}
+  ],
   ninth: [{label: 'with'}, {label: 'a'}, {label: 'label'}]
 };
 
@@ -72,7 +86,9 @@ const SegmentedControlScreen = () => {
           segmentLabelStyle={styles.customTypography}
           preset={screenPreset}
         />
-        <Text center marginT-s4>With Icons</Text>
+        <Text center marginT-s4>
+          With Icons
+        </Text>
         <SegmentedControl segments={segments.eighth} preset={screenPreset}/>
         <Text marginT-s4 center>
           Custom Styling

demo/src/screens/componentScreens/TabControllerScreen/tab1.tsx

@@ -24,7 +24,7 @@ class Tab1 extends Component {
             round
             style={{width: 50}}
             size={Button.sizes.small}
-            iconSource={Assets.icons.search}
+            iconSource={Assets.icons.demo.search}
             white
           />
         </View>

demo/src/screens/componentScreens/ToastsScreen.js

@@ -108,7 +108,7 @@ export default class ToastsScreen extends Component {
           onDismiss={this.dismissTopToast}
           // autoDismiss={3000}
           showDismiss={showDismiss}
-          // action={{iconSource: Assets.icons.x, onPress: () => console.log('dismiss')}}
+          // action={{iconSource: Assets.icons.demo.x, onPress: () => console.log('dismiss')}}
           showLoader={showLoader}
         />
         <Toast

demo/src/screens/realExamples/ListActions/ActionsList.js

@@ -197,7 +197,7 @@ export default class ActionsList extends Component {
               size={'xSmall'}
               round
               backgroundColor="transparent"
-              iconSource={Assets.icons.x}
+              iconSource={Assets.icons.demo.x}
               iconStyle={{tintColor: Colors.white}}
               onPress={() => {
                 // console.warn('dismiss press');

expoDemo/MainScreen.tsx

@@ -83,7 +83,7 @@ export default function MainScreen({navigation}) {
             preset={null}
             text70
             fieldStyle={styles.fieldStyle}
-            leadingAccessory={<Icon source={Assets.icons.search} marginH-s2/>}
+            leadingAccessory={<Icon source={Assets.internal.icons.search} marginH-s2/>}
           />
         }
         sections={sections}

package.json

@@ -38,7 +38,8 @@
     "releaseDemo": "./scripts/release/releaseDemo.sh",
     "releaseDocs": "./scripts/release/releaseDocs.sh",
     "releaseEslint": "./scripts/release/releaseEslint.sh",
-    "releaseNative": "./scripts/release/releaseNative.sh"
+    "releaseNative": "./scripts/release/releaseNative.sh",
+    "update-web-assets": "node scripts/assets/extract-dimensions.js"
   },
   "dependencies": {
     "babel-plugin-transform-inline-environment-variables": "^0.0.2",