add reducer main, main actions, Tabs in MainScreen ...

package.json

@@ -23,6 +23,7 @@
     "firebase": "^4.10.0",
     "react": "16.0.0",
     "react-native": "0.50.3",
+    "react-native-tab-navigator": "^0.3.4",
     "react-navigation": "^1.0.3",
     "react-navigation-redux-helpers": "^1.0.1",
     "redux-thunk": "^2.2.0",

src/actions/auth.js

@@ -17,6 +17,7 @@ export const login = (email, password) => {
   return (dispatch) => {
     firebase.auth().signInWithEmailAndPassword(email, password).then((data) => {
       dispatch({ type: LOGIN, token: data.apiKey });
+      dispatch({ type: 'Login' });
     })
     //TODO: catch
   }

src/actions/main.js

@@ -0,0 +1,7 @@
+import {
+  TAB_CREATE_ROOM
+} from '../reducers/constants/constants'
+
+export const switchTab = (tab) => {
+  return { type: TAB_CREATE_ROOM, tab: tab };
+};

src/components/MainScreen/CreateRoom.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  TextInput
+} from 'react-native';
+
+export default class CreateRoom extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      pass: '',
+      email: ''
+    };
+  }
+
+  createRoom() {
+
+  }
+
+  joinRoom() {
+
+  }
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <View style={{padding: 10}}>
+          <TextInput
+          style={styles.input}
+            multiline={false}
+            secureTextEntry={true}
+            placeholder={'room'}
+            placeholderTextColor={"rgba(136, 145, 181, 1)"}
+            underlineColorAndroid={"rgba(136, 145, 181, 1)"}
+            onChangeText={(pass) => this.setState({pass})}
+            value={this.state.pass}
+          />
+        </View>
+        <Button
+          onPress={() => {this.joinRoom()}}
+          title="Join room"
+        />
+        <Button
+          onPress={() => {this.createRoom()}}
+          title="Create new room"
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  input: {
+    height: 50,
+    backgroundColor: '#ededed',
+    marginVertical: 10
+  }
+});

src/components/MainScreen/MainScreen.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  Button,
+  TextInput
+} from 'react-native';
+import TabNavigator from "react-native-tab-navigator";
+import CreateRoom from './CreateRoom';
+import { connect } from 'react-redux';
+import { switchTab } from '../../actions/main';
+
+class MainScreen extends React.Component {
+
+  constructor(props) {
+    super(props);
+  }
+
+  onTabSelect(tab) {
+    if (this.props.tab !== tab) {
+      this.props.onTabSelect(tab);
+    }
+  }
+
+  render() {
+    return (
+      <TabNavigator tabBarStyle={styles.tabBar}>
+        <TabNavigator.Item
+          title="Create Room"
+          selected={this.props.tab === 'create_room'}
+          titleStyle={styles.tabTitle}
+          selectedTitleStyle={styles.tabTitleActive}
+          onPress={this.onTabSelect.bind(this, "create_room")}
+        >
+          <CreateRoom></CreateRoom>
+        </TabNavigator.Item>
+        <TabNavigator.Item
+          title="Settings"
+          selected={this.props.tab === 'settings'}
+          titleStyle={styles.tabTitle}
+          selectedTitleStyle={styles.tabTitleActive}
+          onPress={this.onTabSelect.bind(this, "settings")}
+        >
+          <CreateRoom></CreateRoom>
+        </TabNavigator.Item>
+      </TabNavigator>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  tabTitle: {
+    backgroundColor: "transparent",
+    fontSize: 10,
+  },
+  tabTitleActive: {
+    color: "red"
+  },
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  input: {
+    height: 50,
+    backgroundColor: '#ededed',
+    marginVertical: 10
+  }
+});
+
+const select = (store) => ({
+  tab: store.main.tab,
+});
+
+const mapDispatchToProps = (dispatch) => ({
+  onTabSelect: tab => dispatch(switchTab(tab))
+});
+
+export default connect(
+  select,
+  mapDispatchToProps,
+)(MainScreen);

src/navigators/AppNavigator.js

@@ -5,7 +5,7 @@ import { addNavigationHelpers, StackNavigator } from 'react-navigation';
 
 import LoginScreen from '../components/LoginScreen';
 import SignUp from '../components/SignUp';
-import MainScreen from '../components/MainScreen';
+import MainScreen from '../components/MainScreen/MainScreen';
 import { addListener } from '../utils/redux';
 
 export const AppNavigator = StackNavigator({

src/reducers/constants/constants.js

@@ -2,3 +2,4 @@
 export const LOGOUT = 'LOGOUT';
 export const LOGIN = 'LOGIN';
 export const SIGNIN = 'SIGNIN';
+export const TAB_CREATE_ROOM = 'TAB_CREATE_ROOM';

src/reducers/index.js

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import nav from './reducer_nav';
 import auth from './reducer_auth';
+import main from './reducer_main';
 
 const AppReducer = combineReducers({
   nav,
   auth,
+  main,
 });
 
 export default AppReducer;

src/reducers/reducer_main.js

@@ -0,0 +1,16 @@
+import {
+  TAB_CREATE_ROOM
+} from './constants/constants'
+
+const initialMainState = { tab: 'create_room' };
+
+function main(state = initialMainState, action) {
+  switch (action.type) {
+    case TAB_CREATE_ROOM:
+      return { ...state, tab: action.tab };
+    default:
+      return state;
+  }
+}
+
+export default main;