React native app crashes when some components module are being imported - ios

Question

My index.ts file looks like as following:
import StaffMembers from './StaffMembers';
import GuestMembers from './GuestMembers';
export {
StaffMembers,
GuestMembers,
};
My folder structure looks like
This is my StaffMembers.tsx file :
import React from 'react';
import { AppDivider, CustomLabel } from '.';
import { View } from 'react-native-animatable';
import styles from '../styles';
import { Dropdown, TextInput, Label } from '../../../../components';
const StaffMembers: React.FC<{
member: string;
organisation: string;
orgLabel: string;
canDelete: () => void;
errors: any;
onDelete: () => void;
onValueUpdate: (updated: any) => void;
options: any[];
onDropdownStateChange: () => void;
zIndex: number;
onBlur: (fieldName: string) => void;
}> = ({
member,
organisation,
orgLabel,
canDelete,
errors = {},
onDelete = () => {},
onValueUpdate = () => {},
options = [],
zIndex = 1,
onBlur = () => console.log(),
}) => {
return (
<View style={[styles.listItem, { zIndex }]}>
<View style={{ flex: 1 }}>
<Dropdown
label={
canDelete ? (
<CustomLabel
title={<Label title='Staff Member' required />}
onDelete={onDelete}
/>
) : (
'Staff Member'
)
}
data={options}
onSelectItem={item => onValueUpdate({ member: item.value, ...item })}
errorMessage={errors.member}
value={member}
onBlur={() => onBlur('member')}
required
/>
</View>
<View style={{ flex: 1 }}>
<TextInput
disabled={true}
label={'Employee ID'}
value={organisation}
errorMessage={errors.organisation}
onChangeText={(val: string) => onValueUpdate({ organisation: val })}
/>
</View>
<AppDivider />
</View>
);
};
export default StaffMembers;
I'm importing components as
import { StaffMembers, GuestMembers } from '../request/components';
However when my app screen needs to load the component, it crashes giving the below error: Error when app crashes while loading component
When I edit the component's file and save it again, the app works fine.
Is there anything that I'm missing while importing the component? or something else?

Answer 1

The error clearly stat that you are not exporting the component/screen,
You are importing StaffMembers, GuestMembers which are modules, and not a class or component nested in the file, to solve this:
create index.js file in the root directory of ../request/components, and inside index.js file:
import StaffMembers from './StaffMembers';
import GuestMembers from './GuestMembers ';
export {
StaffMembers,
GuestMembers
};
now you can import the modules easily as you need.