React native not initializing ReactCoundownClock

Question

Trying to run a simple example with the ReactCountdownClock. But it is not able to initialize.

The setup is as following:

 import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; import {ReactCountdownClock} from 'react-countdown-clock'; export default class App extends React.Component { constructor() { super(); this.myCallback = this.myCallback.bind(this); } myCallback() { console.log("test"); } render() { return ( <View style={styles.container}> <ReactCountdownClock seconds={60} color="#000" alpha={0.9} size={300} onComplete={this.myCallback} /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 

But I just keep getting an 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 its defined in.

Answer 1

As far as I assume from the coffee-script code on the components Github page, you don't have to use the curly brackets on the import. So instead of using

import { ReactContdownClock } from 'react-countdown-clock';

you could write

import ReactContdownClock from 'react-countdown-clock';

cause there is just that single exported component.

But as far as I understand React-Native you will run into a second issue because this component uses (renders) HTML Tags and these will not be displayed until they're rendered by a WebView.