Live Code - support more components 2

[M-i-k-e-l]

Description

Live Code - support more components 1
Go over each commit alone (or don't)

General issue: react-native’s Animated is not working properly on web (see docs)

Carousel - cannot drag (probably because of Animated) and initial page is bugged (starts on first page but then scrolls to the correct page, probably fixable)
Drawer - not working (probably because of Animated)

Assets: can we use web assets somehow so we don’t need to set icon’s sizes?

Changelog

None

Additional info

None

[ethanshar]

About what you wrote

General issue: react-native’s Animated is not working properly on web (see docs)

We'll have to figure it out, let's create a list with problematic components and the reason to tackle later

Carousel - cannot drag (probably because of Animated) and initial page is bugged (starts on first page but then scrolls to the correct page, probably fixable)

It doesn't drag, you scroll to move the carousel.. it makes sense because in mobile you drag scrollviews and in web you just scroll with the mouse

Assets: can we use web assets somehow so we don’t need to set icon’s sizes?

Maybe create a config for Icon component to have a size, I think we do the same in private uilib

[M-i-k-e-l]

We'll have to figure it out, let's create a list with problematic components and the reason to tackle later

Wrote my suggestion in another comment (lets continue there).

It doesn't drag, you scroll to move the carousel.. it makes sense because in mobile you drag scrollviews and in web you just scroll with the mouse

Makes sense 🤦‍♂️

Maybe create a config for Icon component to have a size, I think we do the same in private uilib

I'll take a look

[M-i-k-e-l]

Something else, do you like the Assets.data = {products}; or maybe we should add another object const Data = {products};?

[M-i-k-e-l]

Maybe create a config for Icon component to have a size, I think we do the same in private uilib

I can make this work (override Icon and add some logic there) however I am not sure if we want to hide this from the users so they don't get confused if they encounter this issue, not sure how to do that.

[ethanshar]

This is great, it can help with the playground controls..
Anyway, I know this is how we did it before (render methods), what if we'll change it actual components to make it more readable and also maybe adjust the names a little.

We can have ToggleControl (instead of BooleanOption) and later on more controls like SegmentsControl, SliderControl, etc..
We can have them share a similar interface for state and setState, etc..

[M-i-k-e-l]

@ethanshar
I don't think we decided about the icon's configuration, this is what I came up with:
Icon.js:

import React from 'react';
import Icon from 'react-native-ui-lib/icon';

export default props => {
  if (props.source?.source) {
    const {source, style, ...others} = props;
    return <Icon {...others} source={source.source} style={[{width: source.width, height: source.height}, style]} />;
  } else {
    return <Icon {...props} />;
  }
};

Icon example:

chevronRight: {
  source: require('../../assets/icons/chevronRight.png').default,
  width: 8,
  height: 14
}

[ethanshar]

Approved, I see you didn't set any fixed size in the Icon config, I assume you didn't need it?

[M-i-k-e-l]

Approved, I see you didn't set any fixed size in the Icon config, I assume you didn't need it?

There's a default for web (16), the code is old - around a year and a half