feat(iOS:GiphyDialog): Add selectedContentType property

re #99

docs/api.md

@@ -53,15 +53,15 @@ Configure the `GiphyDialog` view and behavior.
 
 #### Options
 
-| Option                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Type                                                                                                                                                    | Default                                                                                 | Platform                          |
-| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------- |
+| 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`                                                                           | ✅&nbsp;Android <br/> ✅&nbsp;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`                                                                             | ✅&nbsp;Android <br/> ❌&nbsp;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`                                                                                  | ✅&nbsp;Android <br/> ✅&nbsp;iOS |
 | mediaTypeConfig           | Type(s) of content to be displayed in the dialog. <br/> `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) \[\]     | <details><summary>Expand</summary>`[.Recents, .Gif, .Sticker, .Emoji, .Text]`</details> | ✅&nbsp;Android <br/> ✅&nbsp;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`                                                                                 | ✅&nbsp;Android <br/> ✅&nbsp;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`                                                                           | ✅&nbsp;Android <br/> ✅&nbsp;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`                                                                                  | ✅&nbsp;Android <br/> ❌&nbsp;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`                                                                                  | ✅&nbsp;Android <br/> ✅&nbsp;iOS |
 | shouldLocalizeSearch      | Option to choose whether or not to localize the search results based on phone settings.                                                                                                                                                                                                                                                                                                                                                                                                     | `boolean`                                                                                                                                               | `false`                                                                                 | ❌&nbsp;Android <br/> ✅&nbsp;iOS |
 | showCheckeredBackground   | Enable/disable the checkered background for stickers and text media type.                                                                                                                                                                                                                                                                                                                                                                                                                   | `boolean`                                                                                                                                               | `false`                                                                                 | ✅&nbsp;Android <br/> ❌&nbsp;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`                                                                                 | ✅&nbsp;Android <br/> ✅&nbsp;iOS |

e2e/GiphyDialogSettings.e2e.ts

@@ -83,6 +83,13 @@ function getGPHDialogConfirmationButton() {
   return element(by.type('androidx.appcompat.widget.AppCompatButton'))
 }
 
+function getGPHTabBar() {
+  if (device.getPlatform() === 'ios') {
+    return element(by.type('GiphyUISDK.GPHTabBar'))
+  }
+  return element(by.type('com.giphy.sdk.ui.views.GPHMediaTypeView'))
+}
+
 describe('Giphy Dialog Settings', () => {
   beforeEach(async () => {
     await device.launchApp()
@@ -146,6 +153,27 @@ describe('Giphy Dialog Settings', () => {
     }
   })
 
+  test('Selected Content Type', async () => {
+    const cardId = 'gph-settings_selected-content-type'
+    const variants = Object.keys(GiphyContentType)
+
+    for (const contentType of variants) {
+      // Update settings
+      await showGPHDialogSettings()
+      await toggleSwitches(Object.values(GiphyContentType), Object.values(GiphyContentType))
+      await setCardPickerValue(cardId, contentType)
+      await hideGPHDialogSettings()
+
+      // Show GPH Dialog
+      await showGPHDialog()
+      await expectToMatchImageSnapshot(getGPHTabBar().takeScreenshot(`dialog-tab-bar-${contentType}`))
+
+      // Reload App
+      await device.terminateApp()
+      await device.launchApp()
+    }
+  })
+
   test('Confirmation Screen', async () => {
     const cardId = 'gph-settings_confirmation-screen'
 

example/src/Settings/GiphyDialogSettings.tsx

@@ -154,7 +154,7 @@ export const GiphyDialogSettings: React.FC<GiphyDialogSettingsProps> = (props) =
         onValueChange={(confirmationRenditionType) => updateSettings({ confirmationRenditionType })}
       />
       <PickerSelectCard
-        title="Selected Content Type (*Android)"
+        title="Selected Content Type"
         testID="gph-settings_selected-content-type"
         items={enumToPickerItems(GiphyContentType)}
         value={settings.selectedContentType}

ios/RNGiphyDialog.swift

@@ -8,90 +8,95 @@ struct RNGiphyDialogEvents {
 public extension GiphyViewController {
   func applyRNConfig(_ options: NSDictionary) -> Void {
     if let rawMediaTypeConfig = options["mediaTypeConfig"] as? [String] {
-      mediaTypeConfig = rawMediaTypeConfig.compactMap {
+      self.mediaTypeConfig = rawMediaTypeConfig.compactMap {
         GPHContentType.fromRNValue(value: $0)
       }
     }
-
+    
     let rawRating = options["rating"] as? String
     if let rating = GPHRatingType.fromRNValue(value: rawRating) {
       self.rating = rating
     }
-
+    
     let rawRenditionType = options["renditionType"] as? String
     if let renditionType = GPHRenditionType.fromRNValue(value: rawRenditionType) {
       self.renditionType = renditionType
     }
-
+    
     let rawClipsPreviewRenditionType = options["clipsPreviewRenditionType"] as? String
     if let clipsPreviewRenditionType = GPHRenditionType.fromRNValue(value: rawClipsPreviewRenditionType) {
       self.clipsPreviewRenditionType = clipsPreviewRenditionType
     }
-
+    
     let showConfirmationScreen = options["showConfirmationScreen"] as? Bool
     if showConfirmationScreen != nil {
       self.showConfirmationScreen = showConfirmationScreen!
     }
-
+    
     let rawStickerColumnCount = options["stickerColumnCount"] as? Int
     if let stickerColumnCount = GPHStickerColumnCount.fromRNValue(value: rawStickerColumnCount) {
       self.stickerColumnCount = stickerColumnCount
     }
-
+    
     let rawTheme = options["theme"] as? String
     if let theme = GPHTheme.fromRNValue(value: rawTheme) {
       self.theme = theme
     }
-
+    
     let shouldLocalizeSearch = options["shouldLocalizeSearch"] as? Bool
     if shouldLocalizeSearch != nil {
       self.shouldLocalizeSearch = shouldLocalizeSearch!
     }
-
+    
     let trayHeightMultiplier = options["trayHeightMultiplier"] as? CGFloat
     if trayHeightMultiplier != nil {
       GiphyViewController.trayHeightMultiplier = trayHeightMultiplier!
     }
+
+    let rawSelectedContentType = options["selectedContentType"] as? String
+    if let selectedContentType = GPHContentType.fromRNValue(value: rawSelectedContentType) {
+      self.selectedContentType = selectedContentType
+    }
   }
 }
 
 @objc(RNGiphyDialog)
 open class RNGiphyDialog: RCTEventEmitter, GiphyDelegate {
   var giphyViewController: GiphyViewController?
   var config: NSMutableDictionary
-
+  
   override init() {
     config = NSMutableDictionary(dictionary: [:])
     super.init()
   }
-
+  
   override public static func requiresMainQueueSetup() -> Bool {
     return true
   }
-
+  
   override public static func moduleName() -> String! {
     return "RNGiphyDialog"
   }
-
+  
   open override func supportedEvents() -> [String]! {
     return [
       RNGiphyDialogEvents.onMediaSelect,
       RNGiphyDialogEvents.onDismiss
     ]
   }
-
+  
   @objc(configure:)
   open func configure(options: NSDictionary) -> Void {
     config.addEntries(from: options as? Dictionary<String, Any> ?? [:])
   }
-
+  
   @objc
   open func show() -> Void {
     DispatchQueue.main.async { [weak self] in
       guard let self = self else {
         return
       }
-
+      
       let giphy = GiphyViewController()
       let rootViewController = UIApplication.shared.windows.first?.rootViewController
       giphy.applyRNConfig(self.config)
@@ -101,32 +106,32 @@ open class RNGiphyDialog: RCTEventEmitter, GiphyDelegate {
       })
     }
   }
-
+  
   @objc
   open func hide() -> Void {
     DispatchQueue.main.async { [weak self] in
       guard let self = self else {
         return
       }
-
+      
       self.giphyViewController?.dismiss(animated: true, completion: { [weak self] in
         self?.giphyViewController = nil
       })
     }
   }
-
+  
   open func didSelectMedia(giphyViewController: GiphyViewController, media: GPHMedia) {
     let rawFileType = config["fileType"] as? String
     var fileType: GPHFileExtension = .gif
     if rawFileType != nil {
       fileType = GPHFileExtension.fromRNValue(value: rawFileType!) ?? .gif
     }
-
+    
     sendEvent(withName: RNGiphyDialogEvents.onMediaSelect, body: [
       "media": media.toRNValue(rendition: self.giphyViewController?.renditionType, fileType: fileType),
     ])
   }
-
+  
   open func didDismiss(controller: GiphyViewController?) {
     sendEvent(withName: RNGiphyDialogEvents.onDismiss, body: nil)
   }

src/native/GiphyDialog.ts

@@ -13,13 +13,14 @@ import type {
 
 export type BaseNativeGiphyDialogConfig = {
   clipsPreviewRenditionType?: GiphyClipsRendition
+  fileType?: GiphyFileExtension
   mediaTypeConfig?: GiphyContentType[]
   rating?: GiphyRating
   renditionType?: GiphyRendition
+  selectedContentType?: GiphyContentType
   showConfirmationScreen?: boolean
   stickerColumnCount?: GiphyStickersColumnCount
   theme?: GiphyThemePreset
-  fileType?: GiphyFileExtension
 }
 
 export type IOSGiphyDialogConfig = BaseNativeGiphyDialogConfig & {
@@ -29,7 +30,6 @@ export type IOSGiphyDialogConfig = BaseNativeGiphyDialogConfig & {
 
 export type AndroidGiphyDialogConfig = BaseNativeGiphyDialogConfig & {
   confirmationRenditionType?: GiphyRendition
-  selectedContentType?: GiphyContentType
   showCheckeredBackground?: boolean
   showSuggestionsBar?: boolean
 }