<TouchableOpacity
  accessible={true}
  accessibilityLabel="Next Page Button"
  accessibilityHint="Navigates to the next page"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Next</Text>
  </View>
</TouchableOpacity>

<View
  accessibilityOrientationText="This is a complex screen-- A localized description of how to navigate it goes here">
  <Text>This is a complex screen</Text>
</View>

<View nativeID="miniDetails">
  <Text nativeID="rating">PG-13</Text>
  <Text nativeID="runtime">42 minutes</Text>
  ...
</View>

<View
  accessibilityDescribedBy={["rating", "runtime"]}>
    <Text>Content Tile Text</Text>
</View>

// setting accessible as true for the View here makes it as a single selectable component and its children Text components cannot be selected as a standalone component.

<View accessible={true}>
  <Text>Text one</Text>
  <Text>Text two</Text>
</View>

<View>
  <Text nativeID='usernameText'>Enter a username</Text>
  <TextInput 
    placeholder='Name'
    aria-label='Username'
    accessibilityDescribedBy={['usernameText']} />
</View>

<TouchableOpacity
  accessible={true}
  aria-label="Go back"
  accessibilityHint="Navigates to the previous screen"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Back</Text>
  </View>
</TouchableOpacity>

// here orientation is a state that change based on the screen orientation ['portrait' or 'landscape']

<View
    accessible={true}
    role="text"
    aria-label="Screen Orientation Text"
    accessibilityOrientationText={`Screen is in ${orientation} mode`}>
    <Text>{orientation==='landscape' ? "Horizontal" : "Vertical"}</Text>
</View>

// here isChecked is a boolean state variable.

<Pressable 
    onPress={handlePress}
    aria-checked={isChecked}
    role="checkbox"/>

// handleValueChange is an event handler for onValueChange event. isMuted is a state variable that is modified by handleValueChange event handler.

<Switch
    onValueChange={handleValueChange}
    value={isMuted}
    aria-label="Mute Switch"
    aria-disabled={false}
    role="switch"
/>

// here expanded is a state variable that change when we press the TouchableOpacity button and the state changes are handled by handlePress eventHandler. 

<View style={styles.container}>
    <TouchableOpacity
        onPress={handlePress}
        aria-expanded={expanded}
        role="button">
        <Text>{expanded ? "Collapse" : "Expand"} Section</Text>
    </TouchableOpacity>
</View>

<View aria-hidden={true} aria-label="Product Container">
  <Text aria-label="Product Name">Smartphone</Text>
  <Text aria-label="Manufacturing Month">July</Text>
</View>

<TouchableOpacity
  accessible={true}
  aria-label="Tap me!"
  onPress={onPress}>
  <View style={styles.button}>
    <Text style={styles.buttonText}>Press me!</Text>
  </View>
</TouchableOpacity>

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput
    aria-labelledby="formLabel"
  />
</View>

// here addOne is an event handler that adds increments value of count state variable by 1. 

<TouchableWithoutFeedback onPress={addOne}>
  <View style={styles.embedded}>
    <Text>Click me</Text>
  </View>
</TouchableWithoutFeedback>
<Text aria-live="polite">
  Clicked {count} times
</Text>

// here addOne is an event handler that adds increments value of count state variable by 1. 

<View>
  <Text aria-selected={true}>
     This component is set with the property aria-selected as true
  </Text>   
</View>

// here styles is an stylesheet object which has progress object that has styles for the progress bar.

<View
    accessible={true}
    aria-label="Progress Bar"
    role="progressbar"
    aria-valuemax={100}
    style={styles.progress}/>

// here styles is a stylesheet object which has progress object that has styles for the progress bar.

<View
    accessible={true}
    aria-label="Progress Bar"
    role="progressbar"
    aria-valuemin={0}
    style={styles.progress}/>

// here styles is an stylesheet object which has progress object that has styles for the progress bar. 

<View
    accessible={true}
    aria-label="Progress Bar"
    role="progressbar"
    aria-valuenow={25}
    style={styles.progress}/>

// here styles is an stylesheet object which has progress object that has styles for the progress bar.

<View
    accessible={true}
    aria-label="Progress Bar"
    role="progressbar"
    aria-valuetext={'Low'}
    style={styles.progress}/>

<View
  accessible={true}
  role="heading"
  style={styles.container}>
  <Text> Header Element </Text>
</View>

 
<View
    style={styles.container}
    transportControls={{
        play:'playButton',
        forward:'forwardButton'
    }}>
    <TouchableOpacity 
        nativeID={'playButton'}>
        <Text>Play Button</Text>
    </TouchableOpacity>
    <TouchableOpacity 
        nativeID={'forwardButton'}>
        <Text>Forward Button</Text>
    </TouchableOpacity>
</View>

<View 
    accessible={true}
    accessibilityElementsHidden={true}
    style={styles.container}>
    <Text>This section cannot be seen by assistive technologies</Text>
</View>

<TouchableOpacity 
    accessibilityLabel="Close Menu Bar">
    <Text>Close Menu</Text>
</TouchableOpacity>

<View>
  <Text nativeID="formLabel">Label for Input Field</Text>
  <TextInput accessibilityLabel="input" accessibilityLabelledBy="formLabel" />
</View>

// In this example hours is a state that gets updated on every hour.
 
<View
    style={styles.container}>
    <Text
        accessibilityLiveRegion="assertive"
        style={styles.text}>
        Time in hours is {hours}
    </Text>    
</View>

<View 
    accessibilityRole="button"
    accessible={true}
    onPress={handlePress}>
    <Text>Move to Home Page</Text>  
</View>

<View>
   <Text> Simple Switch</Text>
   <Switch
        accessibilityLabel="simple_switch"
        accessibilityRole="switch"
        accessibilityState={{ disabled: false}}
        onChange={handleChange}/>
</View>

// here value is a numeric constant and convertToMeaningText is a method that
// takes value and convert it to textual description of the value.

<View>
   <Text> Download Progress Bar</Text>
   <View
        accessible={true}
        accessibilityLabel="Progress Bar"
        accessibilityRole="progressbar"
        accessibilityValue={{min: 0, 
                             max: 100, 
                             now: value,
                             text:convertToMeaningfulText(value)}}
        style={styles.progress}/>
</View>

<View
  accessible={true}
  accessibilityActions={[
    {name: 'cut', label: 'cut'},
    {name: 'copy', label: 'copy'},
    {name: 'paste', label: 'paste'},
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'cut':
        Alert.alert('Alert', 'cut action success');
        break;
      case 'copy':
        Alert.alert('Alert', 'copy action success');
        break;
      case 'paste':
        Alert.alert('Alert', 'paste action success');
        break;
    }
  }}
/>