App09TextInput.js 667 B

1234567891011121314151617181920212223242526272829
  1. import React from 'react';
  2. import {
  3. Text,
  4. TextInput,
  5. View,
  6. } from 'react-native';
  7. class PizzaTranslator extends React.Component {
  8. constructor(props) {
  9. super(props);
  10. this.state = { text: '' };
  11. }
  12. render() {
  13. return (
  14. <View style={{ padding: 10, paddingTop: 20 }}>
  15. <TextInput
  16. onChangeText={text => this.setState({ text }) }
  17. placeholder="Type here to translate!"
  18. style={{ height: 40 }}
  19. />
  20. <Text style={{ padding: 10, fontSize: 42 }}>
  21. {this.state.text.split(' ').map(word => word && '🍕').join(' ')}
  22. </Text>
  23. </View>
  24. );
  25. }
  26. }
  27. export default PizzaTranslator;