fix(docs): syntax highlighting

docs/docs/guides/11-ripple-effect.md

@@ -14,7 +14,7 @@ The ripple effect on the iOS platform is replaced by a highlight effect.
 
 The `rippleColor` prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the `Button` component's ripple effect transparent, simply pass the desired color value to the prop:
 
-```
+```typescript
 <Button
   rippleColor="#FF000020"
   icon="camera"
@@ -28,7 +28,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 
 To disable the ripple effect in **all** of Paper's components set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider`.
 
-```
+```typescript
 import { Provider as PaperProvider } from 'react-native-paper';
 // ...
 

src/components/Appbar/AppbarAction.tsx

@@ -71,11 +71,11 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
- *         <Appbar.Action icon="magnify" onPress={() => {}} />
- *         <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" subtitle={'Subtitle'} />
+ *       <Appbar.Action icon="magnify" onPress={() => {}} />
+ *       <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarBackAction.tsx

@@ -49,9 +49,9 @@ export type Props = $Omit<
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *     <Appbar.BackAction onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarContent.tsx

@@ -92,9 +92,9 @@ export type Props = $RemoveChildren<typeof View> & {
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableCell.tsx

@@ -48,12 +48,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *   <DataTable.Row>
+ *     <DataTable.Cell numeric>1</DataTable.Cell>
+ *     <DataTable.Cell numeric>2</DataTable.Cell>
+ *     <DataTable.Cell numeric>3</DataTable.Cell>
+ *     <DataTable.Cell numeric>4</DataTable.Cell>
+ *   </DataTable.Row>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableHeader.tsx

@@ -28,17 +28,17 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableRow.tsx

@@ -44,12 +44,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
+ *  <DataTable.Row>
+ *    <DataTable.Cell numeric>1</DataTable.Cell>
+ *    <DataTable.Cell numeric>2</DataTable.Cell>
+ *    <DataTable.Cell numeric>3</DataTable.Cell>
+ *    <DataTable.Cell numeric>4</DataTable.Cell>
+ *  </DataTable.Row>
  * );
  *
  * export default MyComponent;

src/components/DataTable/DataTableTitle.tsx

@@ -63,17 +63,17 @@ export type Props = React.ComponentPropsWithRef<typeof Pressable> & {
  * import { DataTable } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *       <DataTable>
- *         <DataTable.Header>
- *           <DataTable.Title
- *             sortDirection='descending'
- *           >
- *             Dessert
- *           </DataTable.Title>
- *           <DataTable.Title numeric>Calories</DataTable.Title>
- *           <DataTable.Title numeric>Fat (g)</DataTable.Title>
- *         </DataTable.Header>
- *       </DataTable>
+ *   <DataTable>
+ *     <DataTable.Header>
+ *       <DataTable.Title
+ *         sortDirection='descending'
+ *       >
+ *         Dessert
+ *       </DataTable.Title>
+ *       <DataTable.Title numeric>Calories</DataTable.Title>
+ *       <DataTable.Title numeric>Fat (g)</DataTable.Title>
+ *     </DataTable.Header>
+ *   </DataTable>
  * );
  *
  * export default MyComponent;

src/components/Drawer/DrawerCollapsedItem.tsx

@@ -85,11 +85,11 @@ const outlineHeight = 32;
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.CollapsedItem
- *      focusedIcon="inbox"
- *      unfocusedIcon="inbox-outline"
- *      label="Inbox"
- *    />
+ *   <Drawer.CollapsedItem
+ *     focusedIcon="inbox"
+ *     unfocusedIcon="inbox-outline"
+ *     label="Inbox"
+ *   />
  * );
  *
  * export default MyComponent;

src/components/Drawer/DrawerItem.tsx

@@ -81,11 +81,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * import { Drawer } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *    <Drawer.Item
- *      style={{ backgroundColor: '#64ffda' }}
- *      icon="star"
- *      label="First Item"
- *    />
+ *   <Drawer.Item
+ *     style={{ backgroundColor: '#64ffda' }}
+ *     icon="star"
+ *     label="First Item"
+ *   />
  * );
  *
  * export default MyComponent;

src/components/Modal.tsx

@@ -81,7 +81,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *
  *   const showModal = () => setVisible(true);
  *   const hideModal = () => setVisible(false);
- *   const containerStyle = {backgroundColor: 'white', padding: 20};
+ *   const containerStyle = { backgroundColor: 'white', padding: 20 };
  *
  *   return (
  *     <PaperProvider>
@@ -90,7 +90,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
  *         </Modal>
  *       </Portal>
- *       <Button style={{marginTop: 30}} onPress={showModal}>
+ *       <Button style={{ marginTop: 30 }} onPress={showModal}>
  *         Show
  *       </Button>
  *     </PaperProvider>

src/components/ToggleButton/ToggleButtonGroup.tsx

@@ -39,7 +39,8 @@ export const ToggleButtonGroupContext =
  *   return (
  *     <ToggleButton.Group
  *       onValueChange={value => setValue(value)}
- *       value={value}>
+ *       value={value}
+ *     >
  *       <ToggleButton icon="format-align-left" value="left" />
  *       <ToggleButton icon="format-align-right" value="right" />
  *     </ToggleButton.Group>