We Keep Coding

How to make a component more readable if it has multiple props as arguments?

I have large component where I am passing data from parent via slots, everything works as expected but I have one big problem which is very irritating to me, How I can to destructure ({partDetails, setUniqValue, openModal, setData, setPrices, setBoxImages, setZoomImage, setSelectedPartDetails}) this arguments so that my component becomes slightly more attractive, I want to achieve this result using typescript, but I am not sure what is best practice for it.
import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { MaterialIcons } from "#expo/vector-icons";
import { componentStyle } from '../styles';
import { PickOfferBoxHeader } from './PickOfferBoxHeader/PickOfferBoxHeader';
import { ConditionRow } from './Rows/ConditionRow';
import { WarrantyRow } from './Rows/WarrantyRow';
import { PriceRow } from './Rows/PriceRow';
import { GradeRow } from './Rows/GradeRow';
import { AntDesign } from "#expo/vector-icons";
import { IIIpartDetails } from '../../../controllers/offers/interfaces';
import { IPickpartDetails, IuniqueValue, IPickData, Imodal } from '../../../screens/offers/interfaces';
import { ImagesRow } from './ImageRow/ImageRow';
interface IPickOfferBoxProps {
partDetails: IPickpartDetails,
setUniqValue: React.Dispatch<React.SetStateAction<IuniqueValue>>,
openModal: () => void,
setData: React.Dispatch<React.SetStateAction<IPickData[]>>
setPrices: React.Dispatch<React.SetStateAction<number>>
setZoomImage: React.Dispatch<React.SetStateAction<Imodal>>,
setSelectedPartDetails:React.Dispatch<React.SetStateAction<IIIpartDetails | undefined>>
setBoxImages: any,
}
export const PickOfferBox: React.FC<IPickOfferBoxProps> = ({partDetails, setUniqValue, openModal, setData, setPrices, setBoxImages, setZoomImage, setSelectedPartDetails}) => {
return (
<p>
asdasdad
</p>
);
}

Consider component composition in react.
Or you might try something like effector in react to communicate between components, or create local store for this component and it will not need props, you gonna derive them from store.

Vue multiple components in one package/file

let's say i want to create a UI Package, how can I put multiple components into one single JS file?
Normally I would have my different components in different files:
import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'
but I want to put all my Button components in a single file, for reuseability etc. so i can import things when I need them
import {ButtonText, ButtonIcon, ButtonLayout } from '../ButtonPackage.vue'
how would my ButtonPackage.vue/.js File look like?

In ButtonPackage.js file you import all components, and export them as an object.
import ButtonText from '../ButtonText.vue'
import ButtonIcon from '../ButtonIcon .vue'
import ButtonLayout from '../ButtonLayout.vue'
export {ButtonText, ButtonIcon, ButtonLayout }
Then in a component you import them as needed:
import { ButtonText } from '../ButtonPackage.js'

The key is to export all components in one file:
import ButtonText from "./ButtonText";
import ButtonIcon from "./ButtonIcon";
import ButtonLayout from "./ButtonLayout";
export { ButtonText, ButtonIcon, ButtonLayout };
So when you want to use any of them:
import {
ButtonText,
ButtonIcon,
ButtonLayout,
} from "./components/ButtonPackage";
Here is a demo I created:
https://codesandbox.io/s/crazy-oskar-gper1?fontsize=14&hidenavigation=1&theme=dark

Error when importing local component file into my LoginForm component

I am new to react-native but I have successfully imported local files into another before and I am getting this error message:
Unable to resolve "./common" from "src/components/LoginForm.js"
I am using expo XDE for the first time as well if that provides any insight. This seems so simple but I can't seem to find if I have a typo.
Here is a screenshot of my project file structure:
These are my imports in LoginForm.js
import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { FormLabel, FormInput, FormValidationMessage } from 'react-native-elements';
import { Form, FormSection } from './common'; // what am i doing wrong with this????
These are my imports in App.js
import React from 'react';
import LoginForm from './src/components/LoginForm';

you have to create an index.js in your /common, Then export all of you components:
export * from "./Button";
export * from "./Card";
export * from "./CardSection";
export * from "./Header";
export * from "./Input";
export * from "./Spinner";
also be sure to export { YourComponentName }; in each file as well!

How to define props for react-navigation with Flow

I am working on a simple React Native App, and have decided to user react-navigation. I have also decided to go with Flow for static type checking. What I can't figure out, is how to define navigation related props with Flow.
e.g. I define my App.js to use StackNavigator like so:
import StackNavigator from 'react-navigation';
import Main from './app/containers/Main';
const App = StackNavigator({
Main: { screen: Main },
});
export default App;
then I define my Main class, but I don't know how to reference react-navigation in my props:
// #flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
type Props = {
navigate: ????
};
type State = {};
class Main extends Component<Props, State> {
...
}

According to https://github.com/react-navigation/react-navigation/issues/3643
import { NavigationState, NavigationScreenProp } from 'react-navigation';
type Props = {
navigation: NavigationScreenProp<NavigationState>
};

Import NavigationScreenProp from react-navigation:
// #flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { NavigationScreenProp } from 'react-navigation';
type Props = {
navigate: NavigationScreenProp<{}>
};
type State = {};
class Main extends Component<Props, State> {
...
}

react-navigation has a flow file. Maybe you can import from there or just copy-paste
https://github.com/react-navigation/react-navigation/blob/master/flow/react-navigation.js#L72

To prevent Cannot import the type NavigationState as a value. Use the import type instead.
// #flow
import React, { Component } from 'react';
import type { NavigationState, NavigationScreenProp } from 'react-navigation';
type Props = {
navigation: NavigationScreenProp<NavigationState>
}
type State = {}
class Main extends Component<Props, State> {
...
}
You can also add below to .flowconfig to prevent flow-typed/npm/redux-devtools-extension_v2.x.x.js:23:33
[lints]
deprecated-utility=off

How to Import and Export dynamically in ES6

In my react component directory, I setted index.js here.
import App from './App';
import Main from './Main/Main';
import Best from './Main/Best';
import Club from './Main/Club';
import Post from './Main/Post';
import Sidebar from './Sidebar/Sidebar';
export { App, Main, Best, Club, Post, Sidebar };
Usage in other js,
import {
App,
Main,
Best,
Club,
Post,
Sidebar
} from '../scripts/Containers/index';
But whenever I make component like that, should I have to write import / export statements index.js there?
Is there any magical way?
Please help me to solve out this problem!
Update (with #Bergi)
I modifed like this, and it works well.
export { default as App } from './App';
export { default as Header } from './Header/Header';
export { default as Main } from './Main/Main';
export { default as Best } from './Main/Best';
export { default as Club } from './Main/Club';
export { default as Post } from './Main/Post';
export { default as Sidebar } from './Sidebar/Sidebar';
But this didn't work
export * from './App';
export * from './Header/Header';
export * from './Main/Main';
export * from './Main/Best';
export * from './Main/Club';
export * from './Main/Post';
export * from './Sidebar/Sidebar';
In order to works with above code, I changed this in component
export default class Header extends Component {
constructor(...args) {
super(...args);
}
}
to
export class Header extends Component {
constructor(...args) {
super(...args);
}
}
I deleted export default module exports! And works second export way works(not first one)
Thanks #Bergi :)
But I think that dynamically import / export won't be able to use.
Maybe this is best way I think.