A CLI tool to create a component structure with a consistent format.

Installation

npm install -g rnfoldercli

Usage

klrncli <ComponentName>

Example

klrncli SuccessAlert

Will generate the following folder structure:

SuccessAlert/
│
├── index.tsx
├── logic.ts
├── ui.tsx
├── types.ts

index.tsx

import React, {ForwardedRef} from 'react';
import {useSuccessAlertLogic} from './logic';
import SuccessAlertUI from './ui';
import {ISuccessAlertProps} from './types';

const SuccessAlert = (props: ISuccessAlertProps) => {
    const logicValues = useSuccessAlertLogic(props);
    return <SuccessAlertUI {...logicValues} />
  };

export default SuccessAlert;

logic.ts

import {ISuccessAlertProps} from './types';

export const useSuccessAlertLogic = ({}: ISuccessAlertProps) => {
  return {};
};

ui.tsx

import React from 'react';
import {ForwardedRef, forwardRef} from 'react';
import {View, Text} from 'react-native';
import {useStyle} from '@hooks/useStyle';
import {useTheme} from 'react-native-paper';
import {ISuccessAlertUIProps} from './types';
import styles from './style';

const SuccessAlertUI = ({}: ISuccessAlertUIProps) => {
  const theme = useTheme();
  const computedStyles = useStyle(styles, theme);
  return (
    <View style={computedStyles.container}>
      <Text>SuccessAlertUI</Text>
    </View>
  );
}

export default SuccessAlertUI;

types.ts

export interface ISuccessAlertProps {
//   [key]: type;
}

export interface ISuccessAlertUIProps {
//   [key]: type;
}

style.ts

import {StyleSheet} from 'react-native';
import {Md3Theme} from 'react-native-paper';
export default (theme: Md3Theme) => {
  return StyleSheet.create({
    container: {
      flex: 1,
    },
  });
};

klrncli SuccessAlert --small

Will generate the following folder structure without logic.ts and ui.ts its a minimal version:

SuccessAlert
│
├── index.tsx
├── style.ts
├── types.ts

index.tsx

import React from 'react';
import {ForwardedRef, forwardRef} from 'react';
import {View, Text} from 'react-native';
import {useStyle} from '@hooks/useStyle';
import {useTheme} from 'react-native-paper';
import {ISuccessAlertUIProps} from './types';
import styles from './style';

const SuccessAlert = ({}: ISuccessAlertProps) => {
  const theme = useTheme();
  const computedStyles = useStyle(styles, theme);
  return (
    <View style={computedStyles.container}>
      <Text>SuccessAlert</Text>
    </View>
  );
}

export default SuccessAlert;

types.ts

export interface ISuccessAlertProps {
//   [key]: type;
};

style.ts

import {StyleSheet} from 'react-native';
import {Md3Theme} from 'react-native-paper';
export default (theme: Md3Theme) => {
  return StyleSheet.create({
    container: {
      flex: 1,
    },
  });
};