/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

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

    // Toggle the state every second
    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 App extends Component<Props> {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-between'}}>
        {/* <Text>Hello world!</Text>
        <Image source={pic} style={{width: 193, height: 110}}/>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
        <Blink text='I love to blink' />
        <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> */}
          {/* <View style={{flex: 1, backgroundColor: 'powderblue'}} />
          <View style={{flex: 2, backgroundColor: 'skyblue'}}>
            <Text style={styles.bigblue}>hoge</Text>
          </View>
          <View style={{flex: 3, backgroundColor: 'steelblue'}} /> */}
          <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
          <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
        </View>
    );
  }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
    textAlignVertical: "center",
    textAlign: "center"
  },
  red: {
    color: 'red',
  },
});

@@ -95,17 +95,16 @@
 low%0A */%0A
-%0A
 import R
@@ -182,16 +182,27 @@
 w, Image
+, TextInput
 %7D from '
@@ -221,672 +221,127 @@
 ';%0A%0A
-const instructions = Platform.select(%7B%0A  ios: 'Press Cmd+R to reload,%5Cn' + 'Cmd+D or shake for dev menu',%0A  android:%0A    'Double tap R on your keyboard to reload,%5Cn' +%0A    'Shake or press menu button for dev menu',%0A%7D);%0A%0Atype Props = %7B%7D;%0A%0Aclass Greeting extends Component %7B%0A  render() %7B%0A    return (%0A      %3CText%3EHello %7Bthis.props.name%7D!%3C/Text%3E%0A    );%0A  %7D%0A%7D%0A%0Aclass Blink extends Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.state = %7BisShowingText: true%7D;%0A%0A    // Toggle the state every second%0A    setInterval(() =%3E %7B%0A      this.setState(previousState =%3E %7B%0A        return %7B isShowingText: !previousState.isShowingText %7D;%0A      %7D);%0A    %7D, 1000)
+export default class App extends Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.state = %7Btext: ''%7D
 ;%0A  %7D%0A
-%0A
   re
@@ -357,399 +357,48 @@
     
-let display = this.state.isShowingText ? this.props.text : ' ';%0A    return (%0A      %3CText%3E%7Bdisplay%7D%3C/Text%3E%0A    );%0A  %7D%0A%7D%0A%0Aexport default class App extends Component%3CProps%3E %7B%0A  render() %7B%0A    let pic = %7B%0A      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'%0A    %7D;%0A    return (%0A      %3CView style=%7B%7Bflex: 1, flexDirection: 'column', justifyContent: 'space-between'
+return (%0A      %3CView style=%7B%7Bpadding: 10
 %7D%7D%3E%0A
@@ -408,95 +408,46 @@
     
- %7B/*
  %3CText
-%3EHello world!%3C/Text%3E%0A        %3CImage source=%7Bpic%7D style=%7B%7Bwidth: 193, 
+Input%0A          style=%7B%7B
 height: 
 110%7D
@@ -446,24 +446,22 @@
 ht: 
-11
+4
 0%7D%7D
-/%3E
 %0A
+ 
         
 %3CGre
@@ -460,377 +460,111 @@
     
-%3CGreeting name='Rexxar' /%3E%0A        %3CGreeting name='Jaina' /%3E%0A        %3CGreeting name='Valeera' /%3E%0A        %3CBlink text='I love to blink' /%3E%0A        %3CText style=%7B%5Bstyles.red, styles.bigblue%5D%7D%3Ered, then bigblue%3C/Text%3E%0A        %3CView style=%7B%7Bwidth: 50, height: 50, backgroundColor: 'powderblue'%7D%7D /%3E%0A        %3CView style=%7B%7Bwidth: 100, height: 100, backgroundColor: 'skyblue'%7D%7D
+ placeholder=%22Type here to translate!%22%0A          onChangeText=%7B(text) =%3E this.setState(%7Btext%7D)%7D%0A       
  /%3E%0A
@@ -564,36 +564,36 @@
     /%3E%0A        %3C
-View
+Text
  style=%7B%7Bwidth: 
@@ -589,592 +589,129 @@
 e=%7B%7B
-width: 150, height
+padding
 : 1
-5
 0, 
-backgroundColor: 'steelblue'%7D%7D /%3E */%7D%0A          %7B/* %3CView style=%7B%7Bflex: 1, backgroundColor: 'powderblue'%7D%7D /%3E%0A          %3CView style=%7B%7Bflex: 2, backgroundColor: 'skyblue'%7D%7D%3E%0A            %3CText style=%7Bstyles.bigblue%7D%3Ehoge%3C/Text%3E%0A          %3C/View%3E%0A          %3CView style=%7B%7Bflex: 3, backgroundColor: 'steelblue'%7D%7D /%3E */%7D%0A          %3CView style=%7B%7Bwidth: 50, height: 50, backgroundColor: 'powderblue'%7D%7D /%3E%0A          %3CView style=%7B%7Bwidth: 50, height: 50, backgroundColor: 'skyblue'%7D%7D /%3E%0A          %3CView style=%7B%7Bwidth: 50, height: 50, backgroundColor: 'steelblue'%7D%7D /%3E%0A  
+fontSize: 42%7D%7D%3E%0A          %7Bthis.state.text.split(' ').map((word) =%3E word && '%F0%9F%8D%95').join(' ')%7D%0A        %3C/Text%3E%0A
     

Add text input sample