import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Body, Header, Title } from 'react-native';

function changeText(){
	console.log("PIPPO");
}

export default class App extends React.Component{
	state = {buttonText:"BUTTON 2", accessible:true}

	
	changeText(){
		this.setState({buttonText:"PIPPO2"})
	}
	
	hideFocus(){
		console.log("Button clicked")
		this.setState({accessible:false, buttonText:"I am no more focusable"})
	}
	
	render(){
		return (
			
			<View style={styles.container} >

				<View>
					<TouchableOpacity style={styles.button} onPress={() => this.hideFocus()} >
						<Text>press to hide BUTTON 2 focus</Text>
					</TouchableOpacity>
				</View>

				<View importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
					<TouchableOpacity backgroundColor="" style={styles.button} importantForAccessibility={this.state.accessible ? "yes" : "no-hide-descendants" } accessible={this.state.accessible}>
						<Text>{this.state.buttonText}</Text>
					</TouchableOpacity>
				</View>

				<View>
					<TouchableOpacity style={styles.button}>
						<Text>BUTTON 3 </Text>
					</TouchableOpacity>
				</View>
				
			</View>
		  );
	}
}

function App2() {
  return (
    <View style={styles.container}>
      <Text>SSSSSSSOpen up App.js tsasddso start working on your app!AAAAAAAAA</Text>
	  <TouchableOpacity style={styles.button} onPress={changeText}>
          <Text>Press to change focus to BUTTON 3</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 20,
  },
});