website·Indexed 36 days ago
http://oss.callstack.com/react-native-paper/A Material Design component library for React Native. It provides a comprehensive set of UI components including Appbar, Buttons, Cards, Checkboxes, and BottomNavigation, with built-in support for theming, custom fonts, and integration with react-navigation.
Checkbox.Android component allows users to select multiple options from a set. While it follows Android platform guidelines, it is compatible with any platform. It extends TouchableRipple props.Button) provide an icon prop to display visuals. This prop is flexible and accepts several types of values: a Material Design icon name, an image source, or a custom render function.TouchableRipple component is a wrapper for views that need to respond to touches. It provides a Material Design "ink ripple" interaction effect on supported platforms (Android Lollipop and above). On unsupported platforms, it automatically falls back to a highlight effect.import * as React from 'react';
import { Text, TouchableRipple } from 'react-native-paper';
const MyComponent = () => (
<TouchableRipple
onPress={() => console.log('Pressed')}
rippleColor="rgba(0, 0, 0, .32)"
>
<Text>Press anywhere</Text>
</TouchableRipple>
);
export default MyComponent;RadioButton.Android component allows users to select a single option from a set. While it follows Android platform guidelines, it is compatible with and can be used on any platform.Checkbox.IOS component allows users to select multiple options from a set. While it follows iOS platform guidelines, it is compatible with any platform. It extends TouchableRipple props.Snackbar component provides brief feedback about an operation via a message rendered at the bottom of its container. To ensure the Snackbar appears as a popup regardless of the parent's position, wrap it in a Portal component.import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, Snackbar } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const onToggleSnackBar = () => setVisible(!visible);
const onDismissSnackBar = () => setVisible(false);
return (
<View style={styles.container}>
<Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
<Snackbar
visible={visible}
onDismiss={onDismissSnackBar}
action={{
label: 'Undo',
onPress: () => {
// Do something
},
}}>
Hey there! I'm a Snackbar.
</Snackbar>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-between',
},
});
export default MyComponent;RadioButton.IOS component allows a user to select a single option from a set. While it follows iOS platform guidelines, it can be used on any platform.Dialog component is used to inform users about specific tasks, provide critical information, or require decisions. To ensure the Dialog renders on top of other UI elements, it must be wrapped in a Portal component. A typical Dialog structure consists of Dialog.Title, Dialog.Content, and Dialog.Actions.import * as React from 'react';
import { View } from 'react-native';
import { Button, Dialog, Portal, PaperProvider, Text } from 'react-native-paper';
const MyComponent = () => {
const [visible, setVisible] = React.useState(false);
const showDialog = () => setVisible(true);
const hideDialog = () => setVisible(false);
return (
<PaperProvider>
<View>
<Button onPress={showDialog}>Show Dialog</Button>
<Portal>
<Dialog visible={visible} onDismiss={hideDialog}>
<Dialog.Title>Alert</Dialog.Title>
<Dialog.Content>
<Text variant="bodyMedium">This is simple dialog</Text>
</Dialog.Content>
<Dialog.Actions>
<Button onPress={hideDialog}>Done</Button>
</Dialog.Actions>
</Dialog>
</Portal>
</View>
</PaperProvider>
);
};
export default MyComponent;adaptNavigationTheme utility from react-native-paper. This function takes navigation-compliant themes and returns equivalents adjusted for MD3.import {
DarkTheme as NavigationDarkTheme,
DefaultTheme as NavigationDefaultTheme,
} from '@react-navigation/native';
import { adaptNavigationTheme } from 'react-native-paper';
const { LightTheme, DarkTheme } = adaptNavigationTheme({
reactNavigationLight: NavigationDefaultTheme,
reactNavigationDark: NavigationDarkTheme,
});@pchmn/expo-material3-theme library. This allows the app theme to automatically reflect changes the user makes to their system colors. The library reverts to a default theme on incompatible devices.import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
import { useColorScheme } from 'react-native';
import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
import App from './src/App';
export default function Main() {
const colorScheme = useColorScheme();
const { theme } = useMaterial3Theme();
const paperTheme =
colorScheme === 'dark'
? { ...MD3DarkTheme, colors: theme.dark }
: { ...MD3LightTheme, colors: theme.light };
return (
<PaperProvider theme={paperTheme}>
<App />
</PaperProvider>
);
}BottomNavigation component provides a bottom navigation bar to switch between different views. It requires a navigationState (containing the current index and route definitions), an onIndexChange callback to update the state, and a renderScene function to determine which component to display for a given route. You can use BottomNavigation.SceneMap as a helper to map route keys to components.import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';
const MusicRoute = () => <Text>Music</Text>;
const AlbumsRoute = () => <Text>Albums</Text>;
const RecentsRoute = () => <Text>Recents</Text>;
const NotificationsRoute = () => <Text>Notifications</Text>;
const MyComponent = () => {
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'music', title: 'Favorites', focusedIcon: 'heart', unfocusedIcon: 'heart-outline'},
{ key: 'albums', title: 'Albums', focusedIcon: 'album' },
{ key: 'recents', title: 'Recents', focusedIcon: 'history' },
{ key: 'notifications', title: 'Notifications', focusedIcon: 'bell', unfocusedIcon: 'bell-outline' },
]);
const renderScene = BottomNavigation.SceneMap({
music: MusicRoute,
albums: AlbumsRoute,
recents: RecentsRoute,
notifications: NotificationsRoute,
});
return (
<BottomNavigation
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={renderScene}
/>
);
};
export default MyComponent;