Playground

React Native Components

import { H1 } from 'native-base';

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

const Hello = () => (
	<View>
		<H1>Hello React</H1>
		<H1>Hello React</H1>
		<Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={{width: 100, height: 100}} />
		<Text>In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello world".</Text>
	</View>
);

export default function App() {
	return <Hello />;
}

Flux Pattern (Part 1)

import React from 'react';
import { View, Text } from 'react-native'; // 0.2.0
import axios from 'axios'; // 0.18.0

const api = 'https://api.github.com/repos/moko365/react-native-training/issues?access_token=2d63d3886641a0bc697debaee12260337490a505';

import EventEmitter from 'event-emitter'; // 0.3.5

/*
 * Store
 */
class AppStore extends EventEmitter {
	emitMessage(item) {
		this.emit('onLatestNews', item);
	}

	addListener(callback) {
		this.on('onLatestNews', callback);
	}
}
export var appStore = new AppStore();

/*
 * Dispatcher
 */
import { Dispatcher } from 'flux'; // 3.1.3

class AppDispatcher extends Dispatcher {
	handleViewAction(action) {
		this.dispatch({
			action: action
		});
	}
}

export var dispatcher = new AppDispatcher();


export default class App extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      issues: []
    };
  }
  
  componentDidMount() {
    axios.get(api).then(response => {
      var issues = response.data;
      this.setState({
        issues: issues
      });
    });
    
    //appStore.addListener(this.handleOnLatestNews);
  }
  
  handleOnLatestNews(issues) {
    this.setState({
      issues: issues
    });
  }

  componentWillUnmount() {

  }
  
  render() {
    return (
      <View>
        <Text>News</Text>
        {this.state.issues.map((issue) => (
          <Text>{issue.title}</Text>
        ))}
      </View>
    );
  }
}

Examples

• https://snack.expo.io/rkXm8WN2f