NativeScript / theme

@nativescript/theme
https://v7.docs.nativescript.org/ui/theme
Apache License 2.0
128 stars 44 forks source link

Image is forced to stretch: aspectFit when inside a list-view #223

Closed tuliodiaz closed 4 years ago

tuliodiaz commented 4 years ago

Environment nativescript: 6.1.2 tns-core-modules: 6.1.2 tns-android: 6.1.2 tns-ios: 6.1.0

Describe the bug Set property stretch to 'none' to an Image is not taking effect when the component is inside a ListView

To Reproduce Bootstrap a project

tns create demo --vue
npm install @nativescript/theme --save
cd demo

Register the theme [/app/app.scss]

@import '~@nativescript/theme/core';

@import '~@nativescript/theme/default';

Update the main component [/app/components/App.vue]

<template>
    <Page class="page">
        <ListView for="item in items">
      <v-template>
        <StackLayout orientation="horizontal">
          <!--HERE stretch = none is override by the theme style-->
          <Image :src="src" stretch="none"/>
          <Label :text="item" />
        </StackLayout>
      </v-template>
    </ListView>
    </Page>
</template>

<script>
    export default {
        data() {
            return {
                items: ['uno', 'dos'],
                src: `font://${String.fromCharCode(0xf10b)}`
            }
        },
    };
</script>

Run the project

tns run android

Expected behavior stretch="none" property is respected as per Nativescript documentation https://docs.nativescript.org/ui/components/icon-fonts

Additional context The file forcing the style is /theme/scss/mixins/components/_list-view.scss

bundyo commented 4 years ago

Yes, noticed this myself. Will fix it.