Refactor props.

index.ts

@@ -105,6 +105,7 @@ export type { FixedWidthProps } from './react-native/types/FixedWidthProps'
 export type { FlashMessageProps } from './react-native/types/FlashMessageProps'
 export type { FlashMessageState } from './react-native/types/FlashMessageState'
 export type { FlashMessageStyle } from './react-native/types/FlashMessageStyle'
+export type { FlatColorBackgroundProps } from './react-native/types/FlatColorBackgroundProps'
 export type { HeaderIcon } from './react-native/types/HeaderIcon'
 export type { HeaderProps } from './react-native/types/HeaderProps'
 export type { HeaderStyle } from './react-native/types/HeaderStyle'

react-native/components/createFlatColorBackgroundComponent/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { type ColorValue, StyleSheet, View } from 'react-native'
+import type { FlatColorBackgroundProps } from '../../types/FlatColorBackgroundProps'
 
 /**
  * Creates a new React component which displays a solid color background behind
@@ -10,9 +11,7 @@ import { type ColorValue, StyleSheet, View } from 'react-native'
  */
 export const createFlatColorBackgroundComponent = (
   color: ColorValue
-): React.FunctionComponent<
-React.PropsWithChildren<{ size: 'fitsContent' | 'fillsContainer' }>
-> => {
+): React.FunctionComponent<FlatColorBackgroundProps> => {
   const styles = StyleSheet.create({
     fitsContent: {
       backgroundColor: color

react-native/types/FlatColorBackgroundProps/index.tsx

@@ -0,0 +1,11 @@
+import type * as React from 'react'
+
+/**
+ * Props to be given to flat color background components.
+ */
+export type FlatColorBackgroundProps = React.PropsWithChildren<{
+  /**
+   * Describes how the background component should be sized.
+   */
+  readonly size: 'fitsContent' | 'fillsContainer'
+}>

react-native/types/FlatColorBackgroundProps/readme.md

@@ -0,0 +1,15 @@
+# `react-native-app-helpers/FlatColorBackgroundProps`
+
+Props to be given to flat color background components.
+
+## Usage
+
+```tsx
+import type { FlatColorBackgroundProps } from "react-native-app-helpers";
+import { Text } from "react-native";
+
+const example: FlatColorBackgroundProps = {
+  size: "fillsContainer",
+  children: <Text>Example Children</Text>,
+};
+```

react-native/types/PaddingProps/readme.md

@@ -6,8 +6,10 @@ Props to be given to padding components.
 
 ```tsx
 import type { PaddingProps } from "react-native-app-helpers";
+import { Text } from "react-native";
 
 const example: PaddingProps = {
   size: "fillsContainer",
+  children: <Text>Example Children</Text>,
 };
 ```

readme.md

@@ -125,6 +125,7 @@ import { createTextComponent } from "react-native-app-helpers";
 - [FlashMessageProps](./react-native/types/FlashMessageProps/readme.md)
 - [FlashMessageState](./react-native/types/FlashMessageState/readme.md)
 - [FlashMessageStyle](./react-native/types/FlashMessageStyle/readme.md)
+- [FlatColorBackgroundProps](./react-native/types/FlatColorBackgroundProps/readme.md)
 - [HeaderIcon](./react-native/types/HeaderIcon/readme.md)
 - [HeaderProps](./react-native/types/HeaderProps/readme.md)
 - [HeaderStyle](./react-native/types/HeaderStyle/readme.md)