State

App.js

@@ -1,23 +1,35 @@
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { Component } from 'react';
+import { AppRegistry, Text, View } from 'react-native';
 
-export default class App extends React.Component {
+class Blink extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {isShowingText: true};
+
+ setInterval(() => {
+ this.setState(previousState => {
+ return { isShowingText: !previousState.isShowingText };
+ });
+ }, 1000);
+ }
+
+ render() {
+ let display = this.state.isShowingText ? this.props.text : ' ';
+ return (
+ <Text>{display}</Text>
+ );
+ }
+}
+export default class BlinkApp extends Component {
  render() {
  return (
- <View style={styles.container}>
- <Text>Open up App.js to start working on your app!</Text>
- <Text>Changes you make will automatically reload.</Text>
- <Text>Shake your phone to open the developer menu.</Text>
+ <View>
+ <Blink text='I love to blink' />
+ <Blink text='Yes blinking is so great' />
+ <Blink text='aaaaaaaaaa' />
  </View>
  );
  }
 }
 
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
+AppRegistry.registerComponent('react-native-turorial', () => BlinkApp);