@jsonxr/material3 NPM

react-native-material3

A toolkit for building react-native using Google's material design v3.

Roadmap

❌ Not started
🟡 In progress
✅ Complete

Components

Component	mob	web	win	mac
Actions
Buttons	🟡	❌	❌	❌
Buttons/ExtendedFab	❌	❌	❌	❌
Buttons/Fab	❌	❌	❌	❌
Buttons/Icon	❌	❌	❌	❌
Buttons/Segmented	❌	❌	❌	❌
Communication
Badges	❌	❌	❌	❌
Progress indicators	❌	❌	❌	❌
Snackbar	❌	❌	❌	❌
Containment
Bottom sheets	❌	❌	❌	❌
Cards	🟡	❌	❌	❌
Carousel	❌	❌	❌	❌
Dialogs	❌	❌	❌	❌
Divider	❌	❌	❌	❌
Lists	❌	❌	❌	❌
Side sheets	❌	❌	❌	❌
Tooltips	❌	❌	❌	❌
Navigation
Bottom app bar	❌	❌	❌	❌
Navigation bar	❌	❌	❌	❌
Navigation drawer	❌	❌	❌	❌
Navigation rail	❌	❌	❌	❌
Search	❌	❌	❌	❌
Tabs	❌	❌	❌	❌
Top app bar	❌	❌	❌	❌
Selection
Checkbox	❌	❌	❌	❌
Chips	❌	❌	❌	❌
Date pickers	❌	❌	❌	❌
Menus	❌	❌	❌	❌
Radio button	❌	❌	❌	❌
Sliders	❌	❌	❌	❌
Switch	❌	❌	❌	❌
Time picker	❌	❌	❌	❌
Text inputs
Autocomplete	❌	❌	❌	❌
Text fields	❌	❌	❌	❌
TextInput	🟡	❌	❌	❌
Other
Avatar	🟡	❌	❌	❌
Banner	❌	❌	❌	❌
Data table	❌	❌	❌	❌
Elevation	❌	❌	❌	❌
Field	❌	❌	❌	❌
Focus ring	❌	❌	❌	❌
Icons	🟡	❌	❌	❌
Pressable	✅	❌	❌	❌
Ripple	❌	❌	❌	❌
Select	❌	❌	❌	❌
Surface	✅	❌	❌	❌
Text	✅	❌	❌	❌

Install

yarn add react-native-materail3 react-native-svg

// react-native.config.js
module.exports = {
  assets: [
    // Montserrat-Bold.ttf, RobotoFlex.ttf
    './node_modules/react-native-material3/assets/fonts',
  ],
};

npx react-native-asset

Other Implementations:

@material/material-color-utilities - Google's implementation in js
@material/web - Web implementation linked from google
@mui/material - More advanced implementation for web
paper - ReactNative implementation of material
Native Base - ReactNative implementation of material design for web/win/mac/android/ios