import { View } from 'react-native';
import CircularTimer from 'react-native-circular-timer';

export default class App extends Component<Props> {
  _restartTimer = () => {
    if (this._timerRef) this._timerRef.restart();
  };

  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white'
        }}
      >
        <CircularTimer
          ref={refs => (this._timerRef = refs)}
          onTimeElapsed={() => {
            console.log('Timer Finished!');
          }}
          showSecond={true}
        />
        <TouchableOpacity
          onPress={this._restartTimer}
          style={{
            marginTop: 20,
            borderRadius: 6,
            backgroundColor: '#000000'
          }}
        >
          <Text
            style={{
              padding: 16,
              fontSize: 18,
              color: 'white',
              fontWeight: 'bold'
            }}
          >
            Restart Timer
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}