1.0.0 • Published 6 years ago
material-components-react-native v1.0.0
material-components-react-native
React Native wrapper for material-components-ios from Google
Roadmap
- FlatButton, RaisedButton, ActivityIndicator, ProgressView,
- Card, Chip, ShadowLayer
- FloatingButton, Slider, Snackbar
- FeatureHighlight, Ink,
- ButtonBar
- Wrap controller API's like Collection and Navigation.
- Allow composing different many components like
Chip
intoTextField
.
TODO:
- Code Lint
- Testing
- Switch to TypeScript
- Rename ios project from
RNMaterialComponents
toRNMDC
. - Group components to folders.
Getting started
$ npm install material-components-react-native --save
Mostly automatic installation
$ react-native link material-components-react-native
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜material-components-react-native
and addRNMDC.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNMDC.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
Not yet available.
Run example for development
git clone git@github.com:birkir/material-components-react-native.git
cd material-components-react-native
yarn link
cd example
yarn link react-native-material-components
cd ios
pod install
cd ..
react-native run-ios
Documentation
FlatButton
import { FlatButton } from 'material-components-react-native';
<FlatButton
enabled={true} // default true
uppercaseTitle={false} // default true
hitAreaInsets={{ top: 0, left: 10, right: 0, bottom: 0 }}
disabledAlpha={0.7}
customTitleColor="orange" // deprecated
underlyingColorHint="black"
hasOpaqueBackground={true}
inkMaxRippleRadius={128}
inkStyle="bounded" // You can select "bounded" or "unbounded"
inkColor="blue"
>
Button content
</FlatButton>
RaisedButton
import { RaisedButton } from 'material-components-react-native';
<RaisedButton
enabled={true} // default true
uppercaseTitle={false} // default true
hitAreaInsets={{ top: 0, left: 10, right: 0, bottom: 0 }}
disabledAlpha={0.7}
customTitleColor="orange" // deprecated
underlyingColorHint="black"
inkMaxRippleRadius={128}
inkStyle="bounded" // You can select "bounded" or "unbounded"
inkColor="blue"
>
Button content
</RaisedButton>
Card
import { Card } from 'material-components-react-native';
<Card
style={{ flex: 1}}
cornerRadius={16}
shadowElevation={8}
borderWidth={2}
borderColor="blue"
>
<View>
<Text>Sub view</Text>
</View>
</Card>
ProgressBar
import { ProgressBar } from 'material-components-react-native';
<ProgressBar
style={{ height: 30 }}
progress={0.75}
progressTintColor="orange"
trackTintColor="black"
/>
TextField
import { TextField } from 'material-components-react-native';
let fieldRef;
<TextField
ref={ref => { fieldRef = ref; }}
style={{ height: 50 }}
enabled={true} // default true
hidesPlaceholderOnInput={true} // default true
placeholder="Placeholder text"
text="Set your own text"
textColor="blue"
textInsets={{ left: 10, top: 5, right: 0, bottom: 0 }}
onChange={e => console.log(e.nativeEvent)}
onChangeText={value => console.log(value)}
onFocus={() => console.log('Focused')}
onBlur={() => console.log('Blurred')}
/>
fieldRef.focus();
fieldRef.blur();
fieldRef.clearText();
1.0.0
6 years ago