Percentage attributes

[patricklongo1]

Hello everyone!

I'm assembling a Skeleton, but the page in question, is all based on the user's screen .. I take the device's height and width, and the heights and margins are all assembled in percentage. However, when trying to pass a "height =" 5% "to SkeletonPlaceholder.item, it is simply not displayed. Any way to pass percentages as an attribute?

[chramos]

Hey @patricklongo1 I'll check the possibility

did you try something like that?

const {height} = Dimensions.get("window");

const Example = () => {
   return (<SkeletonPlaceholder>
      <SkeletonPlaceholder.Item width={200} height={height * 0.5} />
   </SkeletonPlaceholder>
   );
}

[teamzz111]

@chramos actually it's working with Dimensions.

[dbilgin]

It would be really nice to be able to limit it to the view that the placeholder is in though

[chramos]

its really hard to handle guys, the react-native-masked-view not support percentage at the moment, unfortunately.

but as I said above you can bases the entirely placeholder using Dimensions. to become more easy you can create two methods:

import { Dimensions } from "react-native"

const getWindowWidht = (percentage: string | number) => {
   if(typeof percentage === "number") {
      return Dimensions.get("window").width * (percentage / 100)
   }
   else {
      return Dimensions.get("window").width * (Number(percentage.replace("%", "" )) / 100)
   }
}

const getWindowHeight = (percentage: string | number) => {
   if(typeof percentage === "number") {
      return Dimensions.get("window").height * (percentage / 100)
   }
   else {
      return Dimensions.get("window").height * (Number(percentage.replace("%", "" )) / 100)
   }
}

and just to use it:

const Example = () => {
   return (
   <SkeletonPlaceholder>
      <SkeletonPlaceholder.Item 
         width={getWindowWidth(20 /** or "20%" */)} 
         height={getWindowHeight(20 /** or "20%" */)} 
      />
   </SkeletonPlaceholder>
   );
}

[dbilgin]

@chramos thanks a lot for looking into it! It's a shame though, at least for me it's very often that the placeholder doesn't fill the whole screen but just the container. I am using the onLayout event from the view as a workaround for this currently by getting the dimensions of said container.

[chramos]

@dbilgin I can try to limit the percentage to the container width and height instead of screen. Thanks so much for contributing to improve the library