Fixed feed item size and display all data on click

src/components/Home/ActionsDashboardItem.js

@@ -21,7 +21,6 @@ class ActionsDashBoardItem extends React.Component<Props> {
     gotToSettings = () => this.props.navigation.navigate("settings");
 
     render() {
-        console.log('render action dashboard');
         return (
             <Card style={{
                 ...styles.card,

src/components/Home/FeedItem.js

@@ -8,12 +8,11 @@ import ImageModal from 'react-native-image-modal';
 const ICON_AMICALE = require('../../../assets/amicale.png');
 
 type Props = {
+    navigation: Object,
     theme: Object,
     title: string,
     subtitle: string,
-    full_picture: string,
+    height: number,
-    message: string,
-    onOutLinkPress: Function,
 }
 
 
@@ -38,42 +37,68 @@ class FeedItem extends React.Component<Props> {
         );
     }
 
+    onPress = () => {
+        this.props.navigation.navigate('feed-information',
+            {
+                data: this.props.item,
+                date: this.props.subtitle
+            })
+    };
+
     render() {
-        console.log('render feed');
+        const item = this.props.item;
+        const hasImage = item.full_picture !== '' && item.full_picture !== undefined;
+
+        const cardMargin = 10;
+        const cardHeight = this.props.height - 2 * cardMargin;
+        const imageSize = 250;
+        const titleHeight = 80;
+        const actionsHeight = 48;
+        const textHeight = hasImage
+            ? cardHeight - titleHeight - actionsHeight - imageSize
+            : cardHeight - titleHeight - actionsHeight;
         return (
-            <Card style={{margin: 10}}>
+            <Card
+                style={{
+                    margin: cardMargin,
+                    height: cardHeight,
+                }}
+                onPress={this.onPress}
+            >
                 <Card.Title
                     title={this.props.title}
                     subtitle={this.props.subtitle}
                     left={this.getAvatar}
+                    style={{height: titleHeight}}
                 />
-                {this.props.full_picture !== '' && this.props.full_picture !== undefined ?
+                {hasImage ?
                     <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
                         <ImageModal
                             resizeMode="contain"
                             imageBackgroundColor={"#000"}
                             style={{
-                                width: 250,
+                                width: imageSize,
-                                height: 250,
+                                height: imageSize,
                             }}
                             source={{
-                                uri: this.props.full_picture,
+                                uri: item.full_picture,
                             }}
-                        /></View> : <View/>}
+                        /></View> : null}
                 <Card.Content>
-                    {this.props.message !== undefined ?
+                    {item.message !== undefined ?
                         <Autolink
-                            text={this.props.message}
+                            text={item.message}
                             hashtag="facebook"
                             component={Text}
-                        /> : <View/>
+                            style={{height: textHeight}}
+                        /> : null
                     }
                 </Card.Content>
-                <Card.Actions>
+                <Card.Actions style={{height: actionsHeight}}>
                     <Button
-                        color={'#57aeff'}
+                        onPress={this.onPress}
-                        onPress={this.props.onOutLinkPress}
+                        icon={'plus'}
-                        icon={'facebook'}>
+                        style={{marginLeft: 'auto'}}>
                         {i18n.t('homeScreen.dashboard.seeMore')}
                     </Button>
                 </Card.Actions>

src/components/Lists/WebSectionList.js

@@ -164,7 +164,11 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
      */
     hideSnackBar = () => this.setState({snackbarVisible: false});
 
-    itemLayout = (data, index) => ({length: this.props.itemHeight, offset: this.props.itemHeight * index, index});
+    itemLayout = (data: Object, index: number) => ({
+        length: this.props.itemHeight,
+        offset: this.props.itemHeight * index,
+        index
+    });
 
     render() {
         let dataset = [];
@@ -197,6 +201,7 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                             errorCode={ERROR_TYPE.CONNECTION_ERROR}
                             onRefresh={this.onRefresh}/>
                     }
+                    removeClippedSubviews={true}
                     getItemLayout={this.props.itemHeight !== null ? this.itemLayout : undefined}
                 />
                 <Snackbar
@@ -204,7 +209,8 @@ export default class WebSectionList extends React.PureComponent<Props, State> {
                     onDismiss={this.hideSnackBar}
                     action={{
                         label: 'OK',
-                        onPress: () => {},
+                        onPress: () => {
+                        },
                     }}
                     duration={4000}
                 >

src/navigation/MainTabNavigator.js

@@ -18,6 +18,7 @@ import i18n from "i18n-js";
 import ClubDisplayScreen from "../screens/Amicale/Clubs/ClubDisplayScreen";
 import ScannerScreen from "../screens/ScannerScreen";
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
+import FeedItemScreen from "../screens/FeedItemScreen";
 
 
 const TAB_ICONS = {
@@ -188,6 +189,16 @@ function HomeStackComponent(initialRoute: string | null, defaultData: Object) {
                     };
                 }}
             />
+            <HomeStack.Screen
+                name="feed-information"
+                component={FeedItemScreen}
+                options={({navigation}) => {
+                    return {
+                        title: 'FEEEEED',
+                        ...TransitionPresets.ModalSlideFromBottomIOS,
+                    };
+                }}
+            />
             <HomeStack.Screen
                 name="scanner"
                 component={ScannerScreen}

src/screens/FeedItemScreen.js

@@ -0,0 +1,98 @@
+// @flow
+
+import * as React from 'react';
+import {ScrollView, View} from 'react-native';
+import {Avatar, Card, Text, withTheme} from 'react-native-paper';
+import ImageModal from 'react-native-image-modal';
+import Autolink from "react-native-autolink";
+import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
+import {Linking} from "expo";
+
+type Props = {
+    navigation: Object,
+    route: Object
+};
+
+const ICON_AMICALE = require('../../assets/amicale.png');
+const NAME_AMICALE = 'Amicale INSA Toulouse';
+/**
+ * Class defining a planning event information page.
+ */
+class FeedItemScreen extends React.Component<Props> {
+
+    displayData: Object;
+    date: string;
+
+    colors: Object;
+
+    constructor(props) {
+        super(props);
+        this.colors = props.theme.colors;
+        this.displayData = this.props.route.params.data;
+        this.date = this.props.route.params.date;
+    }
+
+    componentDidMount() {
+        this.props.navigation.setOptions({
+            headerRight: this.getHeaderButton,
+        });
+    }
+
+    onOutLinkPress = () => {
+        Linking.openURL(this.displayData.permalink_url);
+    };
+
+    getHeaderButton = () => {
+        return <MaterialHeaderButtons>
+            <Item title="main" iconName={'facebook'} onPress={this.onOutLinkPress}/>
+        </MaterialHeaderButtons>;
+    };
+
+    getAvatar() {
+        return (
+            <Avatar.Image size={48} source={ICON_AMICALE}
+                          style={{backgroundColor: 'transparent'}}/>
+        );
+    }
+
+    getContent() {
+        const hasImage = this.displayData.full_picture !== '' && this.displayData.full_picture !== undefined;
+        return (
+            <ScrollView style={{margin: 5}}>
+                <Card.Title
+                    title={NAME_AMICALE}
+                    subtitle={this.date}
+                    left={this.getAvatar}
+                />
+                {hasImage ?
+                    <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
+                        <ImageModal
+                            resizeMode="contain"
+                            imageBackgroundColor={"#000"}
+                            style={{
+                                width: 250,
+                                height: 250,
+                            }}
+                            source={{
+                                uri: this.displayData.full_picture,
+                            }}
+                        /></View> : null}
+                <Card.Content>
+                    {this.displayData.message !== undefined ?
+                        <Autolink
+                            text={this.displayData.message}
+                            hashtag="facebook"
+                            component={Text}
+                        /> : null
+                    }
+                </Card.Content>
+            </ScrollView>
+        );
+    }
+
+    render() {
+        return this.getContent();
+    }
+}
+
+export default withTheme(FeedItemScreen);

src/screens/HomeScreen.js

@@ -14,12 +14,12 @@ import ActionsDashBoardItem from "../components/Home/ActionsDashboardItem";
 import ConnectionManager from "../managers/ConnectionManager";
 import {CommonActions} from '@react-navigation/native';
 import MaterialHeaderButtons, {Item} from "../components/Custom/HeaderButton";
-import {Linking} from "expo";
 // import DATA from "../dashboard_data.json";
 
 
 const NAME_AMICALE = 'Amicale INSA Toulouse';
 const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/dashboard/dashboard_data.json";
+const FEED_ITEM_HEIGHT = 500;
 
 const SECTIONS_ID = [
     'dashboard',
@@ -415,14 +415,13 @@ class HomeScreen extends React.Component<Props> {
      * @return {*}
      */
     getFeedItem(item: Object) {
-        const onOutLinkPress = () => Linking.openURL(item.permalink_url);
         return (
             <FeedItem
+                {...this.props}
+                item={item}
                 title={NAME_AMICALE}
                 subtitle={HomeScreen.getFormattedDate(item.created_time)}
-                full_picture={item.full_picture}
+                height={FEED_ITEM_HEIGHT}
-                message={item.message}
-                onOutLinkPress={onOutLinkPress}
             />
         );
     }
@@ -452,7 +451,9 @@ class HomeScreen extends React.Component<Props> {
                     autoRefreshTime={REFRESH_TIME}
                     refreshOnFocus={true}
                     fetchUrl={DATA_URL}
-                    renderItem={this.getRenderItem}/>
+                    renderItem={this.getRenderItem}
+                    itemHeight={FEED_ITEM_HEIGHT}
+                />
                 <FAB
                     style={styles.fab}
                     icon="qrcode-scan"