sve-react-native-lib/src/components/UrlHelper.js

Libreria de componentes de react-native para la sve

import React from 'react';
import { StyleSheet, Text, View, Modal } from 'react-native';
import ds from '../styles/styles';
import Color from '../styles/Color';
import OutlinedButton from './Buttons/OutlinedButton';
export default function UrlHelper(props) {
    const { onRequestClose, module, visible } = props;
    return (
        <Modal
            style={{ flex: 1 }}
            animated
            animationType="fade"
            visible={visible}
            onRequestClose={onRequestClose}>
            <View style={[ds.flexcenter, styles.containerCard]}>
                <View style={ds.card}>
                    <Text style={styles.title}>¿Cómo configurar mi URL en la app?</Text>
                    <Text>Al ver la url de tu sitio podrás tener algo así: </Text>
                    <Text style={{ fontWeight: 'bold' }}>https://misitio.pensemos.com/suiteve/base/client?soa=4&lang=es</Text>
                    <Text style={{ marginTop: 5 }}>Lo único que debes ingresar como url es lo siguiente:</Text>
                    <Text style={styles.rightUrl}>https://misitio.pensemos.com/suiteve</Text>
                    <Text style={styles.endMsge}>Y listo! Ya podrás ingresar y usar la app de {module}</Text>
                    <OutlinedButton onPress={onRequestClose} color={Color.blueSVE} text="Entendido" alignSelf="flex-end" />
                </View>
            </View>
        </Modal>
    )
}

const styles = StyleSheet.create({
    containerCard: {
        backgroundColor: Color.modalBackground
    },
    rightUrl: {
        color: 'red',
        fontWeight: 'bold',
        textDecorationLine: 'underline'
    },
    title: {
        textAlign: 'center',
        fontSize: 18,
        marginBottom: 10,
        fontWeight: 'bold'
    },
    endMsge: {
        textAlign: 'center',
        marginVertical: 10
    }
})