React Native Paper

Making your React Native apps look and feel nativeStar3,065

React Native Paper is a high-quality, standard-compliant Material Design library that has you covered in all major use-cases.

Learn moreDocs

Try out components in our demo apps:

It's free, it's Open Source!

• 

  55,300

  Downloads weekly on npm

• 

  7,371

  Stars on GitHub

• 

  1,306

  Number of commits

Look

What makes an app look native?

Its interface. It is responsive, fast and works reliably on both platforms. When building a React component, you have to style each of them yourself, according to the guidelines of the platform you are targeting. This can be overwhelming and non-trivial to do right.

It's not a real badge, actually, but you can take our word for it ;)

Feel

What makes an app feel native?

Snappy interface that behaves just like any other app. It supports accessibility standards - in other words, it does everything a native app would do. Interactions in React Native are easy to do, but getting to 100% polish requires extra effort. Implementing exact platform-specific animations, making sure it runs under heavy load are just two examples of what we have to think when writing first-class interface.

React-native-paper ships with a lot of components and interactions that are there to satisfy every single use case you might have. See it for yourself.

Paper supports Material You!

React Native Paper library officially supports the new Material Design generation called Material You - a brand new and the most expressive design system by Google.

All of the Paper’s components have been adjusted to the latest standards of visual by changes in colors, typography and animations so you can build your apps according to the latest trends.

Achieve more in less time

Don't waste your time writing complex components from scratch.

Standard React code

const Touchable = Platform.OS==='ios'? TouchableOpacity : TouchableWithNativeFeedbackconstButton=({ onPress })=><Touchablestyle={styles.button}onPress={onPress}><Textstyle={styles.text}> Press me</Text></Touchable>const styles = StyleSheet.create({ button:{// Styles here} text:{// Styles here}});

With react-native-paper

<ButtononPress={onPress}> Press me</Button>👆

Interactions, animations and accessibility.React-native-paper takes care of the details and your UI logic, so you can focus on your users.

Try it live!Try our live demo and check it out for yourself! When you are done, make sure to copy the code and drop it straight into a React Native app! Yes, Paper is cross-platform and works on both web and mobile.<View style={ customStyle.box }> <Text variant='headlineSmall'> Sign up to our newsletter! </Text> <Text variant='labelLarge'> Get a monthly dose of fresh React Native Paper news straight to your mailbox. Just sign up to our newsletter and enjoy! </Text> <Divider /> <View style={ customStyle.row }> <Chip onPress={ toggleTheme } style={{ marginRight: 8 }} selected={ isDarkTheme } > Dark theme </Chip> <Chip onPress={ toggleMD3 } style={{ marginRight: 8 }} selected={ isV3 } > Material You </Chip> </View> <Divider /> <TextInput style={{ marginTop: 15 }} label='Outlined input' mode='outlined' /> <TextInput style={{ marginTop: 15 }} label='Flat input' mode='flat' /> <Button style={{ marginTop: 15 }} icon='send' mode='contained' onPress={ toggleSnack } > Sign me up </Button> </View> <Snackbar visible={ showSnack } onDismiss={ toggleSnack } action={{ label: 'Dismiss', onPress: () => { // Do side magic }, }} duration={ Snackbar.DURATION_LONG } > Hey there! I'm a Snackbar. </Snackbar><Viewstyle={ customStyle.box }><Textvariant='headlineSmall'> Sign up to our newsletter!</Text><Textvariant='labelLarge'> Get a monthly dose of fresh React Native Paper news straight to your mailbox. Just sign up to our newsletter and enjoy!</Text><Divider/><Viewstyle={ customStyle.row }><ChiponPress={ toggleTheme}style={{ marginRight:8}}selected={ isDarkTheme }> Dark theme</Chip><ChiponPress={ toggleMD3}style={{ marginRight:8}}selected={ isV3 }> Material You</Chip></View><Divider/><TextInputstyle={{ marginTop:15}}label='Outlined input'mode='outlined'/><TextInputstyle={{ marginTop:15}}label='Flat input'mode='flat'/><Buttonstyle={{ marginTop:15}}icon='send'mode='contained'onPress={ toggleSnack }> Sign me up</Button></View><Snackbarvisible={ showSnack }onDismiss={ toggleSnack }action={{ label:'Dismiss',onPress:()=>{// Do side magic},}}duration={ Snackbar.DURATION_LONG}> Hey there!I'm a Snackbar.</Snackbar>react-native-paper󰏌Sign up to our newsletter!Get a monthly dose of fresh React Native Paper news straight to your mailbox. Just sign up to our newsletter and enjoy!Dark theme󰄬Material YouOutlined inputOutlined inputOutlined inputFlat inputFlat input󰒊Sign me up

Key concepts

react-native-paper focuses in important concepts that are hard to build from scratch.

Platform adaptation

React-native-paper meets high expectations set by iOS and Android ecosystems. Your users will appreciate this choice.

Full theming support

Every app is different - that’s why themes are first-class citizens in React-native-paper. Switch between dark and light modes, customise default colours or make your own. It’s never been that easy.

Accessibility and RTL support

React-native-paper is fully compatible with screen readers, readability tools and right-to-left languages. Make your app inclusive by default.

They are already using react-native-paper

Kurt Kemple

Co-organizer of @NYCGraphQL

Paper w/ RNW is a glorious thing! Universal design systems are where it's at. #alltheplatforms

brent

Developer @ Expo / React Native

react-native-paper is 😎 ios + android + web, and exports typescript types.

Michał Osadnik

Software Engineer @SWMansion

Still cannot believe how actively react-native-paper is maintained! Is it resurrection of Material Design on iOS in React Native?

We are in Discord

Join us in the #react-native-paper channel

Community where people discuss and supports others in building react-native-paper apps.

Join us on Discord

Paper is created by

React Native Core Contributors and official Facebook partners

Callstack cooperates with many clients from various industries, including big enterprises, helping them to improve their React Native products and achieve business goals.

Visit Callstack