cnapp/src/modules/about/About.js

import React, { Component } from 'react';
import {Text, ScrollView, View, Platform, StyleSheet, Image, Linking, TouchableOpacity} from "react-native";
// import HTMLView from 'react-native-htmlview';

import {Button, Text as NBText, Icon} from 'native-base';

const CHATEAU_NEUF_ADDRESS = 'Det Norske Studentersamfund, Slemdalsveien 15, 0369 Oslo';

export default class About extends Component {
    /* FIXME: Values here are pretty hardcoded. Should fetch config from a JSON-file or API */

    openFacebook() {
        /* Ref: https://stackoverflow.com/questions/4810803/open-facebook-page-from-android-app */
        const url = 'fb://page/23664032291/';
        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                return Linking.openURL('https://www.facebook.com/studentersamfundet/');
            } else {
                return Linking.openURL(url);
            }
        }).catch(err => console.error('An error occurred', err));
    }
    openInstagram() {
        /* Ref: */
        const url = Platform.select({
            ios: 'instagram://user?username=studentersamfundet',
            android: 'http://instagram.com/_u/studentersamfundet'
        });

        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                return Linking.openURL('https://www.instagram.com/studentersamfundet/');
            } else {
                return Linking.openURL(url);
            }
        }).catch(err => console.error('An error occurred', err));
    }

    render() {
        return (
            <ScrollView>
                <View style={styles.card}>
                    <Text style={[styles.header, {marginTop: 8}]}>Det Norske Studentersamfund</Text>
                    <TouchableOpacity onPress={() => Linking.openURL('https://www.studentersamfundet.no/')}>
                        <Image source={{uri: 'https://galtinn.neuf.no/static/dist/images/logo.png'}} style={styles.logo} resizeMode="contain" />
                    </TouchableOpacity>
                    <Text style={styles.header}>Følg oss på</Text>
                    <View style={[styles.section, {flex: 1, flexDirection: 'row'}]}>
                        <TouchableOpacity style={styles.someBtn} onPress={this.openFacebook}>
                            <Icon name="logo-facebook" style={styles.largeIcon} /><NBText>Facebook</NBText>
                        </TouchableOpacity>
                        <TouchableOpacity style={styles.someBtn} onPress={this.openInstagram}>
                            <Icon name="logo-instagram" style={styles.largeIcon} /><NBText>Instagram</NBText>
                        </TouchableOpacity>
                    </View>

                    <Text style={styles.header}>Adresse</Text>
                    <Text style={[styles.paragraph, {textAlign: 'center'}]}>Det Norske Studentersamfund{"\n"}Slemdalsveien 15, 0369 Oslo</Text>
                    <View style={styles.section}>
                        <Button iconLeft onPress={() => Linking.openURL(`https://www.google.com/maps/search/?api=1&query=${CHATEAU_NEUF_ADDRESS}`)}>
                            <Icon name="map" style={styles.icon} /><NBText> Vis i kart</NBText>
                        </Button>
                    </View>
                    <Text style={styles.header}>Åpningstider</Text>
                    <View style={styles.section}>
                        <Button iconLeft onPress={() => Linking.openURL('https://studentersamfundet.no/aapningstider/')}>
                            <Icon name="time" style={styles.icon} /><NBText>Vis Åpningstider</NBText>
                        </Button>
                    </View>
                    <Text style={styles.header}>Ta kontakt</Text>
                    <View style={[styles.section, {flex: 1, flexDirection: 'row'}]}>
                        <View>
                        <Button iconLeft onPress={() => Linking.openURL('tel:+4794430002')} style={{marginHorizontal: 10}}>
                            <Icon name="call" style={styles.icon} /><NBText>Ring</NBText>
                        </Button>
                        </View>
                        <View>
                        <Button iconLeft onPress={() => Linking.openURL('mailto:ledelsen@studentersamfundet.no')} style={{marginHorizontal: 10}}>
                            <Icon name="mail" style={styles.icon} /><NBText>Send e-post</NBText>
                        </Button>
                        </View>
                    </View>

                    <Text style={styles.header}>Chateau Neuf</Text>
                    <Image source={{uri: 'https://studentersamfundet.no/wp-content/uploads/2015/04/26_KUL_Chateauneuf-1280x720.jpg'}} style={styles.featuredImage} resizeMode="contain" />
                    <Text style={styles.paragraph}>Studentene i Oslo har sitt naturlige tilholdssted på Det Norske Studentersamfund, i hyggelige lokaler på Chateau Neuf øverst på Majorstuen. Her er det åpent alle dager unntatt søndag, og hver dag skjer det en rekke ting i våre mange arrangementslokaler. Enten man ønsker en tur i baren, på kafé, på debatt, på konsert, teater eller kino, har man muligheten på Chateau Neuf.</Text>
                    <Text style={styles.paragraph}>Chateau Neuf er et frivillig drevet studenthus. Studenter over alt i Oslo kan komme hit og få nyttig og spennende erfaring med å drive et av Oslos største kulturhus. Her kan du stå i bar, sette lys og lyd, jobbe med markedsføring, produsere konserter, bli kjent med hundrevis av bra mennesker og få minner for livet.</Text>
                    <Text style={styles.paragraph}>Alle studentforeninger i Oslo kan arrangere gratis på Chateau Neuf. Skal du arrangere en fest, sette en konsert, holde et foredrag eller gjennomføre et møte, har vi lokaler som kan brukes til dette.</Text>

                    {/*<HTMLView style={styles.content} stylesheet={HTMLStyles} value={this.props.openingHours}/>*/}
                </View>
            </ScrollView>
        )
    }
}


const styles = StyleSheet.create({
    header: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#000',
        textAlign: 'center',
    },
    paragraph: {
        fontSize: 16,
        color: '#000',
        paddingBottom: 10,
        lineHeight: 25,
    },
    card: {
        borderColor: '#e1e8ee',
        borderWidth: 1,
        ...Platform.select({
            ios: {
                shadowColor: 'rgba(0,0,0, .2)',
                shadowOffset: {height: 0, width: 0},
                shadowOpacity: 1,
                shadowRadius: 1,
            },
            android: {
                elevation: 1,
            },
        }),
        padding: 8,
        margin: 8,
        backgroundColor: '#fff',
    },
    featuredImage: {
        height: 230,
        width: null,
    },
    logo: {
        height: 128,
        width: null,
        marginBottom: 10,
    },
    icon: {
        fontSize: 16,
    },
    largeIcon: {
        fontSize: 40,
    },
    section: {
        marginTop: 8,
        marginBottom: 20,
        alignSelf: 'center',
    },
    someBtn: {
        flex: 1,
        alignItems: 'center',
    }
});

// const HTMLStyles = StyleSheet.create({
//     p: {
//         fontSize: 16,
//         marginBottom: -30,
//         color: '#000',
//     },
//     ul: {
//         fontSize: 16,
//         color: '#000',
//         marginTop: -20,
//         marginBottom: -30,
//     },
// });