setState is not working properly

Hello, I'm doing an application in reactnative and I'm trying to set a state but it does not work, can you help me? follows the source (obs the handleClickFooter function that does not arrow the state)

import React, { Component } from 'react';
import {
  StyleSheet, Text, View, Image, Button, Platform,
  TouchableOpacity,
  FlatList, Alert
} from "react-native"
import { androidClientId } from "./superSecretKey"
import Expo from "expo"
import Icon from 'react-native-vector-icons/MaterialIcons';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tela: "home"
    }
  }

  render() {
    return (
      <View style={styles.container}>
          <LoggedInPage name={this.state.login.name} photoUrl={this.state.login.photoUrl} />
      </View>
    )
  }
}

handleClickFooter = (param) => {
  try {
    this.setState({ tela: param }, () => {
      Alert.alert(this.state.tela)
    })
  } catch (error) {
    console.log(error)
  }
}




          <View style={styles.tabBar}>
            <TouchableOpacity style={styles.tabItem} onPress={this.handleClickFooter.bind(this, 'home')}   >
              <Icon name="home" size={25} />
              <Text style={styles.tabTitle}>Home</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.tabItem} onPress={this.handleClickFooter.bind(this, 'viagem')}    >
              <Icon name="navigation" size={25} />
              <Text style={styles.tabTitle}>Viagem</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.tabItem} onPress={this.handleClickFooter.bind(this, 'grupo')}    >
              <Icon name="group" size={25} />
              <Text style={styles.tabTitle}>Grupo</Text>
            </TouchableOpacity>
          </View>