Q: Why View within Switch-Case not working with functional component in react-native const LoadingView = ({
    viewKey,
    style,
}: LoadingViewInterface) => {


Added below code to return View through switch-case condition,

    const SwitchCase = () => {
        if(viewKey === ViewKey.HOME_WORKSPACE) {
            <Card style={style}>
                <SkeletonBar width={'100%'} height={16} />
                <View style= {styles.space}/>
                <SkeletonBar width={'50%'} height={16} />
                <View style= {styles.space}/>
                <SkeletonBar width={'50%'} height={16} />
                <View style= {styles.space}/>
                <SkeletonBar width={'100%'} height={16} />
            </Card>
        } else if (viewKey === ViewKey.HOME_BOOKING) {
            return undefined;
        } else if (viewKey === ViewKey.HOME_MEETING) {
            return undefined;
        } else if (viewKey === ViewKey.HOME_TOOLS) {
            return undefined;
        }
    }
    return (
        SwitchCase
    );
};

const styles = StyleSheet.create({
    space: {
        height: 8,
    },
});

export default LoadingView;


If running the above code without switch-case then it works fine

const LoadingView = ({
viewKey,
style,

}: LoadingViewInterface) => {
return (

<SkeletonBar width={'100%'} height={16} />

<SkeletonBar width={'50%'} height={16} />

<SkeletonBar width={'50%'} height={16} />


);
};
const styles = StyleSheet.create({
space: {
height: 8,
},
});
export default LoadingView;

A: It looks like you need to call the SwitchCase function, and also return JSX for each case.
const SwitchCase = () => {
  if (viewKey === ViewKey.HOME_WORKSPACE) {
    return ( // <-- return the JSX to be rendered
      <Card style={style}>
        <SkeletonBar width={'100%'} height={16} />
        <View style= {styles.space}/>
        <SkeletonBar width={'50%'} height={16} />
        <View style= {styles.space}/>
        <SkeletonBar width={'50%'} height={16} />
        <View style= {styles.space}/>
        <SkeletonBar width={'100%'} height={16} />
      </Card>
    );
  } else if (viewKey === ViewKey.HOME_BOOKING) {
    return undefined;
  } else if (viewKey === ViewKey.HOME_MEETING) {
    return undefined;
  } else if (viewKey === ViewKey.HOME_TOOLS) {
    return undefined;
  }
}

return SwitchCase(); // <-- invoke function

