Skeleton takes space even when it's not shown

n-ii-ma commented 7 months ago

Is there an existing issue for this?

[X] I have searched the existing issues

Do you want this issue prioritized?

[ ] Yes, I have sponsored
[x] Not urgent

Current Behavior

Skeleton is taking its defined width and height space even when it's set to show={false}. In CSS terms it behaves as if its visibility is set to hidden!

Expected Behavior

It should completely disappear from view as if its CSS display is set to none.

Steps To Reproduce

import { StyleSheet, Text, View } from "react-native";
import { Skeleton } from "moti/skeleton";

const Item = () => {
  return (
    <View style={styles.container}>
      <Skeleton
        show={false}
        colorMode="light"
        height={48}
        width={48}
        radius={10}
      >
        <Text>Jack</Text>
      </Skeleton>
    </View>
  );
};

export default Item;

const styles = StyleSheet.create({
  container: {
    minHeight: 125,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#fff",
    borderRadius: 10,
    padding: 10,
    marginBottom: 10,
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
});

Versions

- Moti: 0.26.1
- Reanimated: 3.3.0
- React Native: 0.72.6
- Expo: 49.0.13

Screenshots

No response

Reproduction

Nothing to show.

nandorojo commented 7 months ago

If you want it to display none you can conditionally render it. Or don’t set a height/width and it’ll match the size of its child.

nandorojo commented 7 months ago

A common pattern for text skeletons is to show dummy text as a fallback when show is set to true so that it takes up space still

nandorojo / moti