How can I switch firebase configuration using toggle in react native - firebase

Question

I am using reactnative, redux and firebase.
Now i want to config two diff firebase env one is development and other one is production.
I implemented a toggle to switch the firebase diff account.
i put firebase config file in ./App.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import firebase from 'firebase';
import store from './src/config/store';
import AppNavigation from './src/navigation';
class App extends Component {
componentWillMount() {
firebase.initializeApp({
apiKey: 'AIzaSyAandJABqieT3fXk2palvAgbYz5B8y9EsM',
authDomain: 'practiciaappsubu.firebaseapp.com',
databaseURL: 'https://practiciaappsubu.firebaseio.com',
projectId: 'practiciaappsubu',
storageBucket: 'practiciaappsubu.appspot.com',
messagingSenderId: '753143230840'
});
firebase.auth().onAuthStateChanged((user) => {
if (user) {
console.log('logged In');
} else {
console.log('not looged in');
}
});
}
render() {
return (
<Provider store={store}>
<AppNavigation />
</Provider>
);
}
}
export default App;
The toggle is there is Home component. So, after change the toggle from Home componet, how can i get the toggle status in ./App.js file?
The Home.js (component)
import React, { Component } from 'react';
import {
Text,
View,
Image,
ScrollView,
Switch
} from 'react-native';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation';
import { Button, Section } from './helpers';
import { userType } from '../config/MasterData';
import { firebaseEnvAction } from '../actions/HomeAction';
class Home extends Component {
static navigationOptions = {
title: '.: Practicia :.'
};
onPressSignupAs(userInfo) {
// Navigate to sign up page with the user information
console.log(userInfo);
}
onPressLogin() {
// Navigate to login page
const navigateToLogin = NavigationActions.navigate({
routeName: 'login',
params: {}
});
this.props.navigation.dispatch(navigateToLogin);
}
firebaseEnv(val) {
this.props.firebaseEnvAction(val);
}
render() {
return (
<ScrollView contentContainerStyle={styles.contentContainer}>
<View style={styles.container}>
<View style={styles.logoContainer}>
<Image
style={styles.logo}
source={require('../assets/images/logo.png')}
/>
</View>
<View style={styles.contentArea}>
<Text style={styles.signInAs}>Sign Up As...</Text>
<Section>
<Button
onPress={this.onPressSignupAs.bind(this, userType.teacher)}
>
{userType.teacher.showText}
</Button>
</Section>
<Section>
<Button
onPress={this.onPressSignupAs.bind(this, userType.parent)}
>{userType.parent.showText}</Button>
</Section>
<Section>
<Button
onPress={this.onPressSignupAs.bind(this, userType.student)}
>
{userType.student.showText}
</Button>
</Section>
</View>
<View style={styles.LoginBox}>
<Text style={styles.LoginText}>Already have an account? </Text>
<Section>
<Button
style={styles.buttonLogin}
styleText={styles.buttonText}
onPress={this.onPressLogin.bind(this)}
>
Login
</Button>
</Section>
<Section>
<Text style={styles.firebaseText}>Firebase:
<Switch
value={this.props.HomeReducer.firebaseToggle}
onValueChange={(val) => this.firebaseEnv(val)}
disabled={false}
activeText={'Prod'}
inActiveText={'Dev'}
circleSize={30}
barHeight={1}
circleBorderWidth={3}
backgroundActive={'green'}
backgroundInactive={'gray'}
circleActiveColor={'#30a566'}
circleInActiveColor={'#000000'}
/>
</Text>
</Section>
</View>
</View>
</ScrollView>
);
}
}
const styles = {
firebaseText: {
fontSize: 20
},
contentContainer: {
flex: 1
},
container: {
backgroundColor: '#FFFFFF',
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#9DDAEE',
flex: 1,
padding: 10,
justifyContent: 'center',
},
userType: {
fontSize: 23,
fontWeight: 'bold',
backgroundColor: '#3BAFDA',
margin: 10,
padding: 10,
textAlign: 'center',
color: '#fff',
},
contentArea: {
marginLeft: 40,
marginRight: 40,
marginBottom: 20,
},
logoContainer: {
justifyContent: 'center',
alignItems: 'center',
marginTop: 10,
marginBottom: 40,
},
logo: {
width: 250,
height: 75,
},
signInAs: {
fontSize: 20,
textAlign: 'center',
marginBottom: 10,
},
LoginBox: {
marginTop: 20,
marginLeft: 40,
marginRight: 40,
},
LoginText: {
fontSize: 15,
textAlign: 'center',
marginBottom: 10,
},
buttonLogin: {
backgroundColor: '#C4C4C4',
},
buttonText: {
color: '#000000',
}
};
const mapStateToProps = (state) => {
return state;
};
const mapDispatchToProps = {
firebaseEnvAction
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);

Answer 1

You'll want to dispatch an action when the switch is toggled that tears down your firebase instance (firebase.initializeApp({...});) and initializes a new firebase app with the credentials you want. This means you'll probably want to dispatch a new initilizeFirebase action in your App.js componentWillMount function. Then your Home.js should pull the configured firebase instance from the store. This also means you'll probably want to keep your firebase instance in the store as well.