Poll working

But did not re-render

src/components/Menu/Container.tsx

@@ -1,36 +1,36 @@
-import React from 'react'
+import React, { Children } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useTheme } from 'src/utils/styles/ThemeManager'
 import { StyleConstants } from 'src/utils/styles/constants'
 
 export interface Props {
   children: React.ReactNode
-  marginTop?: boolean
 }
 
-const MenuContainer: React.FC<Props> = ({ ...props }) => {
+const MenuContainer: React.FC<Props> = ({ children }) => {
   const { theme } = useTheme()
+  // @ts-ignore
+  const firstChild = Children.toArray(children)[0].type.name
 
   return (
     <View
       style={[
         styles.base,
         {
-          borderTopColor: theme.separator,
-          marginTop: props.marginTop
-            ? StyleConstants.Spacing.Global.PagePadding
-            : 0
+          ...(firstChild !== 'MenuHeader' && {
+            borderTopColor: theme.separator,
+            borderTopWidth: 1
+          })
         }
       ]}
     >
-      {props.children}
+      {children}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   base: {
-    borderTopWidth: 1,
     marginBottom: StyleConstants.Spacing.L
   }
 })

src/components/Menu/Header.tsx

@@ -1,19 +1,28 @@
 import React from 'react'
-import { StyleSheet, Text } from 'react-native'
+import { StyleSheet, Text, View } from 'react-native'
+import { StyleConstants } from 'src/utils/styles/constants'
+import { useTheme } from 'src/utils/styles/ThemeManager'
 
 export interface Props {
   heading: string
 }
 
 const MenuHeader: React.FC<Props> = ({ heading }) => {
-  return <Text style={styles.header}>{heading}</Text>
+  const { theme } = useTheme()
+
+  return (
+    <View style={[styles.base, { borderBottomColor: theme.separator }]}>
+      <Text>{heading}</Text>
+    </View>
+  )
 }
 
 const styles = StyleSheet.create({
-  header: {
-    marginTop: 12,
-    paddingLeft: 12,
-    paddingRight: 12
+  base: {
+    borderBottomWidth: 1,
+    paddingLeft: StyleConstants.Spacing.Global.PagePadding,
+    paddingRight: StyleConstants.Spacing.Global.PagePadding,
+    paddingBottom: StyleConstants.Spacing.S
   }
 })
 

src/components/Menu/Row.tsx

@@ -43,29 +43,31 @@ const Core: React.FC<Props> = ({
           {title}
         </Text>
       </View>
-      <View style={styles.back}>
-        {content && (
-          <Text
-            style={[styles.content, { color: theme.secondary }]}
-            numberOfLines={1}
-          >
-            {content}
-          </Text>
-        )}
-        {iconBack && (
-          <Feather
-            name={iconBack}
-            size={StyleConstants.Font.Size.M + 2}
-            color={theme[iconBackColor]}
-            style={styles.iconBack}
-          />
-        )}
-      </View>
+      {(content || iconBack) && (
+        <View style={styles.back}>
+          {content && (
+            <Text
+              style={[styles.content, { color: theme.secondary }]}
+              numberOfLines={1}
+            >
+              {content}
+            </Text>
+          )}
+          {iconBack && (
+            <Feather
+              name={iconBack}
+              size={StyleConstants.Font.Size.M + 2}
+              color={theme[iconBackColor]}
+              style={styles.iconBack}
+            />
+          )}
+        </View>
+      )}
     </View>
   )
 }
 
-const MenuItem: React.FC<Props> = ({ ...props }) => {
+const MenuRow: React.FC<Props> = ({ ...props }) => {
   const { theme } = useTheme()
 
   return props.onPress ? (
@@ -95,11 +97,13 @@ const styles = StyleSheet.create({
   },
   front: {
     flex: 1,
+    flexBasis: '70%',
     flexDirection: 'row',
     alignItems: 'center'
   },
   back: {
     flex: 1,
+    flexBasis: '30%',
     flexDirection: 'row',
     justifyContent: 'flex-end',
     alignItems: 'center'
@@ -108,6 +112,7 @@ const styles = StyleSheet.create({
     marginRight: 8
   },
   text: {
+    flex: 1,
     fontSize: StyleConstants.Font.Size.M
   },
   content: {
@@ -118,4 +123,4 @@ const styles = StyleSheet.create({
   }
 })
 
-export default MenuItem
+export default MenuRow