triniwiz / nativescript-plugins

Apache License 2.0
80 stars 50 forks source link

Safe Area iOS #128

Open captainhaddockfr35 opened 3 years ago

captainhaddockfr35 commented 3 years ago

Hi, SafeArea not work for the content of pager with NS7 & @nativescript-community/ui-pager :

"@nativescript/core": "~7.0.0"
 "@nativescript-community/ui-pager": "^13.0.0-alpha.10",

image

<Pager
  backgroundColor="orange"
  row="1"
  #pager
  [selectedIndex]="1"
>
  <StackLayout *pagerItem backgroundColor="red" ios:iosOverflowSafeArea="true">
    <label text="First"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor="white">
    <label text="Second"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor="black">
    <label text="Third" color="white"></label>
  </StackLayout>
  <StackLayout *pagerItem backgroundColor="green">
    <label text="Fourth"></label>
  </StackLayout>
</Pager>

I would like the white area to cover the safe area as well.

Thanks !

wuilmerj24 commented 3 years ago

Same problem

liamcharmer commented 2 years ago

Any update on this?

triniwiz commented 2 years ago

Has anyone tried this with @triniwiz/nativescript-pager ?

liamcharmer commented 2 years ago

Has anyone tried this with @triniwiz/nativescript-pager ?

Yeah thats what i'm currently using, isnt that this repo??

*Edit, sorry i noticed theyre using the other one. But yes i'm using yours

liamcharmer commented 2 years ago
Screenshot 2022-07-17 at 18 41 18

      <Pager
        height="100%"
        width="100%"
        for="street in streets"
        orientation="vertical"
        iosOverflowSafeArea="true"
        spacing="0"
        :circularMode="true"
        margin="0"
      >
        <v-template>
          <ScrollView
            iosOverflowSafeArea="true"
            orientation="horizontal"
            backgroundColor="pink"
            :visibility="currentStreetIndex == street.streetIndex  ? 'visible' : 'collapse'"
            width="100%"
            height="100%"
          >
            <FlexboxLayout
              flexDirection="row"
              iosOverflowSafeArea="true"
            >
              <StoreBuildingItem
                :store="store"
                v-for="(store, index) in street.stores"
                :key="store.id"
                iosOverflowSafeArea="true"
                :counter="index"
              />

            </FlexboxLayout>
          </ScrollView>

        </v-template>
      </Pager>
triniwiz commented 2 years ago

@liamcharmer nice view , this is the repo for the older version you can find the new repo here. I'll check out what's happening I have a couple ideas

triniwiz commented 2 years ago

@liamcharmer can you try 14.0.1 and lmk if that works for you.

liamcharmer commented 2 years ago

Used 14.0.1 no luck with that one sadly, still same issue. @triniwiz

triniwiz commented 2 years ago

Thanks for the update

liamcharmer commented 2 years ago

@triniwiz is there some form of padding or something that happens with pager? When I add the background colour to pager it works fine, it's just the elements inside get put in the Safe area. Though i've added iosOverflowSafeArea="true" to the scrollview