add components buttons and space (#61)

katsuhira02 · Danil · web-flow · commit 5b38cb102ce9 · 2022-04-06T10:27:03.000-05:00
Co-authored-by: Danil &lt;rosesmaster2007@gmail.com&gt;
diff --git a/App.tsx b/App.tsx
@@ -1,8 +1,36 @@
 import * as React from 'react'
 import { Text } from 'react-native'
+import { StyleSheet, ScrollView, View } from 'react-native'
+import { DARK, WHITE } from './src/constants'
+import { Button, Space } from './src/components'
 
-const App = () => (
-  <Text>Hello world!</Text>
-)
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: DARK
+  },
+  textStyle: {
+    color: WHITE,
+    fontSize: 25,
+    paddingBottom: 10
+  }
+})
 
-export default App
+export default function App({}){
+  const { container, textStyle } = styles
+  return(
+    <View style={container}>
+      <Text style={textStyle}>Buttons</Text>
+      <Button isOutline={true} isSmall={false} title='Push me'/>
+      <Space height={15} />
+      <Button isOutline={false} isSmall={false} title='Push me'/>
+      <Space height={15} />
+      <Button isOutline={true} isSmall={true} title='Push me'/>
+      <Space height={15} />
+      <Button isOutline={false} isSmall={true} title='Push me'/>
+      <Space height={15} />
+    </View>
+  )
+}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { StyleSheet, Text, Pressable } from 'react-native'
+import { PRIMARY, WHITE } from '../../constants'
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    height: 48,
+    width: 343,
+    borderRadius: 25
+  },
+  textStyle: {
+    alignItems: 'center',
+    alignSelf: 'center',
+    color: WHITE
+  },
+  color: {
+    backgroundColor: PRIMARY
+  },
+  outlineStyle: {
+    borderWidth: 1.5,
+    borderColor: 'white',
+    color: 'white'
+  },
+  smallContainer: {
+    justifyContent: 'center',
+    width: 160,
+    height: 36,
+    borderRadius: 25
+  }
+})
+
+interface ButtonT {
+  title: string,
+  isOutline: boolean,
+  isSmall: boolean
+}
+
+function Button({ isOutline, title, isSmall }: ButtonT) {
+  const { container, color, outlineStyle, textStyle, smallContainer } = styles
+  const colorButton = isOutline ? outlineStyle : color
+  const sizeButton = isSmall ? smallContainer : container
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        {
+          opacity: pressed ? 0.9 : 1
+        },
+        colorButton,
+        sizeButton
+      ]}
+    >
+      <Text style={textStyle}>{title}</Text>
+    </Pressable>
+  )
+}
+
+export { Button }
diff --git a/src/components/Space/index.tsx b/src/components/Space/index.tsx
@@ -0,0 +1,12 @@
+import React, { memo } from 'react'
+import { View } from 'react-native'
+
+interface SpaceT {
+  height: number
+}
+
+const Space = memo<SpaceT>(({ height }) => (
+  <View style={{ height: height || 30 }} />
+))
+
+export { Space }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './Button'
+export * from './Space'
diff --git a/src/constants.ts b/src/constants.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export * from './Button'`
	`2`	`+export * from './Space'`