CODEWITHSUNDEEP
reactjsreact-native
user2648519
user2648519

Reputation: 117

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;

Upvotes: 1

Views: 314

Answers (1)

Drew Reese
Drew Reese

Reputation: 202608

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

Upvotes: 1

Related Questions