some fixed

package.json

@@ -22,6 +22,7 @@
     "expo-status-bar": "~1.0.2",
     "expo-updates": "~0.3.2",
     "moment": "^2.29.1",
+    "prop-types": "^15.7.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "~0.63.3",

src/components/GroupsList/GroupsList.js

@@ -47,10 +47,13 @@ const data = [
 ];
 
 export default class GroupsList extends Component {
-    renderItem = ({ item }) => {
-        return <GroupsItem item={item} />;
+
+
+    renderItem = ({ item}) => {
+        return <GroupsItem item={item}/>;
     };
 
+
     render() {
         return (
             <FlatList

src/components/react-native-messenger/InputModule/InputModule.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { View, TextInput, Keyboard, Platform } from 'react-native';
 import { TouchableRipple } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialIcons';
-import AppStyles from 'src/config/styles';
+import AppStyles from '../../../config/styles';
 import styles from './styles';
 
 export default class InputModule extends Component {

src/components/react-native-messenger/InputModule/styles.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from 'react-native';
-import Metrics from 'src/config/metrics';
-import AppStyles from 'src/config/styles';
-import { isIphoneX } from 'src/lib/isIphoneX';
+import Metrics from '../../../config/metrics';
+import AppStyles from '../../../config/styles';
+import { isIphoneX } from '../../../lib/isIphoneX';
 
 const styles = StyleSheet.create({
     container: {

src/components/react-native-messenger/KeyboardSpacer/KeyboardSpacer.js

@@ -0,0 +1,67 @@
+/* Used to manage keyboard spacing
+ * NOTE: takes variance as optional prop to vary keyboard height if wanted.
+ * View expands based on keyboard height.
+ */
+import React, { Component } from 'react';
+import { Keyboard, Animated } from 'react-native';
+import PropTypes from 'prop-types';
+import styles from './styles';
+
+export default class KeyboardSpacer extends Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            keyboardHeight: 0
+        };
+        this.imageHeight = new Animated.Value(0);
+    }
+
+    componentDidMount() {
+        this.keyboardDidShowListener = Keyboard.addListener(
+            'keyboardWillShow',
+            this.keyboardWillShow
+        );
+        this.keyboardDidHideListener = Keyboard.addListener(
+            'keyboardWillHide',
+            this.keyboardWillHide
+        );
+    }
+
+    componentWillUnmount() {
+        this.keyboardDidShowListener.remove();
+        this.keyboardDidHideListener.remove();
+    }
+
+    keyboardWillShow = e => {
+        Animated.timing(this.imageHeight, {
+            duration: 240,
+            toValue: e.endCoordinates.height
+        }).start();
+    };
+
+    keyboardWillHide = () => {
+        Animated.timing(this.imageHeight, {
+            duration: 240,
+            toValue: 0
+        }).start();
+    };
+
+    render() {
+        return (
+            <Animated.View
+                style={[
+                    styles.wrapper,
+                    { width: this.imageHeight, height: this.imageHeight }
+                ]}
+            />
+        );
+    }
+}
+
+KeyboardSpacer.propTypes = {
+    variance: PropTypes.number
+};
+
+KeyboardSpacer.defaultProps = {
+    variance: 0
+};

src/components/react-native-messenger/KeyboardSpacer/index.js

@@ -0,0 +1,2 @@
+import KeyboardSpacer from './KeyboardSpacer';
+export default KeyboardSpacer;

src/components/react-native-messenger/KeyboardSpacer/styles.js

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+    wrapper: {}
+});
+
+export default styles;

src/components/react-native-messenger/Toolbar/Toolbar.js

@@ -45,9 +45,9 @@ class Toolbar extends Component {
                     subtitle={'Active 32 minutes ago'}
                 />
 
-                <Appbar.Action icon="call" onPress={() => {}} />
+                {/* <Appbar.Action icon="call" onPress={() => {}} />
                 <Appbar.Action icon="videocam" onPress={() => {}} />
-                <Appbar.Action icon="error-outline" onPress={() => {}} />
+                <Appbar.Action icon="error-outline" onPress={() => {}} /> */}
             </Appbar.Header>
         );
     }

src/components/react-native-messenger/index.js

@@ -5,9 +5,9 @@ import {
     TouchableWithoutFeedback,
     Keyboard
 } from 'react-native';
-import Toolbar from './Toolbar';
+// import Toolbar from './Toolbar';
 import InputModule from './InputModule';
-import KeyboardSpacer from '../KeyboardSpacer';
+import KeyboardSpacer from './KeyboardSpacer';
 
 export default class Messenger extends Component {
     onBackPress = () => {
@@ -21,7 +21,7 @@ export default class Messenger extends Component {
     render() {
         return (
             <View style={{ flex: 1 }}>
-                <Toolbar onBackPress={this.onBackPress} />
+                {/* <Toolbar onBackPress={this.onBackPress} /> */}
                 <TouchableWithoutFeedback onPress={this.dismissKeyboard}>
                     <View style={{ flex: 1 }} />
                 </TouchableWithoutFeedback>

src/lib/createReducer.js

@@ -0,0 +1,13 @@
+/*
+ * Will dynamically create reducers
+ * enforcing a unique way to describe reducers
+ */
+export default function createReducer(initialState, handlers) {
+    return function reducer(state = initialState, action) {
+        if (handlers.hasOwnProperty(action.type)) {
+            return handlers[action.type](state, action);
+        } else {
+            return state;
+        }
+    };
+}

src/lib/isIphoneX.js

@@ -0,0 +1,19 @@
+import { Dimensions, Platform } from 'react-native';
+
+export function isIphoneX() {
+    let dimen = Dimensions.get('window');
+    return (
+        Platform.OS === 'ios' &&
+        !Platform.isPad &&
+        !Platform.isTVOS &&
+        (dimen.height === 812 || dimen.width === 812)
+    );
+}
+
+export function ifIphoneX(iphoneXStyle, regularStyle) {
+    if (isIphoneX()) {
+        return iphoneXStyle;
+    } else {
+        return regularStyle;
+    }
+}

src/screens/ChatScreen/ChatScreen.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
-import Messenger from 'src/components/react-native-messenger';
+import Messenger from '../../components/react-native-messenger';
 
 export default class ChatScreen extends Component {
     onBackPress = () => {
         this.props.navigation.goBack();
     };
+
     render() {
         return (
             <View style={{ flex: 1 }}>

src/screens/GroupScreen/GroupScreen.js

@@ -3,13 +3,21 @@ import { View } from 'react-native';
 
 import GroupsList from '../../components/GroupsList';
 import styles from './styles';
+import FormButton from '../../components/FormButton';
+
+export default function GroupScreen({ navigation }) {
+
+
 
-export default class GroupsScreen extends Component {
-    render() {
         return (
             <View style={styles.container}>
                 <GroupsList />
+                <FormButton
+                buttonTitle="Chat with Friends"
+                onPress={() => navigation.navigate('Chat')}
+                />
+
             </View>
         );
-    }
+
 }