Resolve track pop-up spacing

src/components/Button.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState }  from 'react';
 import { SvgProps } from 'react-native-svg';
 import { 
-    PressableProps, ViewProps, 
+    PressableProps, ViewProps, View,
 } from 'react-native';
 import { THEME_COLOR } from 'CONSTANTS';
 import styled, { css } from 'styled-components/native';
@@ -13,7 +13,6 @@ interface ButtonProps extends PressableProps {
     style?: ViewProps['style'];
 }
 
-
 const BaseButton = styled.Pressable`
     padding: 16px;
     border-radius: 8px;
@@ -32,7 +31,7 @@ const ButtonText = styled.Text<{ active?: boolean }>`
     `}
 `;
 
-export default function Button(props: ButtonProps) {
+const Button = React.forwardRef<View, ButtonProps>(function Button(props, ref) {
     const { icon: Icon, title, ...rest } = props;
     const defaultStyles = useDefaultStyles();
     const [isPressed, setPressed] = useState(false);
@@ -42,6 +41,7 @@ export default function Button(props: ButtonProps) {
     return (
         <BaseButton
             {...rest}
+            ref={ref}
             onPressIn={handlePressIn}
             onPressOut={handlePressOut}
             style={[ 
@@ -62,4 +62,6 @@ export default function Button(props: ButtonProps) {
             <ButtonText active={isPressed}>{title}</ButtonText>
         </BaseButton>
     );
-}
+});
+
+export default Button;

src/components/Modal.tsx

@@ -16,8 +16,9 @@ const Background = styled(Pressable)`
 const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
     margin: auto 20px;
     padding: 4px;
-    border-radius: 8px;
-    overflow: hidden;
+    border-radius: 12px;
+    flex: 0 0 auto;
+    background: salmon;
     
     ${props => props.fullSize && css`
         flex: 1;
@@ -35,11 +36,9 @@ const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
 
     return (
         <Background style={defaultStyles.modal} onPress={closeModal}>
-            <SafeAreaView style={{ flex: 1 }}>
-                <Container style={defaultStyles.modalInner} fullSize={fullSize}>
-                    {children}
-                </Container>
-            </SafeAreaView>
+            <Container style={defaultStyles.modalInner} fullSize={fullSize}>
+                {children}
+            </Container>
         </Background>
     );
 };

src/components/Typography.ts

@@ -10,4 +10,5 @@ export const Header = styled(Text)`
 export const SubHeader = styled(Text)`
     font-size: 24px;
     margin: 12px 0;
+    font-weight: 500;
 `;

src/components/WrappableButtonRow.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components/native';
+import Button from './Button';
+
+export const WrappableButtonRow = styled.View`
+    flex: 0 0 auto;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 6px -2px;
+`;
+
+export const WrappableButton = styled(Button)`
+    margin: 2px;
+`;