# new PhotosScreenApi()

Example

externalCodeSetup.photosScreenApi.METHOD_NAME

# setFetchParamsFilter(fetchParamsFilter)

Parameters:

Example

Create a custom filter in photos screen

//In custom_code/PhotosFiltersCustom.js ...

import React, { useState } from "react";
import { TextInput, View, Button, Text, Switch } from 'react-native'
import { useDispatch } from "react-redux";
import { globalPhotosRequested } from "@src/actions/globalPhotos";
import { getExternalCodeSetup } from "@src/externalCode/externalRepo";
import withGlobalStyles from "@src/components/hocs/withGlobalStyles";

const hook = getExternalCodeSetup().photosScreenApi;

const screenName = "photos";

getExternalCodeSetup().indexScreenApiHooks.setHeaderHeight((defaultHeaderHeight, filterType, navigation) => {

    if (filterType === screenName)
        return 300;

    return defaultHeaderHeight;
});

const filter = "all"; //"all", "personal", "groups"
const subfilters = { type: "alphabetical" }; // "alphabetical", "recent", "my-progress"

const refresh = true; //Set to true to refresh list
const searchTerm = ""

const PhotosFiltersCustom = (props) => {

    const { navigation, route, colors } = props;

    const dispatch = useDispatch();

    //If showing the matched screen, show custom filter before displaying list component
    if (route?.params?.item?.object === screenName) {

        const [albumId, setAlbumId] = useState(false);

        const handleSubmit = () => {

            //Set custom parameters before fetching
            getExternalCodeSetup().photosScreenApi.setFetchParamsFilter((props) => {

                //You can add more parameters such as "subject", "keyword" etc...
                return {
                    ...props,
                    album_id: albumId
                }
            })

            //Dispatch redux action to call api using customized filters
            dispatch(globalPhotosRequested(filter, subfilters, refresh, searchTerm));

        }

        return <View style={{ backgroundColor: colors.whiteColor, alignItems: "center", justifyContent: "center" }}>

            <TextInput
                style={{paddingHorizontal: 20, marginTop: 10, fontSize: 20}}
                autoFocus
                value={albumId}
                onChangeText={albumId => setAlbumId(albumId)}
                placeholder="Album ID..."
            />
            <Button
                onPress={() => handleSubmit()}
                title="Filter"
            />
        </View>
    }

    return null;

}

export default withGlobalStyles(PhotosFiltersCustom);

// In custom_code/index.js ...

import PhotosFiltersCustom from "./components/PhotosFiltersCustom";
export const applyCustomCode = externalCodeSetup => {
   externalCodeSetup.filterScreenApiHooks.setAfterFilterComponent(PhotosFiltersCustom);
}