refactor code

apps/mobile/src/components/Button/index.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+} from 'react-native';
+import {opacity, ph, pv, SIZE, WEIGHT, COLOR_SCHEME} from '../../common/common';
+import {useTracked} from '../../provider';
+
+export const Button = ({
+  height = 50,
+  width = '48%',
+  onPress = () => {},
+  loading = false,
+  grayed,
+  title=""
+}) => {
+  const [state, dispatch] = useTracked();
+  const {colors, tags, premiumUser} = state;
+
+  return (
+    <TouchableOpacity
+      activeOpacity={opacity}
+      onPress={onPress}
+      style={[
+        styles.button,
+        {
+          backgroundColor: grayed ? colors.nav : colors.accent,
+          height: height,
+          width: width,
+        },
+      ]}>
+      {loading ? <ActivityIndicator color={colors.accent} /> : null}
+      <Text
+        style={[styles.buttonText, {color: grayed ? colors.icon : 'white'}]}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  activityText: {
+    fontSize: SIZE.sm,
+    textAlign: 'center',
+  },
+  activityContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    paddingVertical: pv,
+    paddingHorizontal: ph,
+    marginTop: 10,
+    borderRadius: 5,
+    alignSelf: 'center',
+    width: '48%',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  buttonText: {
+    fontFamily: WEIGHT.medium,
+    color: 'white',
+    fontSize: SIZE.sm,
+    marginLeft: 5,
+  },
+});