React Navigation add save button

Question

I am using React Navigation for routing. When the user opens up a Stock Item to modify, I want to add a Save button that gets all modified variables from the redux state and queries them to an API endpoint

Currently I have only been able to add the save button in a very static sense like so:

const Stack = createStackNavigator(
    {
        Home: {
            screen: Tabs,
            navigationOptions: {
                header: null,
            },
        },
        StockScreen: {
            screen: StockScreen,
            navigationOptions: {
                headerRight: (

                    <Button
                      onPress={() => {
                          alert('This is a button!');
                      }}
                      title="Save"
                      color="#fff"
                    />
                  ),
            },
        },
    },
    {
    }
);

And I have my tab navigator:

let StockTabs = createMaterialTopTabNavigator(
    {
        General: {
            screen: GeneralStockTab,
        },
        Pricing:{
            screen: PricingTab,
        },
        Stock:{
            screen: StockTab
        },
        Other:{
            screen: OtherTab,
        },
    },
    {
    }
);

Now this tabbed nav is connected to redux like so:

const mapStateToProps = state => ({
    item: state.stockItem.item,
    itemLoading: state.stockItem.loading,
    itemError: state.stockItem.error,
  });

const mapDispatchToProps = (dispatch) => {
    return ({
        fetchStockItem: bindActionCreators(fetchStockItem, dispatch)
    })
}

  const mergeProps = (state, dispatch, ownProps) => {
    return ({
        ...ownProps,
        screenProps: {
          ...ownProps.screenProps,
          ...state,
          ...dispatch,
        }
    })
  }

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(StockTabs);

I want to be able to have a dynamic boolean to allow the save button to be pressed or not, depending on if values are modified, and when save is pressed I want to run a redux function to update the state and query api.

Here is visually what the app in the tab nav looks like:

Pritish Vaidya · Accepted Answer · 2018-09-17T04:36:47.147

1

If you are already using redux then you can make a connected <Button/> component. The boolean can be passed in a similar way by adding it to the reducer and linking it to mapStateToProps and then to the component.

const Button = ({testDispatch}) => {
  return (
    <Button
      onPress={testDispatch}
      title="Save"
      color="#fff"
    />
  )

function mapDispatchToProps(dispatch) {
  return {
    testDispatch: () => dispatch(testDispatch())
  };
}

const ConnectedButton = connect(
   null,
   mapDispatchToProps,
 )(Button);
}

edited Sep 17 '18 at 04:36

answered Sep 17 '18 at 04:10

Pritish Vaidya

21,561
3
58
76

The button one is in the app.js where I set up redux can I still use it there – Cacoon Sep 17 '18 at 05:03
You can separate it list of components, and use it anywhere required as long as it is bound to store using `react-redux` – Pritish Vaidya Sep 17 '18 at 05:03
https://imgur.com/SiSNoon I get a strange error when implimenting it, do you know how I could fix this? – Cacoon Sep 17 '18 at 22:53
Not sure but try removing the `,` in connect after mapDispatchToProps – Pritish Vaidya Sep 17 '18 at 22:55
Thanks, I think it was that as well as missnaming the component I got it now looks like this: https://imgur.com/7s2HKBj – Cacoon Sep 17 '18 at 22:58
Looks correct, if you want a stateless component, you can add it as my solution. – Pritish Vaidya Sep 17 '18 at 23:10
Stateless? whats the difference between your component and mine? (I legitimately have no idea, new to react and react native) – Cacoon Sep 17 '18 at 23:28
Stateless component need not depend upon component state if it is not required. Check the following [example](https://stackoverflow.com/a/34513984/6606831) – Pritish Vaidya Sep 18 '18 at 05:54
https://stackoverflow.com/questions/52379564/get-string-result-from-function-react-native am i using the wrong type of component? – Cacoon Sep 18 '18 at 06:15

React Navigation add save button

1 Answers1