React Native — Accessibility

Photo by Paul Green on Unsplash

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

Accessibility

We can add props to our components to make them accessible to assistive technologies.

For example, we can write:

import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true}>
      <Text>text one</Text>
      <Text>text two</Text>
    </View>
  );
}

We set the accessible prop to true to make the View accessible.

accessbilityLabel

Also, we can add an accessibilityLevel prop to our component to make it accessible.

For example, we can write:

import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default function App() {
  return (
    <View accessible={true} style={styles.container}>
      <TouchableOpacity
        accessible={true}
        accessibilityLabel="Tap me!"
        onPress={() => alert('hello world')}>
        <View>
          <Text>Press me!</Text>
        </View>…