import React from "react";
import {
  Text,
  View,
} from 'react-native';

import styles from "./styles";

class Blink extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isShowingText: true };

    setInterval(() => {
      this.setState(previousState => ({
        isShowingText: !previousState.isShowingText,
      }));
    }, 1000);
  }

  render() {
    const display = this.state.isShowingText
      ? this.props.text
      : ' ';


    return (
      <Text>{display}</Text>
    );
  }
}

export default class BlinkApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Blink text="I love to blink" />
        <Blink text="Yes blinking is so great" />
        <Blink text="Why did they ever take this out of HTML" />
        <Blink text="Look at me look at me look at me" />
      </View>
    );
  }
}