Add 'save-pattern' to docs (react-navigation#2806)

Jacse · spencercarli · commit 4df002daab69 · 2017-10-24T20:19:58.000-05:00
* Add save-pattern to docs, react-navigation#145 * Sync style * Language clarity * Typo
diff --git a/docs/guides/Guide-Headers.md b/docs/guides/Guide-Headers.md
@@ -58,15 +58,15 @@ The navigation options can be defined with a [navigation prop](/docs/navigators/
 
 ```js
 static navigationOptions = ({ navigation }) => {
-  const {state, setParams} = navigation;
+  const { state, setParams } = navigation;
   const isInfo = state.params.mode === 'info';
-  const {user} = state.params;
+  const { user } = state.params;
   return {
     title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
     headerRight: (
       <Button
         title={isInfo ? 'Done' : `${user}'s info`}
-        onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
+        onPress={() => setParams({ mode: isInfo ? 'none' : 'info' })}
       />
     ),
   };
@@ -79,4 +79,60 @@ Now, the header can interact with the screen route/state:
 header-interaction
 ```
 
+### Header interaction with screen component
+
+Sometimes it is necessary for the header to access properties of the screen component such as functions or state.
+
+Let's say we want to create an 'edit contact info' screen with a save button in the header. We want the save button to be replaced by an `ActivityIndicator` while saving.
+
+```js
+class EditInfoScreen extends React.Component {
+  static navigationOptions = ({ navigation }) => {
+    const { params = {} } = navigation.state;
+    let headerRight = (
+      <Button
+        title="Save"
+        onPress={params.handleSave ? params.handleSave : () => null}
+      />
+    );
+    if (params.isSaving) {
+      headerRight = <ActivityIndicator />;
+    }
+    return { headerRight };
+  };
+
+  state = {
+    nickname: 'Lucy jacuzzi'
+  }
+
+  _handleSave = () => {
+    // Update state, show ActivityIndicator
+    this.props.navigation.setParams({ isSaving: true });
+    
+    // Fictional function to save information in a store somewhere
+    saveInfo().then(() => {
+      this.props.navigation.setParams({ isSaving: false});
+    })
+  }
+
+  componentDidMount() {
+    // We can only set the function after the component has been initialized
+    this.props.navigation.setParams({ handleSave: this._handleSave });
+  }
+
+  render() {
+    return (
+      <TextInput
+        onChangeText={(nickname) => this.setState({ nickname })}
+        placeholder={'Nickname'}
+        value={this.state.nickname}
+      />
+    );
+  }
+}
+```
+
+**Note**: Since the `handleSave`-param is only set on component mount it is not immidiately available in the `navigationOptions`-function. Before `handleSave` is set we pass down an empty function to the `Button`-component in order to make it render immidiately and avoid flickering.
+
+
 To see the rest of the header options, see the [navigation options document](/docs/navigators/navigation-options#Stack-Navigation-Options).
