fix: add horizontal margin to centered title

react-navigation · Nov 2, 2019 · 2ef5ad4 · 2ef5ad4
1 parent 74ee216
commit 2ef5ad4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/packages/stack/src/views/Header/HeaderSegment.tsx b/packages/stack/src/views/Header/HeaderSegment.tsx
@@ -328,10 +328,9 @@ export default class HeaderSegment extends React.Component<Props, State> {
             <Animated.View
               pointerEvents="box-none"
               style={[
-                headerTitleAlign === 'left' && {
-                  position: 'absolute',
-                  left: leftButton ? 72 : 16,
-                },
+                headerTitleAlign === 'left'
+                  ? { position: 'absolute', left: leftButton ? 72 : 16 }
+                  : { marginHorizontal: 18 },
                 titleStyle,
                 titleContainerStyle,
               ]}

diff --git a/packages/stack/src/views/Header/HeaderTitle.tsx b/packages/stack/src/views/Header/HeaderTitle.tsx
@@ -7,7 +7,9 @@ type Props = TextProps & {
 };
 
 export default function HeaderTitle({ style, ...rest }: Props) {
-  return <Animated.Text {...rest} style={[styles.title, style]} />;
+  return (
+    <Animated.Text numberOfLines={1} {...rest} style={[styles.title, style]} />
+  );
 }
 
 const styles = StyleSheet.create({