React Native Storybook Button

index.js

// storybook/Button/index.js
import React from 'react';
import {
  ActivityIndicator,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import SearchIcon from 'assets/icon-search.svg';

export const Button = props => {
  const {
    containerStyle,
    iconType,
    isLoading,
    onPress,
    text,
    textStyle,
    type,
  } = props;

  const fontSize = 18;
  let containerThemeStyle;
  let icon;
  let contentColor;

  switch (type) {
    case 'primary':
      containerThemeStyle = {
        backgroundColor: '#30BE76',
        borderColor: '#30BE76',
      };
      contentColor = '#fff';
      break;
    case 'secondary':
      containerThemeStyle = {
        backgroundColor: '#fff',
        borderColor: '#30BE76',
      };
      contentColor = '#30BE76';
      break;
    case 'tertiary':
      containerThemeStyle = {
        backgroundColor: 'rgba(0, 0, 0, 0.0)',
        borderColor: 'rgba(0, 0, 0, 0.0)',
      };
      contentColor = '#30BE76';
      break;
  }

  switch (iconType) {
    case 'search':
      icon = <SearchIcon fill={contentColor} />;
      break;
    default:
      icon = undefined;
      break;
  }

  return (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.container, containerThemeStyle, containerStyle]}>
      {isLoading ? (
        <ActivityIndicator color={contentColor} size="small" />
      ) : (
        <View style={styles.wrapper}>
          {icon ? <View style={styles.icon}>{icon}</View> : null}
          <Text
            style={[styles.text, { color: contentColor, fontSize }, textStyle]}>
            {text}
          </Text>
        </View>
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    borderRadius: 32,
    borderWidth: 1,
    justifyContent: 'center',
    minHeight: 54,
    paddingHorizontal: 24,
    paddingVertical: 14,
    width: '100%',
  },
  icon: {
    marginRight: 10,
  },
  wrapper: {
    alignItems: 'center',
    flexDirection: 'row',
    justifyContent: 'center',
  },
});