Best pattern for a 'Save' button in the header

[despreston]

Often times if you are editing or creating something, one of the header buttons will be 'Save'. I don't see how this is feasible with this library since there is no access to the state or props of the current screen component. The only (ugly) solution would be to keep the data to be saved outside of the component. Anyone have any suggestions how this pattern can be achieved with this library?

[despreston]

On a somewhat related note, Ive seen references to a Slack channel. That would be a better place for this discussion but I'm unsure of how to get access to that channel.

[dmhood]

There is some discussion on the reactiflux discord server (https://www.reactiflux.com/), specifically in the rn-navigation channel, although I don't think its specifically for this library.

[chuckhacker]

Related: #149

[Schniz]

the only solution I can think of is using setParams to set the callback/state in the controller and using state.params in the header

[despreston]

Thanks @Schniz . Thats the pattern I was thinking as well and the path that I ultimately took. Unfortunately I ran into what appears to be a bug related to calling setParams. Ive opened a separate issue for that bug. All in all, this pattern seems a bit hazy and not entirely 'safe' unless you explicitly check for the existence of all state.params.

[Schniz]

Yeah. I think that state.params should default to an empty object.

[Schniz]

However, I really dig using ramda's pathOr for these kind of problems.

import { pathOr } from 'ramda';
const noop = () => {};
// ...
const somethingToDoFn = pathOr(noop, ['params', 'somethingToDoFn'], navigator);
somethingToDoFn('data', 'to', 'pass');

[dmhood]

Isn't the proper way to do this:

componentDidMount () {
    const isDisabled = <someLogicUsingLocalState>;
    const params = {
            right: (
                <Button
                    onPress={() =>!isDisabled ? this.onSave() : null}
                >
                    <Text style={[styles.rightButtonTextStyle, isDisabled ? styles.disabledStyle : null]}>
                        Save
                    </Text>
                </Button>
            ),
        };
    this.props.navigation.setParams(params);
 }

However, #160 is preventing this from working well.

[dmhood]

Thought I would post my main navigation options too for completness sake:

function getCurrentParams (state) {
    if (state.routes) {
        return getCurrentParams(state.routes[state.index]);
    }
    return state.params || {};
}

...some setup...

// main stack navigator navigationOptions
navigationOptions: {
    header: ({state}) => {
        // get the "deepest" current params.
        const currentParams = getCurrentParams(state);

        const left = currentParams.left;
        const right = currentParams.right;
        const style = currentParams.style;
        const tintColor = currentParams.tintColor;
        return { left, right, style, tintColor };
    }
 }

This feels kinda hacky to me, but I don't see another way to set dynamic header properties other than the use of setParams (and again, #160 makes this a poor solution at the moment).

[grabbou]

Given that #160 is already fixed, do you think @dmhood your solution can become more standardised? Do you think it deserves a doc How to just for the sake of avoiding these questions in the future?

[dmhood]

If people find that useful then I'll make a pr here in the next couple of days, and we can standardize/critique it there.

[prodz18]

@dmhood solution works great. I was looking to show a modal view when pressing one of the header buttons (left or right). Thanks!