react-native-ui-components

AutoLink.js

import React from 'react';
import PropTypes from 'prop-types';
import { TouchableOpacity, Linking } from 'react-native';

const AutoLink = ({ children, phone, email, text }) => {
  let uriText = text;
  uriText = phone ? `tel:${text}` : uriText;
  uriText = email ? `mailto:${text}` : uriText;

  const _onPress = uri => Linking.openURL(uri).catch(err => console.error('An error occurred', err));

  return (
    <TouchableOpacity onPress={() => _onPress(uriText)}>
      {children}
    </TouchableOpacity>
  );
};

AutoLink.propTypes = {
  phone: PropTypes.bool,
  email: PropTypes.bool,
  text: PropTypes.string,
  children: PropTypes.node.isRequired,
};

AutoLink.defaultProps = {
  phone: false,
  email: false,
  text: '',
};

export default AutoLink;

FAB.js

import React from 'react'
import { Dimensions, View, Text, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'

const FloatingActionButton = ({
  width,
  height,
  top,
  children,
  bottom,
  right,
  backgroundColor,
  onPress,
}) => {
  const defaultTopOffset = 180

  return (
    <View style={{
      position: 'absolute',
      borderRadius: width / 2,
      width: width,
      height: height,
      top: top || (Dimensions.get('window').height - defaultTopOffset),
      bottom: bottom,
      right: right,
      backgroundColor: backgroundColor,
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
      <TouchableOpacity onPress={onPress}>
        <View style={{justifyContent: 'center', alignItems: 'center', width, height}}>
          {children || <Text style={{
            color: 'white',
            fontSize: 20,
          }}>
            +
          </Text>}
        </View>
      </TouchableOpacity>
    </View>
  )
}

FloatingActionButton.propTypes = {
  top: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  bottom: PropTypes.number,
  right: PropTypes.number,
  children: PropTypes.node,
  backgroundColor: PropTypes.string,
  onPress: PropTypes.func,
}

FloatingActionButton.defaultProps = {
  top: undefined,
  width: 50,
  height: 50,
  bottom: 100,
  right: 10,
  children: null,
  backgroundColor: 'black',
  onPress: () => {},
}

export default FloatingActionButton