App.js

@@ -16,7 +16,6 @@ import AprilFoolsManager from "./src/managers/AprilFoolsManager";
 import Update from "./src/constants/Update";
 import ConnectionManager from "./src/managers/ConnectionManager";
 import URLHandler from "./src/utils/URLHandler";
-import {setSafeBounceHeight} from "react-navigation-collapsible";
 
 type Props = {};
 
@@ -63,7 +62,6 @@ export default class App extends React.Component<Props, State> {
         this.defaultData = {};
         this.urlHandler = new URLHandler(this.onInitialURLParsed, this.onDetectURL);
         this.urlHandler.listen();
-        setSafeBounceHeight(Platform.OS === 'ios' ? 100 : 0);
     }
 
     onInitialURLParsed = ({route, data}: Object) => {

package.json

@@ -38,12 +38,10 @@
     "react": "16.9.0",
     "react-dom": "16.9.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
-    "react-native-animatable": "^1.3.3",
     "react-native-app-intro-slider": "^4.0.0",
     "react-native-appearance": "~0.3.3",
     "react-native-autolink": "^3.0.0",
     "react-native-calendars": "^1.260.0",
-    "react-native-collapsible": "^1.5.2",
     "react-native-gesture-handler": "~1.6.0",
     "react-native-image-modal": "^1.0.1",
     "react-native-modalize": "^1.3.6",

src/components/Custom/AnimatedBottomBar.js

@@ -4,15 +4,12 @@ import * as React from 'react';
 import {StyleSheet, View} from "react-native";
 import {FAB, IconButton, Surface, withTheme} from "react-native-paper";
 import AutoHideComponent from "./AutoHideComponent";
-import * as Animatable from 'react-native-animatable';
-
-const AnimatedFAB = Animatable.createAnimatableComponent(FAB);
 
 type Props = {
     navigation: Object,
     theme: Object,
     onPress: Function,
-    seekAttention: boolean,
+    currentGroup: string,
 }
 
 type State = {
@@ -45,7 +42,7 @@ class AnimatedBottomBar extends React.Component<Props, State> {
     }
 
     shouldComponentUpdate(nextProps: Props, nextState: State) {
-        return (nextProps.seekAttention !== this.props.seekAttention)
+        return (nextProps.currentGroup !== this.props.currentGroup)
             || (nextState.currentMode !== this.state.currentMode);
     }
 
@@ -78,17 +75,6 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                 ref={this.ref}
                 style={styles.container}>
                 <Surface style={styles.surface}>
-                    <View style={styles.fabContainer}>
-                        <AnimatedFAB
-                            animation={this.props.seekAttention ? "jello" : undefined}
-                            easing="ease-out"
-                            iterationCount="infinite"
-                            // useNativeDriver={true}
-                            style={styles.fab}
-                            icon="account-clock"
-                            onPress={() => this.props.navigation.navigate('group-select')}
-                        />
-                    </View>
                     <View style={{flexDirection: 'row'}}>
                         <IconButton
                             icon={this.displayModeIcons[this.state.currentMode]}
@@ -100,6 +86,13 @@ class AnimatedBottomBar extends React.Component<Props, State> {
                             style={{marginLeft: 5}}
                             onPress={() => this.props.onPress('today', undefined)}/>
                     </View>
+                    <View style={styles.fabContainer}>
+                    <FAB
+                        style={styles.fab}
+                        icon="account-clock"
+                        onPress={() => this.props.navigation.navigate('group-select')}
+                    />
+                    </View>
                     <View style={{flexDirection: 'row'}}>
                         <IconButton
                             icon="chevron-left"

src/components/Custom/AutoHideComponent.js

@@ -32,7 +32,7 @@ export default class AutoHideComponent extends React.Component<Props, State> {
     }
 
     onScroll({nativeEvent}: Object) {
-        const speed = nativeEvent.contentOffset.y < 0 ? 0 : this.lastOffset - nativeEvent.contentOffset.y;
+        const speed = this.lastOffset - nativeEvent.contentOffset.y;
         if (speed < -5) { // Go down
             if (!this.isAnimationDownPlaying) {
                 this.isAnimationDownPlaying = true;

src/components/Custom/ErrorView.js

@@ -6,7 +6,6 @@ import {StyleSheet, View} from "react-native";
 import {MaterialCommunityIcons} from "@expo/vector-icons";
 import i18n from 'i18n-js';
 import {ERROR_TYPE} from "../../utils/WebData";
-import * as Animatable from 'react-native-animatable';
 
 type Props = {
     navigation: Object,
@@ -125,15 +124,10 @@ class ErrorView extends React.PureComponent<Props, State> {
     render() {
         this.generateMessage();
         return (
-            <Animatable.View
+            <View style={{
-                style={{
                 ...styles.outer,
                 backgroundColor: this.colors.background
-            }}
+            }}>
-                animation={"zoomIn"}
-                duration={200}
-                useNativeDriver
-            >
                 <View style={styles.inner}>
                     <View style={styles.iconContainer}>
                         <MaterialCommunityIcons
@@ -153,7 +147,7 @@ class ErrorView extends React.PureComponent<Props, State> {
                             : this.getRetryButton())
                         : null}
                 </View>
-            </Animatable.View>
+            </View>
         );
     }
 }

src/components/Home/FeedItem.js

@@ -53,7 +53,7 @@ class FeedItem extends React.Component<Props> {
         const cardHeight = this.props.height - 2 * cardMargin;
         const imageSize = 250;
         const titleHeight = 80;
-        const actionsHeight = 60;
+        const actionsHeight = 48;
         const textHeight = hasImage
             ? cardHeight - titleHeight - actionsHeight - imageSize
             : cardHeight - titleHeight - actionsHeight;

src/components/Lists/GroupListAccordion.js

@@ -1,12 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {List, withTheme} from 'react-native-paper';
+import {IconButton, List, withTheme} from 'react-native-paper';
-import {FlatList, View} from "react-native";
+import {FlatList} from "react-native";
 import {stringMatchQuery} from "../../utils/Search";
-import Collapsible from "react-native-collapsible";
-import * as Animatable from "react-native-animatable";
-import GroupListItem from "./GroupListItem";
 
 type Props = {
     item: Object,
@@ -23,18 +20,14 @@ type State = {
 }
 
 const LIST_ITEM_HEIGHT = 64;
-const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
 
 class GroupListAccordion extends React.Component<Props, State> {
 
-    chevronRef: Object;
-
     constructor(props) {
         super(props);
         this.state = {
             expanded: props.item.id === "0",
         }
-        this.chevronRef = React.createRef();
     }
 
     shouldComponentUpdate(nextProps: Props, nextSate: State) {
@@ -43,27 +36,42 @@ class GroupListAccordion extends React.Component<Props, State> {
 
         return (nextProps.currentSearchString !== this.props.currentSearchString)
             || (nextSate.expanded !== this.state.expanded)
-            || (nextProps.favoriteNumber !== this.props.favoriteNumber)
+            || (nextProps.favoriteNumber !== this.props.favoriteNumber);
-            || (nextProps.item.content.length !== this.props.item.content.length);
     }
 
-    onPress = () => {
+    onPress = () => this.setState({expanded: !this.state.expanded});
-        this.chevronRef.current.transitionTo({rotate: this.state.expanded ? '0deg' : '180deg'});
-        this.setState({expanded: !this.state.expanded})
-    };
 
     keyExtractor = (item: Object) => item.id.toString();
 
+    isItemFavorite(item: Object) {
+        return item.isFav !== undefined && item.isFav;
+    }
+
     renderItem = ({item}: Object) => {
         if (stringMatchQuery(item.name, this.props.currentSearchString)) {
+
             const onPress = () => this.props.onGroupPress(item);
             const onStartPress = () => this.props.onFavoritePress(item);
             return (
-                <GroupListItem
+                <List.Item
-                    height={LIST_ITEM_HEIGHT}
+                    title={item.name}
-                    item={item}
                     onPress={onPress}
-                    onStartPress={onStartPress}/>
+                    left={props =>
+                        <List.Icon
+                            {...props}
+                            icon={"chevron-right"}/>}
+                    right={props =>
+                        <IconButton
+                            {...props}
+                            icon={"star"}
+                            onPress={onStartPress}
+                            color={this.isItemFavorite(item) ? this.props.theme.colors.tetrisScore : props.color}
+                        />}
+                    style={{
+                        height: LIST_ITEM_HEIGHT,
+                        justifyContent: 'center',
+                    }}
+                />
             );
         } else
             return null;
@@ -73,58 +81,36 @@ class GroupListAccordion extends React.Component<Props, State> {
 
     render() {
         const item = this.props.item;
-        const accordionColor = this.state.expanded
-            ? this.props.theme.colors.primary
-            : this.props.theme.colors.text;
-        // console.log(item.id);
         return (
-            <View>
+            <List.Accordion
-                <List.Item
+                title={item.name}
-                    title={item.name}
+                expanded={this.state.expanded}
-                    onPress={this.onPress}
+                onPress={this.onPress}
-                    style={{
+                style={{
-                        height: this.props.height,
+                    height: this.props.height,
-                        justifyContent: 'center',
+                    justifyContent: 'center',
-                    }}
+                }}
-                    titleStyle={{color: accordionColor}}
+                left={props =>
-                    left={props =>
+                    item.id === "0"
-                        item.id === "0"
+                    ? <List.Icon
-                            ? <List.Icon
-                                {...props}
-                                icon={"star"}
-                                color={this.props.theme.colors.tetrisScore}
-                            />
-                            : null}
-                    right={(props) => <AnimatedListIcon
-                        ref={this.chevronRef}
                         {...props}
-                        icon={"chevron-down"}
+                        icon={"star"}
-                        color={this.state.expanded
+                        color={this.props.theme.colors.tetrisScore}
-                            ? this.props.theme.colors.primary
+                    />
-                            : props.color
+                : null}
-                        }
+            >
-                        useNativeDriver
+                {/*$FlowFixMe*/}
-                    />}
+                <FlatList
+                    data={item.content}
+                    extraData={this.props.currentSearchString}
+                    renderItem={this.renderItem}
+                    keyExtractor={this.keyExtractor}
+                    listKey={item.id}
+                    // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
+                    // getItemLayout={this.itemLayout} // Broken with search
+                    removeClippedSubviews={true}
                 />
-                <Collapsible
+            </List.Accordion>
-                    collapsed={!this.state.expanded}
-                    ease={"easeInOut"}
-                >
-                    {this.state.expanded // Only render list if expanded for increased performance
-                        ? <FlatList
-                            data={item.content}
-                            extraData={this.props.currentSearchString}
-                            renderItem={this.renderItem}
-                            keyExtractor={this.keyExtractor}
-                            listKey={item.id}
-                            // Performance props, see https://reactnative.dev/docs/optimizing-flatlist-configuration
-                            getItemLayout={this.itemLayout} // Broken with search
-                            removeClippedSubviews={true}
-                        />
-                        : null}
-
-                </Collapsible>
-            </View>
         );
     }
 }

src/components/Lists/GroupListItem.js

@@ -1,66 +0,0 @@
-// @flow
-
-import * as React from 'react';
-import {IconButton, List, withTheme} from 'react-native-paper';
-
-type Props = {
-    theme: Object,
-    onPress: Function,
-    onStartPress: Function,
-    item: Object,
-    height: number,
-}
-
-type State = {
-    isFav: boolean,
-}
-
-class GroupListItem extends React.Component<Props, State> {
-
-    colors: Object;
-
-    constructor(props) {
-        super(props);
-        this.colors = props.theme.colors;
-        this.state = {
-            isFav: (props.item.isFav !== undefined && props.item.isFav),
-        }
-    }
-
-    shouldComponentUpdate(prevProps: Props, prevState: State) {
-        return (prevState.isFav !== this.state.isFav);
-    }
-
-    onStarPress = () => {
-        this.setState({isFav: !this.state.isFav});
-        this.props.onStartPress();
-    }
-
-    render() {
-        return (
-            <List.Item
-                title={this.props.item.name}
-                onPress={this.props.onPress}
-                left={props =>
-                    <List.Icon
-                        {...props}
-                        icon={"chevron-right"}/>}
-                right={props =>
-                    <IconButton
-                        {...props}
-                        icon={"star"}
-                        onPress={this.onStarPress}
-                        color={this.state.isFav
-                            ? this.props.theme.colors.tetrisScore
-                            : props.color}
-                    />}
-                style={{
-                    height: this.props.height,
-                    justifyContent: 'center',
-                }}
-            />
-        );
-    }
-}
-
-export default withTheme(GroupListItem);

src/components/Lists/ProxiwashListItem.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import {ActivityIndicator, Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
+import {Avatar, List, ProgressBar, Surface, Text, withTheme} from 'react-native-paper';
 import {StyleSheet, View} from "react-native";
 import ProxiwashConstants from "../../constants/ProxiwashConstants";
 import i18n from "i18n-js";
 import AprilFoolsManager from "../../managers/AprilFoolsManager";
-import * as Animatable from "react-native-animatable";
 
 type Props = {
     item: Object,
@@ -14,9 +13,6 @@ type Props = {
     height: number,
 }
 
-const AnimatedIcon = Animatable.createAnimatableComponent(Avatar.Icon);
-
-
 /**
  * Component used to display a proxiwash item, showing machine progression and state
  */
@@ -87,21 +83,14 @@ class ProxiwashListItem extends React.Component<Props> {
             : 1;
 
         const icon = props.isWatched
-            ? <AnimatedIcon
+            ? <Avatar.Icon
                 icon={'bell-ring'}
-                animation={"rubberBand"}
+                size={45}
-                useNativeDriver
-                size={50}
                 color={colors.primary}
                 style={styles.icon}
             />
-            : <AnimatedIcon
+            : <Avatar.Icon
                 icon={props.isDryer ? 'tumble-dryer' : 'washing-machine'}
-                animation={isRunning ? "flash" : undefined}
-                iterationCount={"infinite"}
-                easing={"linear"}
-                duration={2000}
-                useNativeDriver
                 size={40}
                 color={colors.text}
                 style={styles.icon}
@@ -147,20 +136,12 @@ class ProxiwashListItem extends React.Component<Props> {
                                 </Text>
                             </View>
                             <View style={{justifyContent: 'center',}}>
-                                {
+                                <Avatar.Icon
-                                    isRunning
+                                    icon={stateIcon}
-                                        ? <ActivityIndicator
+                                    color={colors.text}
-                                            animating={true}
+                                    size={30}
-                                            size={'small'}
+                                    style={styles.icon}
-                                            style={{marginLeft: 10}}/>
+                                />
-                                        : <Avatar.Icon
-                                            icon={stateIcon}
-                                            color={colors.text}
-                                            size={30}
-                                            style={styles.icon}
-                                        />
-                                }
-
                             </View>
                         </View>)}
                 />

src/components/Lists/WebSectionList.js

@@ -8,7 +8,6 @@ import {Animated, RefreshControl, View} from "react-native";
 import ErrorView from "../Custom/ErrorView";
 import BasicLoadingScreen from "../Custom/BasicLoadingScreen";
 import {withCollapsible} from "../../utils/withCollapsible";
-import * as Animatable from 'react-native-animatable';
 
 type Props = {
     navigation: Object,
@@ -175,29 +174,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
         index
     });
 
-    renderSectionHeader = (data: Object) => {
+    onListScroll= (event) => {
-        return (
-            <Animatable.View
-                animation={"fadeInUp"}
-                duration={500}
-                useNativeDriver
-            >
-                {this.props.renderSectionHeader(data)}
-            </Animatable.View>
-        );
-    }
 
-    renderItem = (data: Object) => {
+    };
-        return (
-            <Animatable.View
-                animation={"fadeInUp"}
-                duration={500}
-                useNativeDriver
-            >
-                {this.props.renderItem(data)}
-            </Animatable.View>
-        );
-    }
 
     render() {
         let dataset = [];
@@ -219,9 +198,9 @@ class WebSectionList extends React.PureComponent<Props, State> {
                         />
                     }
                     //$FlowFixMe
-                    renderSectionHeader={shouldRenderHeader ? this.renderSectionHeader : this.getEmptySectionHeader}
+                    renderSectionHeader={shouldRenderHeader ? this.props.renderSectionHeader : this.getEmptySectionHeader}
                     //$FlowFixMe
-                    renderItem={this.renderItem}
+                    renderItem={this.props.renderItem}
                     stickySectionHeadersEnabled={this.props.stickyHeader}
                     style={{minHeight: '100%'}}
                     ListEmptyComponent={this.state.refreshing

src/components/Screens/WebViewScreen.js

@@ -114,6 +114,7 @@ class WebViewScreen extends React.PureComponent<Props> {
     onOpenClicked = () => Linking.openURL(this.props.url);
 
     injectJavaScript = (script: string) => {
+        // console.log(this.webviewRef.current.getNode().webViewRef.current);
         this.webviewRef.current.getNode().injectJavaScript(script);
     }
 
@@ -124,21 +125,46 @@ class WebViewScreen extends React.PureComponent<Props> {
      */
     getRenderLoading = () => <BasicLoadingScreen isAbsolute={true}/>;
 
+// document.getElementsByTagName('body')[0].style.paddingTop = '100px';
+
+// $( 'body *' ).filter(function(){
+//   var position = $(this).css('position');
+//   var top = $(this).css('top');
+//   if((position === 'fixed') && top !== 'auto'){
+//     console.log(top);
+//     $(this).css('top', 'calc(' + top + ' + 100px)');
+//     console.log($(this).css('top'));
+//   };
+// });
+
+// document.querySelectorAll('body *').forEach(function(node){
+//   var style = window.getComputedStyle(node);
+//   var position = style.getPropertyValue('position');
+//   var top = style.getPropertyValue('top');
+//   if((position === 'fixed') && top !== 'auto'){
+//     console.log(top);
+//     node.style.top = 'calc(' + top + ' + 100px)';
+//     console.log(node.style.top);
+//   	console.log(node);
+//   };
+// });
+
     getJavascriptPadding(padding: number) {
         return (
-            "document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';" +
+            "document.getElementsByTagName('body')[0].style.paddingTop = '" + padding + "px';\n" +
             "true;"
         );
     }
 
     render() {
         const {containerPaddingTop, onScrollWithListener} = this.props.collapsibleStack;
+        const customJS = this.getJavascriptPadding(containerPaddingTop);
         return (
             <AnimatedWebView
                 ref={this.webviewRef}
                 source={{uri: this.props.url}}
                 startInLoadingState={true}
-                injectedJavaScript={this.props.customJS}
+                injectedJavaScript={this.props.customJS + customJS}
                 javaScriptEnabled={true}
                 renderLoading={this.getRenderLoading}
                 renderError={() => <ErrorView
@@ -149,7 +175,6 @@ class WebViewScreen extends React.PureComponent<Props> {
                     this.canGoBack = navState.canGoBack;
                 }}
                 onMessage={this.props.onMessage}
-                onLoad={() => this.injectJavaScript(this.getJavascriptPadding(containerPaddingTop))}
                 // Animations
                 onScroll={onScrollWithListener(this.props.onScroll)}
             />

src/components/Sidebar/SideBarSection.js

@@ -1,11 +1,9 @@
 // @flow
 
 import * as React from 'react';
-import {FlatList, View} from "react-native";
+import {FlatList} from "react-native";
 import {Drawer, List, withTheme} from 'react-native-paper';
 import {Linking} from "expo";
-import Collapsible from "react-native-collapsible";
-import * as Animatable from "react-native-animatable";
 
 type Props = {
     navigation: Object,
@@ -21,8 +19,6 @@ type State = {
     expanded: boolean
 }
 
-const AnimatedListIcon = Animatable.createAnimatableComponent(List.Icon);
-
 const LIST_ITEM_HEIGHT = 48;
 
 class SideBarSection extends React.PureComponent<Props, State> {
@@ -33,12 +29,10 @@ class SideBarSection extends React.PureComponent<Props, State> {
 
     colors: Object;
     shouldExpand: boolean;
-    chevronRef: Object;
 
     constructor(props) {
         super(props);
         this.colors = props.theme.colors;
-        this.chevronRef = React.createRef();
     }
 
     /**
@@ -110,10 +104,8 @@ class SideBarSection extends React.PureComponent<Props, State> {
     };
 
     toggleAccordion = () => {
-        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand) {
+        if ((!this.state.expanded && this.shouldExpand) || !this.shouldExpand)
-            this.chevronRef.current.transitionTo({ rotate: this.state.expanded ? '0deg' : '180deg' });
             this.setState({expanded: !this.state.expanded})
-        }
     };
 
     shouldRenderAccordion() {
@@ -148,22 +140,13 @@ class SideBarSection extends React.PureComponent<Props, State> {
             if (this.shouldExpand)
                 this.toggleAccordion();
             return (
-                <View>
+                <List.Accordion
-                    <List.Item
+                    title={this.props.sectionName}
-                        title={this.props.sectionName}
+                    expanded={this.state.expanded}
-                        // expanded={this.state.expanded}
+                    onPress={this.toggleAccordion}
-                        onPress={this.toggleAccordion}
+                >
-                        right={(props) => <AnimatedListIcon
+                    {this.getFlatList()}
-                            ref={this.chevronRef}
+                </List.Accordion>
-                            {...props}
-                            icon={"chevron-down"}
-                            useNativeDriver
-                        />}
-                    />
-                    <Collapsible collapsed={!this.state.expanded}>
-                        {this.getFlatList()}
-                    </Collapsible>
-                </View>
             );
         } else
             return this.getFlatList();

src/screens/GroupSelectionScreen.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import {Platform} from "react-native";
+import {Platform, View} from "react-native";
 import i18n from "i18n-js";
 import {Searchbar, withTheme} from "react-native-paper";
 import {stringMatchQuery} from "../utils/Search";
@@ -206,16 +206,20 @@ class GroupSelectionScreen extends React.Component<Props, State> {
 
     render() {
         return (
-            <WebSectionList
+            <View style={{
-                {...this.props}
+                height: '100%'
-                createDataset={this.createDataset}
+            }}>
-                autoRefreshTime={0}
+                <WebSectionList
-                refreshOnFocus={false}
+                    {...this.props}
-                fetchUrl={GROUPS_URL}
+                    createDataset={this.createDataset}
-                renderItem={this.renderItem}
+                    autoRefreshTime={0}
-                updateData={this.state.currentSearchString + this.state.favoriteGroups.length}
+                    refreshOnFocus={false}
-                itemHeight={LIST_ITEM_HEIGHT}
+                    fetchUrl={GROUPS_URL}
-            />
+                    renderItem={this.renderItem}
+                    updateData={this.state.currentSearchString + this.state.favoriteGroups.length}
+                    itemHeight={LIST_ITEM_HEIGHT}
+                />
+            </View>
         );
     }
 }

src/screens/Websites/PlanexScreen.js

@@ -204,6 +204,7 @@ class PlanexScreen extends React.Component<Props, State> {
             'removeAlpha();'
             + '});'
             + EXEC_COMMAND
+            + "function cc(msg) {alert(msg)};"
             + 'true;'; // Prevents crash on ios
     }
 
@@ -335,7 +336,7 @@ class PlanexScreen extends React.Component<Props, State> {
                     {...this.props}
                     ref={this.barRef}
                     onPress={this.sendMessage}
-                    seekAttention={this.state.currentGroup.id === -1}
+                    currentGroup={this.state.currentGroup.name}
                 />
             </View>
         );