diff --git a/README.md b/README.md
index 9778ced..9bfe74a 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,7 @@ staying in the experience in your app.
- [GiphyVideoManager](docs/api.md#giphyvideomanager)
- [GiphyGridView](docs/api.md#giphygridview)
- [GiphyContent](docs/api.md#giphycontent)
+- [GiphyTheme](docs/api.md#giphytheme)
### Guides
diff --git a/docs/api.md b/docs/api.md
index a51a247..4d194d5 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -7,6 +7,7 @@
- [GiphyVideoManager](#giphyvideomanager)
- [GiphyGridView](#giphygridview)
- [GiphyContent](#giphycontent)
+- [GiphyTheme](#giphytheme)
## GiphySDK
@@ -53,23 +54,23 @@ Configure the `GiphyDialog` view and behavior.
#### Options
-| Option | Description | Type | Default | Platform |
-|---------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|---------------------------------|
-| clipsPreviewRenditionType | Certain renditions (cases of the [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) enum) are not available for Clips. As a result, if you set the renditionType property of the [GiphyDialog](#giphydialog) to an unsupported rendition type, clips previews may not play back correctly in the grid. To account for this limitation, we created this property specifically to work with clips. | [`GiphyClipsRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/49b4ac5adc488133a6e84e06717f952a00d6fa3d/src/native/types.ts#L69-L83) | `.FixedWidth` | ✅ Android
✅ iOS |
-| confirmationRenditionType | A rendition type for the confirmation screen. | [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) | `.Original` | ✅ Android
❌ iOS |
-| enableDynamicText | Allows to create animated text results for search queries where there are no matching results in GIPHY's library. [Learn more](./animated.md) | `boolean` | `false` | ✅ Android
✅ iOS |
-| fileType | A file type for the grid. | [`GiphyFileExtension`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L59-L63) | `.GIF` | ✅ Android
✅ iOS |
-| mediaTypeConfig | Type(s) of content to be displayed in the dialog.
`Note`: Emoji only is not available for the carousel layout option. | [`GiphyContentType`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L7-L13) \[\] | Expand
`[.Recents, .Gif, .Sticker, .Emoji, .Text]`
✅ iOS |
-| rating | A specific content rating for the search results. | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
-| renditionType | A rendition type for the grid. | [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) | `.FixedWidth` | ✅ Android
✅ iOS |
-| selectedContentType | The default Giphy Content-Type. | [`GiphyContentType`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L7-L13) | `.Gif` | ✅ Android
✅ iOS |
-| shouldLocalizeSearch | Option to choose whether or not to localize the search results based on phone settings. | `boolean` | `false` | ❌ Android
✅ iOS |
-| showCheckeredBackground | Enable/disable the checkered background for stickers and text media type. | `boolean` | `false` | ✅ Android
❌ iOS |
-| showConfirmationScreen | Show a secondary confirmation screen when the user taps a GIF, which shows a larger rendition of the asset. This confirmation screen is only available for `GiphyDirection.Vertical` mode - this property will be ignored if the layout is `GiphyDirection.Horizontal`. | `boolean` | `false` | ✅ Android
✅ iOS |
-| showSuggestionsBar | Show/hide a suggestions bar. | `boolean` | `true` | ✅ Android
❌ iOS |
-| stickerColumnCount | For carousel layouts, we provide the option to set the number of columns for stickers and text. We recommend using 3 columns for blurred mode. | [`GiphyStickersColumnCount`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L53-L57) | `.Three` | ✅ Android
✅ iOS |
-| theme | Adjust the GiphyDialog theme | [`GiphyThemePreset`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L1-L5) | `.Light` | ✅ Android
✅ iOS |
-| trayHeightMultiplier | Height for the tray's "snap point" as a ratio of the GiphyDialog's height. | `number` | `0.7` | ❌ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|-----------------------------------------------------------------------------------------|---------------------------------|
+| clipsPreviewRenditionType | Certain renditions (cases of the [`GiphyRendition`](../src/dto/giphyRendition.ts) enum) are not available for Clips. As a result, if you set the renditionType property of the [GiphyDialog](#giphydialog) to an unsupported rendition type, clips previews may not play back correctly in the grid. To account for this limitation, we created this property specifically to work with clips. | [`GiphyClipsRendition`](../src/dto/giphyRendition.ts) | `.FixedWidth` | ✅ Android
✅ iOS |
+| confirmationRenditionType | A rendition type for the confirmation screen. | [`GiphyRendition`](../src/dto/giphyRendition.ts) | `.Original` | ✅ Android
❌ iOS |
+| enableDynamicText | Allows to create animated text results for search queries where there are no matching results in GIPHY's library. [Learn more](./animated.md) | `boolean` | `false` | ✅ Android
✅ iOS |
+| fileType | A file type for the grid. | [`GiphyFileExtension`](../src/dto/giphyFileExtension.ts) | `.GIF` | ✅ Android
✅ iOS |
+| mediaTypeConfig | Type(s) of content to be displayed in the dialog.
`Note`: Emoji only is not available for the carousel layout option. | [`GiphyContentType`](../src/dto/giphyContentType.ts) \[\] | Expand
`[.Recents, .Gif, .Sticker, .Emoji, .Text]`
✅ iOS |
+| rating | A specific content rating for the search results. | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
+| renditionType | A rendition type for the grid. | [`GiphyRendition`](../src/dto/giphyRendition.ts) | `.FixedWidth` | ✅ Android
✅ iOS |
+| selectedContentType | The default Giphy Content-Type. | [`GiphyContentType`](../src/dto/giphyContentType.ts) | `.Gif` | ✅ Android
✅ iOS |
+| shouldLocalizeSearch | Option to choose whether or not to localize the search results based on phone settings. | `boolean` | `false` | ❌ Android
✅ iOS |
+| showCheckeredBackground | Enable/disable the checkered background for stickers and text media type. | `boolean` | `false` | ✅ Android
❌ iOS |
+| showConfirmationScreen | Show a secondary confirmation screen when the user taps a GIF, which shows a larger rendition of the asset. This confirmation screen is only available for `GiphyDirection.Vertical` mode - this property will be ignored if the layout is `GiphyDirection.Horizontal`. | `boolean` | `false` | ✅ Android
✅ iOS |
+| showSuggestionsBar | Show/hide a suggestions bar. | `boolean` | `true` | ✅ Android
❌ iOS |
+| stickerColumnCount | For carousel layouts, we provide the option to set the number of columns for stickers and text. We recommend using 3 columns for blurred mode. | [`GiphyStickersColumnCount`](../src/dto/misc.ts) | `.Three` | ✅ Android
✅ iOS |
+| theme | Adjust the GiphyDialog theme | [`GiphyTheme`](#giphytheme) | `.Light` | ✅ Android
✅ iOS |
+| trayHeightMultiplier | Height for the tray's "snap point" as a ratio of the GiphyDialog's height. | `number` | `0.7` | ❌ Android
✅ iOS |
### show: `show() => void`
@@ -113,13 +114,13 @@ objects.
#### Props
-| Prop | Description | Type | Default | Platform |
-|-------------------------|-------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------------|---------------------------------|
-| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. | `boolean` | `true` | ✅ Android
✅ iOS |
-| media | Pass a GiphyMedia object to display content. | [`GiphyMedia`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L65-L69) | `None` | ✅ Android
✅ iOS |
-| renditionType | A rendition type for the view. | [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) | `.FixedWidth` | ✅ Android
✅ iOS |
-| resizeMode | Determines how to resize the image when the frame doesn't match the raw image dimensions. | [`ResizeMode`](https://github.com/Giphy/giphy-react-native-sdk/blob/6ff254aa680837dd52d66535d6b5a813930a7235/src/native/types.ts#L117-L122) | `.Cover` | ✅ Android
✅ iOS |
-| showCheckeredBackground | Enable/disable the checkered background for stickers and text media type. | `boolean` | `true` | ✅ Android
❌ iOS |
+| Prop | Description | Type | Default | Platform |
+|-------------------------|-------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------|---------------|---------------------------------|
+| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. | `boolean` | `true` | ✅ Android
✅ iOS |
+| media | Pass a GiphyMedia object to display content. | [`GiphyMedia`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L65-L69) | `None` | ✅ Android
✅ iOS |
+| renditionType | A rendition type for the view. | [`GiphyRendition`](../src/dto/giphyRendition.ts) | `.FixedWidth` | ✅ Android
✅ iOS |
+| resizeMode | Determines how to resize the image when the frame doesn't match the raw image dimensions. | [`ResizeMode`](../src/dto/misc.ts) | `.Cover` | ✅ Android
✅ iOS |
+| showCheckeredBackground | Enable/disable the checkered background for stickers and text media type. | `boolean` | `true` | ✅ Android
❌ iOS |
#### Methods (Imperative API)
@@ -525,19 +526,20 @@ Customizable implementation of a Giphy Grid only.
#### Props
-| Prop | Description | Type | Default | Platform |
-|---------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------|---------------------------------|
-| cellPadding | Spacing between rendered GIFs. | `number`
Note: On iOS, only values between 0 and 11 inclusive are supported. | `0` | ✅ Android
✅ iOS |
-| clipsPreviewRenditionType | Certain renditions (cases of the [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) enum) are not available for Clips. As a result, if you set the renditionType property of the [GiphyGridView](#giphygridview) to an unsupported rendition type, clips previews may not play back correctly in the grid. To account for this limitation, we created this property specifically to work with clips. | [`GiphyClipsRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/49b4ac5adc488133a6e84e06717f952a00d6fa3d/src/native/types.ts#L69-L83) | `.FixedWidth` | ✅ Android
✅ iOS |
-| content | A `GiphyContentRequest` object describing a content request to the Giphy API. | [`GiphyContentRequest`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L84-L88) | `None` | ✅ Android
✅ iOS |
-| fixedSizeCells | Display content in equally sized cells (for stickers only). | `boolean` | `false` | ✅ Android
✅ iOS |
-| onContentUpdate | A callback function that will be called when a content is updated. | `(e: NativeSyntheticEvent<{ resultCount: number }>) => void` | `None` | ✅ Android
✅ iOS |
-| onMediaSelect | A callback function that will be called when a media is selected. | `(e: NativeSyntheticEvent<{ media: GiphyMedia }>) => void` | `None` | ✅ Android
✅ iOS |
-| onScroll | A callback function that will be called when a grid is being scrolled. | `(e: NativeSyntheticEvent<{ offset: number }>) => void` | `None` | ✅ Android
✅ iOS |
-| orientation | Tells the scroll direction of the grid. (e.g. `GiphyDirection.Horizontal`, `GiphyDirection.Vertical`) | [`GiphyDirection`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L71-L74) | `.Vertical` | ✅ Android
✅ iOS |
-| renditionType | A rendition type for the grid. | [`GiphyRendition`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L31-L51) | `.FixedWidth` | ✅ Android
✅ iOS |
-| spanCount | Number of lanes in the grid. | `number` | Depends on orientation and content type | ✅ Android
✅ iOS |
-| showCheckeredBackground | Show/Hide checkered background for stickers in the grid. | `boolean` | `false` | ✅ Android
❌ iOS |
+| Prop | Description | Type | Default | Platform |
+|---------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|-----------------------------------------|---------------------------------|
+| cellPadding | Spacing between rendered GIFs. | `number`
Note: On iOS, only values between 0 and 11 inclusive are supported. | `0` | ✅ Android
✅ iOS |
+| clipsPreviewRenditionType | Certain renditions (cases of the [`GiphyRendition`](../src/dto/giphyRendition.ts) enum) are not available for Clips. As a result, if you set the renditionType property of the [GiphyGridView](#giphygridview) to an unsupported rendition type, clips previews may not play back correctly in the grid. To account for this limitation, we created this property specifically to work with clips. | [`GiphyClipsRendition`](../src/dto/giphyRendition.ts) | `.FixedWidth` | ✅ Android
✅ iOS |
+| content | A `GiphyContentRequest` object describing a content request to the Giphy API. | [`GiphyContentRequest`](../src/dto/giphyContentRequest.ts) | `None` | ✅ Android
✅ iOS |
+| fixedSizeCells | Display content in equally sized cells (for stickers only). | `boolean` | `false` | ✅ Android
✅ iOS |
+| onContentUpdate | A callback function that will be called when a content is updated. | `(e: NativeSyntheticEvent<{ resultCount: number }>) => void` | `None` | ✅ Android
✅ iOS |
+| onMediaSelect | A callback function that will be called when a media is selected. | `(e: NativeSyntheticEvent<{ media: GiphyMedia }>) => void` | `None` | ✅ Android
✅ iOS |
+| onScroll | A callback function that will be called when a grid is being scrolled. | `(e: NativeSyntheticEvent<{ offset: number }>) => void` | `None` | ✅ Android
✅ iOS |
+| orientation | Tells the scroll direction of the grid. (e.g. `GiphyDirection.Horizontal`, `GiphyDirection.Vertical`) | [`GiphyDirection`](../src/dto/misc.ts) | `.Vertical` | ✅ Android
✅ iOS |
+| renditionType | A rendition type for the grid. | [`GiphyRendition`](../src/dto/giphyRendition.ts) | `.FixedWidth` | ✅ Android
✅ iOS |
+| spanCount | Number of lanes in the grid. | `number` | Depends on orientation and content type | ✅ Android
✅ iOS |
+| showCheckeredBackground | Show/Hide checkered background for stickers in the grid. | `boolean` | `false` | ✅ Android
❌ iOS |
+| theme | Adjust the GiphyGridView theme | [`GiphyTheme`](#giphytheme) | `.Light` | ✅ Android
✅ iOS |
#### Example
@@ -601,69 +603,69 @@ Provides methods to describe a content request to the Giphy API.
#### Options
-| Option | Description | Type | Default | Platform |
-|-------------|----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| mediaType | A media type that should be loaded (e.g. `GiphyMediaType.Gif`) | [`GiphyMediaType`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L15-L20) | `.Gif` | ✅ Android
✅ iOS |
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
-| searchQuery | A custom search input (e.g. cats) | `string` | `None` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|-------------|----------------------------------------------------------------|--------------------------------------------------|---------|---------------------------------|
+| mediaType | A media type that should be loaded (e.g. `GiphyMediaType.Gif`) | [`GiphyMediaType`](../src/dto/giphyMediaType.ts) | `.Gif` | ✅ Android
✅ iOS |
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
+| searchQuery | A custom search input (e.g. cats) | `string` | `None` | ✅ Android
✅ iOS |
### trending: `(options: GiphyContentTrendingOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|-----------|----------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| mediaType | A media type that should be loaded (e.g. `GiphyMediaType.Gif`) | [`GiphyMediaType`](https://github.com/Giphy/giphy-react-native-sdk/blob/4b0f2d614abb9a7116bdc530e7a39bf52d5424e2/src/native/types.ts#L15-L20) | `.Gif` | ✅ Android
✅ iOS |
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|-----------|----------------------------------------------------------------|--------------------------------------------------|---------|---------------------------------|
+| mediaType | A media type that should be loaded (e.g. `GiphyMediaType.Gif`) | [`GiphyMediaType`](../src/dto/giphyMediaType.ts) | `.Gif` | ✅ Android
✅ iOS |
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### trendingGifs: `(options?: GiphyContentTrendingGIFsOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|--------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|--------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### trendingStickers: `(options?: GiphyContentTrendingStickersOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|--------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|--------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### trendingText: `(options?: GiphyContentTrendingTextOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|--------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|--------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### recents: `(options?: GiphyContentRecentsOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|--------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|--------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### emoji: `(options?: GiphyContentEmojiOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|--------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|--------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
### animate: `(options: GiphyContentAnimateOptions) => GiphyContentRequest`
#### Options
-| Option | Description | Type | Default | Platform |
-|-------------|-------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|---------|---------------------------------|
-| rating | Filter query results by specific content rating | [`GiphyRating`](https://github.com/Giphy/giphy-react-native-sdk/blob/5c4586c09acc6ebbc760feecede4b740f55e4d9a/src/native/types.ts#L22-L29) | `.PG13` | ✅ Android
✅ iOS |
-| searchQuery | A custom search input (e.g. cats) | `string` | `None` | ✅ Android
✅ iOS |
+| Option | Description | Type | Default | Platform |
+|-------------|-------------------------------------------------|--------------------------------------------|---------|---------------------------------|
+| rating | Filter query results by specific content rating | [`GiphyRating`](../src/dto/giphyRating.ts) | `.PG13` | ✅ Android
✅ iOS |
+| searchQuery | A custom search input (e.g. cats) | `string` | `None` | ✅ Android
✅ iOS |
[Learn more](./animated.md)
@@ -692,3 +694,100 @@ export default function App() {
)
}
```
+
+## GiphyTheme
+
+The GIPHY SDK offers three pre-defined themes presets:
+
+- Automatic
+- Dark
+- Light
+
+#### Example
+
+```typescript jsx
+import React from 'react'
+import { GiphyDialog, GiphyGridView, GiphySDK, GiphyThemePreset } from '@giphy/react-native-sdk'
+
+// Configure API keys
+GiphySDK.configure({ apiKey: '*************' })
+
+// Adjust GiphyDialog theme
+GiphyDialog.configure({ theme: GiphyThemePreset.Dark })
+
+// Adjust GiphyGridView theme
+function DarkGridView() {
+ return
+}
+
+```
+
+To achieve more extensive customization, you can extend any preset and override specific settings according to your
+requirements. The theme schemas can be found at the following links:
+
+- [iOS Theme Schema](./assets/ios-theme-scheme.pdf)
+- [Android Theme Schema](./assets/android-theme-scheme.pdf)
+
+#### Example
+
+```typescript jsx
+import React from 'react'
+import { GiphyDialog, GiphyGridView, GiphySDK, GiphyTheme, GiphyThemePreset } from '@giphy/react-native-sdk'
+
+const theme: GiphyTheme = {
+ preset: GiphyThemePreset.Light,
+ backgroundColor: '#373d48',
+ cellCornerRadius: 12,
+ defaultTextColor: '#B0BEC5',
+}
+
+// Configure API keys
+GiphySDK.configure({ apiKey: '*************' })
+
+// Adjust GiphyDialog theme
+GiphyDialog.configure({ theme })
+
+// Adjust GiphyGridView theme
+function CustomGridView() {
+ return
+}
+```
+
+#### Theme Options
+
+| Option | Type | Platform |
+|-----------------------------------|------------------------------------------------------|---------------------------------|
+| avatarPlaceholderColor | `string \| number` | ❌ Android
✅ iOS |
+| backgroundColor | `string \| number` | ✅ Android
✅ iOS |
+| backgroundColorForLoadingCells | `string \| number` | ❌ Android
✅ iOS |
+| cellCornerRadius | `number` | ❌ Android
✅ iOS |
+| confirmationBackButtonColor | `string \| number` | ✅ Android
✅ iOS |
+| confirmationSelectButtonColor | `string \| number` | ✅ Android
✅ iOS |
+| confirmationSelectButtonTextColor | `string \| number` | ✅ Android
✅ iOS |
+| confirmationViewOnGiphyColor | `string \| number` | ✅ Android
✅ iOS |
+| defaultTextColor | `string \| number` | ✅ Android
✅ iOS |
+| dialogOverlayBackgroundColor | `string \| number` | ✅ Android
❌ iOS |
+| emojiDrawerGradientBottomColor | `string \| number` | ✅ Android
✅ iOS |
+| emojiDrawerGradientTopColor | `string \| number` | ✅ Android
✅ iOS |
+| emojiDrawerScrollIndicatorStyle | [`IndicatorStyle`](../src/dto/misc.ts) | ❌ Android
✅ iOS |
+| emojiDrawerSeparatorColor | `string \| number` | ✅ Android
✅ iOS |
+| fixedSizeCells | `boolean` | ❌ Android
✅ iOS |
+| handleBarColor | `string \| number` | ✅ Android
✅ iOS |
+| keyboardAppearance | [`KeyboardAppearance`](../src/dto/misc.ts) | ❌ Android
✅ iOS |
+| preset | [`GiphyThemePreset`](../src/dto/giphyThemePreset.ts) | ✅ Android
✅ iOS |
+| retryButtonBackgroundColor | `string \| number` | ✅ Android
❌ iOS |
+| retryButtonTextColor | `string \| number` | ✅ Android
❌ iOS |
+| searchBackButtonColor | `string \| number` | ✅ Android
✅ iOS |
+| searchBarBackgroundColor | `string \| number` | ✅ Android
✅ iOS |
+| searchBarCornerRadius | `number` | ❌ Android
✅ iOS |
+| searchBarPadding | `number` | ❌ Android
✅ iOS |
+| searchPlaceholderTextColor | `string \| number` | ✅ Android
✅ iOS |
+| searchTextColor | `string \| number` | ✅ Android
✅ iOS |
+| showSuggestionsBar | `boolean` | ❌ Android
✅ iOS |
+| stickerBackgroundColor | `string \| number` | ❌ Android
✅ iOS |
+| suggestionCellBackgroundColor | `string \| number` | ✅ Android
✅ iOS |
+| suggestionCellTextColor | `string \| number` | ✅ Android
✅ iOS |
+| tabBarBackgroundAlpha | `number` | ❌ Android
✅ iOS |
+| tabBarSwitchDefaultColor | `string \| number` | ✅ Android
✅ iOS |
+| tabBarSwitchSelectedColor | `string \| number` | ✅ Android
✅ iOS |
+| usernameColor | `string \| number` | ✅ Android
✅ iOS |
diff --git a/docs/assets/android-theme-scheme.pdf b/docs/assets/android-theme-scheme.pdf
new file mode 100644
index 0000000..2cd4adf
Binary files /dev/null and b/docs/assets/android-theme-scheme.pdf differ
diff --git a/docs/assets/ios-theme-scheme.pdf b/docs/assets/ios-theme-scheme.pdf
new file mode 100644
index 0000000..9ec8d72
Binary files /dev/null and b/docs/assets/ios-theme-scheme.pdf differ