Call setstate inside NavigationOptions React native - reactjs

Question

I'm trying to change value of state inside navigationOptions.
my navigation options
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
// alert(params.searchText);
return {
headerLeft: (params.searchText) ? <View
style={{
flexDirection:
'row', justifyContent: 'center'
}}>
<TouchableOpacity
onPress={()=> {
// navigation.navigate('home');
alert('Coming soon ');
}}>
<Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
source={require('../assets/header_icons/three_logo.png')}
/>
</TouchableOpacity>
</View> :
<View style={{
flexDirection:
'row', justifyContent:
'center'
}}>
<TouchableOpacity
onPress={()=> {
this.setState({
loadUrl: "card.html#!/customer-dashboard?userType=Authenticated",
showWeb:true,
});
}}>
<Image style={{ marginLeft: 20, height: 20, width: 20, resizeMode: "contain" }}
source={require('../assets/header_icons/icon_arrow_left.png')}
/>
</TouchableOpacity>
</View>,
}
}
It's throwing this.setState is not an function
Please let me know how to achieve this. How can we change value of state from static navigationOptions

Answer 1

You can use redux store.
store.js
import ReduxThunk from "redux-thunk";
import { createStore, combineReducers, applyMiddleware } from "redux";
import authReducer from "./reducers/auth";
import dashboardReducer from "./reducers/dashboard";
import profileReducer from "./reducers/profile";
const rootReducer = combineReducers({
auth: authReducer,
dashboard: dashboardReducer,
profile: profileReducer
});
export default createStore(rootReducer, applyMiddleware(ReduxThunk));
Dashboard.js
import React, { Component } from "react";
import {
View,
Text,
Image,
StyleSheet,
Dimensions,
TouchableOpacity,
ScrollView,
ActivityIndicator
} from "react-native";
import OrientationScreen from "./OrientationScreen";
import { connect, useDispatch } from "react-redux";
import store from "../store/store";
class Dashboard extends Component {
render() {
const dashboard = this.props;
if (dashboard.orientation) {
return <OrientationScreen />;
} else {
return (
<View style={styles.screen}>
{this.props.dashboard.loading && (
<View style={styles.loading}>
<ActivityIndicator color={Colors.blueButton} size="large" />
</View>
)}
<Text>You are logged in</Text>
</View>
);
}
}
_openOrientation() {
store.dispatch(dashboardActions.openOrientation());
}
static navigationOptions = ({ navigation, navigationOptions }) => {
const params = navigation.state.params || {};
return {
headerTitle: "Dashboard",
headerRight: (
<HeaderButtons HeaderButtonComponent={HeaderButton}>
<Item
Title="Orientation"
iconName="ios-help-circle-outline"
iconSize={30}
onPress={params.openOrientation}
/>
<Item
Title="Menu"
iconName="ios-menu"
iconSize={30}
onPress={() => navigation.toggleDrawer()}
/>
</HeaderButtons>
)
};
}
}
const mapStateToProps = state => {
const { auth, dashboard } = state;
return { auth, dashboard };
};
export default connect(mapStateToProps)(Dashboard);
actions/dashboard.js
const openOrientation = () => {
return dispatch => {
return dispatch({
type: "OPEN_ORIENTATION"
});
};
};
export default {
openOrientation
};
reducers/dashboard.js
const initialState = {
loading: false,
error: null,
orientation: false,
UserData: null
};
export default (state = initialState, action) => {
switch (action.type) {
case "OPEN_ORIENTATION":
return {
...state,
orientation: true
};
case "CLOSE_ORIENTATION":
return {
...state,
orientation: false
};
case "LOADING":
return {
...state,
error: null,
loading: true
};
default:
return state;
}
};
SwiperFlatList.js
import React, { PureComponent } from "react";
import { Text, Dimensions, Image, StyleSheet, View } from "react-native";
import SwiperFlatList from "react-native-swiper-flatlist";
export default class OrientationScreen extends PureComponent {
constructor(props) {
super(props);
this.state = {
images: [
require("../assets/images/SLIDE-1.jpg"),
require("../assets/images/SLIDE-2.jpg"),
require("../assets/images/SLIDE-3.jpg"),
require("../assets/images/SLIDE-4.jpg"),
require("../assets/images/SLIDE-5.jpg"),
require("../assets/images/SLIDE-6.jpg"),
require("../assets/images/SLIDE-7.jpg"),
require("../assets/images/SLIDE-8.jpg"),
require("../assets/images/SLIDE-9.jpg"),
require("../assets/images/SLIDE-10.jpg"),
require("../assets/images/SLIDE-11.jpg"),
require("../assets/images/SLIDE-12.jpg"),
require("../assets/images/SLIDE-13.jpg"),
require("../assets/images/SLIDE-14.jpg"),
require("../assets/images/SLIDE-15.jpg"),
require("../assets/images/SLIDE-16.jpg"),
require("../assets/images/SLIDE-17.jpg"),
require("../assets/images/SLIDE-18.jpg"),
require("../assets/images/SLIDE-19.jpg"),
require("../assets/images/SLIDE-20.jpg"),
require("../assets/images/SLIDE-21.jpg"),
require("../assets/images/SLIDE-22.jpg"),
require("../assets/images/SLIDE-23.jpg"),
require("../assets/images/SLIDE-24.jpg"),
require("../assets/images/SLIDE-25.jpg"),
require("../assets/images/SLIDE-26.jpg"),
require("../assets/images/SLIDE-27.jpg"),
require("../assets/images/SLIDE-28.jpg"),
require("../assets/images/SLIDE-29.jpg"),
require("../assets/images/SLIDE-30.jpg"),
require("../assets/images/SLIDE-31.jpg"),
require("../assets/images/SLIDE-32.jpg")
]
};
}
render() {
const orientationBody = this.state.images.map((item, i) => {
return (
<View key={i} style={styles.child}>
<Image
source={item}
resizeMode="contain"
style={styles.imageprofile}
/>
</View>
);
});
return (
<View style={styles.container}>
<SwiperFlatList
index={0}
removeClippedSubviews={false}
showPagination={false}
>
{orientationBody}
</SwiperFlatList>
</View>
);
}
}
export const { width, height } = Dimensions.get("window");
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white"
},
child: {
height: height * 0.8,
width,
justifyContent: "center"
},
text: {
fontSize: width * 0.5,
textAlign: "center"
},
imageprofile: {
width: "100%"
}
});