Simple TODO react native app

todo_react.js

// Simple TODO react native app
// based on https://codeburst.io/todo-app-with-react-native-f889e97e398e

import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, TextInput, Keyboard, Button } from 'react-native';

const isAndroid = Platform.OS == "android";

export default class App extends Component {

  constructor() {
    super()
    this.state = {
      tasks: [
        {key: 0, text: "First task"}
      ],
      viewPadding: 0
    }
  }

  componentDidMount() {
    Keyboard.addListener(
      isAndroid ? "keyboardDidShow" : "keyboardWillShow",
      e => this.setState({ viewPadding: e.endCoordinates.height + 10 })
    );

    Keyboard.addListener(
      isAndroid ? "keyboardDidHide" : "keyboardWillHide",
      () => this.setState({ viewPadding: 10 })
    );
  }

  deleteTask = (index) => {
    this.setState((prevState) => {
      let tasks = prevState.tasks.slice();
      tasks.splice(index, 1);
      return { tasks: tasks };
    });
  }

  listItem = (props) => {
    return (
      <View>
        <View style={styles.listItemCont}>
          <Text style={styles.listItem}>
            {props.item.text}
          </Text>
          <Button title="X" onPress={() => this.deleteTask(props.index)} />
        </View>
        <View style={styles.hr} />
      </View>
    );
  }

  changeTextHandler = text => {
    this.setState({ text: text });
  };

  addTask = () => {
    let notEmpty = this.state.text.trim().length > 0;
    if (notEmpty) {
      this.setState((prevState) => {
        return { 
          tasks: prevState.tasks.concat({ key: prevState.tasks.length, text: prevState.text }),
          text: '' 
        }    
      });
    }
  }

  render() {
    return (
      <View style={[styles.container, { paddingBottom: this.state.viewPadding }]}>
        <FlatList 
          style={styles.list} 
          data={this.state.tasks}
          renderItem={this.listItem} />
        <TextInput 
          style={styles.textInput} 
          onChangeText={this.changeTextHandler} 
          onSubmitEditing={this.addTask}
          value={this.state.text}
          placeholder="Add Tasks"
          returnKeyType="done"
          returnKeyLabel="done" />  
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
    padding: 10,
    paddingTop: 30
  },
  list: {
    width: "100%"
  },
  listItem: {
    paddingTop: 2,
    paddingBottom: 2,
    fontSize: 18
  },
  hr: {
    height: 1,
    backgroundColor: "gray"
  },
  listItemCont: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between"
  },
  textInput: {
    height: 40,
    paddingRight: 10,
    paddingLeft: 10,
    borderColor: "gray",
    borderWidth: isAndroid ? 0 : 1,
    width: "100%"
  }
});