React Native Stateless component saying undefined - ios

Question

I'm trying to create a component using React Native like so:
export class IndicatorOverlay extends Component {
render() {
return (
<View>
<Text>text</Text>
</View>
);
}
};
The above works, but when I try to make it stateless like so...
export default ({ text = 'text' }) => {
return (
<View>
<Text>{text}</Text>
</View>
);
};
I get the following error:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined. You
likely forgot to export your component from the file it's defined in.
I'm sure I'm missing something basic, but I just can't see it. I use a similar stateless component in a React web app and it's fine.
Using react 16.0.0-alpha.6 and react-native 0.43.2, and am seeing this error in the iPhone simulator.
Hope someone can help :)

Answer 1

This is likely because the first example is a named export, while the second one is a default one therefore the way need to import them is different.
Assuming you import your module like this:
import { IndicatorOverlay } from 'IndicatorOverlay';
you have two options. Either:
1) change the way you import your module (since the stateless component is a default export now):
import IndicatorOverlay from 'IndicatorOverlay';
2) keep the import intact, but refactor your stateless component to something like this:
export const IndicatorOverlay = ({text = 'text'}) => {
return (
<View>
<Text>{text}</Text>
</View>
);
};
You can make it more DRY btw:
export const IndicatorOverlay = ({ text = 'text' }) => (
<View>
<Text>{text}</Text>
</View>
);
You can read more about imports and exports on MDN:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export