alex-melnyk / tabber Goto Github PK

import React, { Component } from "react";
import { Animated, TouchableHighlight, View, StyleSheet } from "react-native";
import Interactable from "react-native-interactable";

class AddButton extends Component {
  render() {
    return (
      <Animated.View style={styles.container}>
        <Interactable.View
          snapPoints={[{ x: 0, y: 72 }, { x: 0, y: 250 }]}
          initialPosition={{ x: 0, y: 250 }}
        >
          <Animated.View
            style={{
              position: "absolute",
              width: 96,
              height: 96,
              backgroundColor: "#EE2C38",
              borderRadius: 48
            }}
          />
        </Interactable.View>
      </Animated.View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    position: "absolute",
    alignItems: "center",
    backgroundColor: "red",
    width: 96,
    height: 96,
    borderRadius: 48
  }
});

export { AddButton };

const {height, width} = Dimensions.get("window");

const AuthStack = FluidNavigator({
	Login: { screen: Login },
	Register: { screen: Register }

const PredictiveStack = FluidNavigator({
	Matrix: { screen: PredictiveMatrix}
})

const BottomTab = createBottomTabNavigator({
	Home: {
		screen: Home,
		navigationOptions: () => ({
			tabBarIcon: ({ tintColor }) => (
				<IconButton
					icon="home"
					color={tintColor}
					size={24}
				/>
			)
		})
	},
	Chat: {
		screen: Chat,
		navigationOptions: () => ({
			tabBarIcon: ({ tintColor }) => (
				<IconButton
					icon="chat"
					color={tintColor}
					size={24}
				/>
			)
		})
	},
	MultiBar: {
		screen: () => Chat,
		navigationOptions: ({ navigation }) => ({
			tabBarIcon: () => (
				<MultiBarToggle
					toggleColor='#893168'
					navigation={navigation}
					actionSize={30}
					routes={[
						{
							routeName: 'PredictiveStack',
							color: '#FF8360',
							icon: (
								<IconButton
									icon="home"
									color="#333333"
									size={15}
								/>
							)
						},
						{
							routeName: 'Chat',
							color: '#E8E288',
							icon: (
								<IconButton
									icon="chat"
									color="#333333"
									size={15}
								/>
							)
						},
						{
							routeName: 'ProfileStack',
							color: '#7DCE82',
							icon: (
								<IconButton
									icon="person"
									color="#333333"
									size={15}
								/>
							)
						},
					]}
					icon={(
						<IconButton
							icon={require('./assets/icons/baseline_keyboard_voice_white_48dp.png')}
							color="#FFFFFF"
							size={60}
						/>
					)}
				/>
			)
		}),
		params: {
			navigationDisabled: true
		}
	},
	Photo: {
		screen: Photo,
		navigationOptions: () => ({
			tabBarIcon: ({ tintColor }) => (
				<IconButton
					icon="room"
					color={tintColor}
					size={24}
				/>
			)
		})
	},
	Profile: {
		screen: ProfileStack,
		navigationOptions: () => ({
			tabBarIcon: ({ tintColor }) => (
				<IconButton
					icon="redeem"
					color={tintColor}
					size={24}
				/>
			)
		})
	}
}, {
	tabBarComponent: MultiBar,
	tabBarOptions: {
		adaptive: true,
		showLabel: false,
		inactiveTintColor: '#e4e2e9',
		activeTintColor: '#FFFFFF',
		style:{
		 backgroundColor: '#310E31'
			}
		}
});


const styles = MediaQueryStyleSheet.create({
  // was trying to fix it with this but it doesn't work
	 style: {
		 height: hp('8%'),
		 width: wp('100%'),
		 backgroundColor: '#310E31'
	 }
 },
 //Media Queries styles:
 {
 "@media (max-device-height: 1920)": {
 	style: {
 		height: hp('8%'),
 		width: wp('100%'),
 		backgroundColor: '#310E31'
 	}
},
 	"@media (max-device-height: 2800)": {
 		style: {
 			height: hp('10%'),
 			width: wp('100%'),
 			backgroundColor: '#310E31'
 			}
 		}
 }
);

const Nav = createAppContainer(FluidNavigator(
  {
		AuthLoading: AuthLoading,
		App: BottomTab,
		Auth: AuthStack
  },
  {
		initialRouteName: 'AuthLoading'
  }
));

class Navigation extends Component {
	render() {
		return (
			<Nav/>
		);
	}
}

export default Navigation;`