Commit 6b0c632b authored by paolo.pecis's avatar paolo.pecis

Add RN Hide Focus

parent 30e92aed
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,46 +17,39 @@ 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.header}>
<Text style={styles.headerText}>RNChangeFocus</Text>
</View>
<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>
<Text>Press to make BUTTON 2 unfocusable</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity style={styles.button}>
<Text>BUTTON 3 </Text>
<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>
);
}
}
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({
......@@ -70,4 +65,16 @@ const styles = StyleSheet.create({
padding: 10,
marginBottom: 20,
},
header: {
backgroundColor: '#008577',
paddingHorizontal: 20,
paddingVertical: 20,
marginTop: 20,
},
headerText: {
color: 'white',
},
});
This diff is collapsed.
......@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment