6
An accessibility First Component Library for React Native
source link: https://reactnativeexample.com/an-accessibility-first-component-library-for-react-native/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
acrn-rn
An accessibility first component library and development environment for React Native.
Features
- Customizable accessibility presets for indiviual components, as well as containers designed to provide standalone accessible experiences.
- Works on both iOS and Android
- Sandbox Expo based Storybook environment for developers to build and test components
- Preconfigured tools to create and package your own component library
Try it Out
git clone
this respository andyarn install
- Run
yarn storybook
to launch the Storybook server - Run
yarn web
,yarn ios
, oryarn android
to launch the Storybook app in Expo and begin building or testing components
Using the Components
- Simply
npm install acrn-rn
in your React Native project and import any of the components or containers listed innode_modules/acrn-rn/src/index.tsx
Building and Demoing Your Own Components
- Create a folder for your component in the
src
directory - To view your components in Storybook, create a
stories.tsx
file for your component in/storybook/stories/
and import it in/storybook/stories/index.js
- If you plan on importing your components into other projects, create an entry for your component in
/src/index.tsx
. You can then useyarn prepare
to build yoursrc
directory for CommonJS, ES modules, and Typescript, configuring the"react-native-builder-bob"
field in yourpackage.json
as needed
Testing Your Components with Jest
- create a
__tests__
subdirectory in the directory containing your component and place atest.tsx
file inside - simply run
yarn test
oryarn test <your-test-file>
to execute the tests in your__tests__
directories
Configuring Your Expo App
- Adjust any fields in
app.json
to configure your expo app as needed. - Keep in mind that
"entryPoint"
must be specified in order to prevent Expo’s default behavior, which attempts to launch from the"main"
field in yourpackage.json
- The default entrypoint provided by
expo-init
is./node_modules/expo/AppEntry.js
, which will attempt to look for anApp.tsx
file in the root directory of your project
- The default entrypoint provided by
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK