React Native Paper

https://reactnativepaper.com/docs
Admin
React Native Paper is a high-quality, standard-compliant Material Design library for building...
Tokens:1,127
Snippets:12
Trust Score:9
Update:4 months ago
Show doc for...
Tokens:
Raw
### React Native Paper Live Demo Components

Source: https://reactnativepaper.com

This snippet demonstrates the usage of various React Native Paper components in a form for newsletter signup. It includes interactive elements like theme toggles and a snackbar.

```jsx
<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>
```

```jsx
<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>
```

--------------------------------

### Standard React Native Button Implementation

Source: https://reactnativepaper.com

This snippet shows a standard React Native implementation for a touchable button using Platform.OS to conditionally render TouchableOpacity for iOS or TouchableWithNativeFeedback for other platforms. It requires StyleSheet and Text components from React Native.

```javascript
```
```

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

```

```
```

--------------------------------

### React Native Paper Button Component

Source: https://reactnativepaper.com

This snippet demonstrates using the Button component from react-native-paper, which abstracts away platform-specific touch handling and styling. It simplifies button creation by providing a pre-styled and accessible component.

```javascript
<Button onPress={onPress}>
  Press me
</Button>
```
Tokens:
Raw