application-amicale/screens/PlanningScreen.js

// @flow

import * as React from 'react';
import {Button, H3, Text} from 'native-base';
import i18n from "i18n-js";
import {View, Platform} from "react-native";
import CustomMaterialIcon from "../components/CustomMaterialIcon";
import ThemeManager from "../utils/ThemeManager";
import {Linking} from "expo";
import BaseContainer from "../components/BaseContainer";

type Props = {
    navigation: Object,
}

/**
 * Opens a link in the device's browser
 * @param link The link to open
 */
function openWebLink(link) {
    Linking.openURL(link).catch((err) => console.error('Error opening link', err));
}

/**
 * Class defining the app's planning screen
 */
export default class PlanningScreen extends React.Component<Props> {


    render() {
        const nav = this.props.navigation;
        return (
            <BaseContainer navigation={nav} headerTitle={i18n.t('screens.planning')}>
                <View style={{
                    flexGrow: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    { Platform.OS === 'android' ?
                        <View
                            style={{
                                justifyContent: 'center',
                                alignItems: 'center',
                            }}>
                            <View style={{
                                justifyContent: 'center',
                                alignItems: 'center',
                                width: '100%',
                                height: 100,
                                marginBottom: 20
                            }}>
                                <CustomMaterialIcon
                                    icon={'forklift'}
                                    fontSize={100}
                                    width={100}
                                    color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>
                            </View>

                            <H3 style={{
                                textAlign: 'center',
                                marginRight: 20,
                                marginLeft: 20,
                                color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
                            }}>
                                {i18n.t('planningScreen.wipTitle')}
                            </H3>
                            <Text style={{
                                textAlign: 'center',
                                color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText
                            }}>
                                {i18n.t('planningScreen.wipSubtitle')}
                            </Text>
                        </View>
                        :
                        <View/>

                    }



                    <Button block style={{marginTop: 20, marginRight: 10, marginLeft: 10}}
                            onPress={() => openWebLink('https://www.facebook.com/groups/2054302624595234/')}>
                        <Text>Clubs et Evenements</Text>
                    </Button>
                </View>
            </BaseContainer>
        );
    }
}