Add RN Hide Focus

HideFocus/RNHideFocus/App.js

+import 'react-native-gesture-handler';
 import React from 'react';
 import { StyleSheet, Text, View, TouchableOpacity, Body, Header, Title } from 'react-native';
 
+
 function changeText(){
 	console.log("PIPPO");
 }
@@ -15,48 +17,41 @@ export default class App extends React.Component{
 	
 	hideFocus(){
 		console.log("Button clicked")
-		this.setState({accessible:false, buttonText:"I am no more focusable"})
+		this.setState({accessible:false, buttonText:"BUTTON 2: 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 style={styles.header}>
+						<Text style={styles.headerText}>RNChangeFocus</Text>
 				</View>
+				<View style={styles.container} >
 
-				<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} onPress={() => this.hideFocus()} >
+							<Text>Press to make BUTTON 2 unfocusable</Text>
+						</TouchableOpacity>
+					</View>
+
+					<View>
+						<TouchableOpacity style={styles.button}>
+							<Text>BUTTON 1 </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,
@@ -70,4 +65,16 @@ const styles = StyleSheet.create({
     padding: 10,
     marginBottom: 20,
   },
+
+  header: {
+    backgroundColor: '#008577',
+    paddingHorizontal: 20,
+	paddingVertical: 20,
+	marginTop: 20,
+  },
+  headerText: {
+    color: 'white',
+  },
+
+
 });

HideFocus/RNHideFocus/package.json

@@ -8,11 +8,19 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.6",
+    "@react-navigation/native": "^5.1.7",
+    "@react-navigation/stack": "^5.2.14",
     "expo": "~37.0.3",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
-    "react-native-web": "~0.11.7"
+    "react-native-gesture-handler": "~1.6.0",
+    "react-native-reanimated": "~1.7.0",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "~2.2.0",
+    "react-native-web": "~0.11.7",
+    "react-navigation-stack": "^2.3.13"
   },
   "devDependencies": {
     "babel-preset-expo": "~8.1.0",