App04Blink.js 893 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. import React from "react";
  2. import {
  3. Text,
  4. View,
  5. } from 'react-native';
  6. import styles from "../styles";
  7. class Blink extends React.Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = { isShowingText: true };
  11. setInterval(() => {
  12. this.setState(previousState => ({
  13. isShowingText: !previousState.isShowingText,
  14. }));
  15. }, 1000);
  16. }
  17. render() {
  18. const display = this.state.isShowingText
  19. ? this.props.text
  20. : ' ';
  21. return (
  22. <Text>{display}</Text>
  23. );
  24. }
  25. }
  26. export default class BlinkApp extends React.Component {
  27. render() {
  28. return (
  29. <View style={styles.container}>
  30. <Blink text="I love to blink" />
  31. <Blink text="Yes blinking is so great" />
  32. <Blink text="Why did they ever take this out of HTML" />
  33. <Blink text="Look at me look at me look at me" />
  34. </View>
  35. );
  36. }
  37. }