Browse Source

0.0.4: use simple state on component.

Frederic G. MARAND 6 years ago
parent
commit
5f306a3db1
1 changed files with 46 additions and 3 deletions
  1. 46 3
      App.js

+ 46 - 3
App.js

@@ -1,10 +1,16 @@
 import React, { Component } from 'react';
-import { AppRegistry, Image, StyleSheet, Text, View } from 'react-native';
+import {
+  // AppRegistry,
+  Image,
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fe8',
+    backgroundColor: '#f92',
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -51,7 +57,7 @@ class Greeting extends Component {
   }
 }
 
-export default class LotfOfGreetings extends Component {
+class LotfOfGreetings extends Component {
   render() {
     return (
       <View style={styles.container}>
@@ -63,5 +69,42 @@ export default class LotfOfGreetings extends Component {
   }
 }
 
+class Blink extends 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 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>
+    );
+  }
+}
+
 // skip this line if using Create React Native App
 // AppRegistry.registerComponent('AwesomeProject', () => Bananas);