0.0.2-beta.14 • Published 10 months ago
@jsonxr/material3 v0.0.2-beta.14
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
0.0.2-beta.13
10 months ago
0.0.2-beta.12
10 months ago
0.0.2-beta.14
10 months ago
0.0.2-beta.17
10 months ago
0.0.2-beta.16
10 months ago
0.0.2-beta.18
10 months ago
0.0.2-beta.11
1 year ago
0.0.2-beta.9
1 year ago
0.0.2-beta.10
1 year ago
0.0.2-beta.7
2 years ago
0.0.2-beta.8
2 years ago
0.0.2-beta.6
2 years ago
0.0.2-beta.5
2 years ago
0.0.2-beta.4
2 years ago
0.0.2-beta.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago