react-native-windows 0.78.6 → 0.79.0-preview.1

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -79,26 +79,27 @@ class LogBoxLog {
   count: number;
   level: LogLevel;
   codeFrame: ?CodeFrame;
+  componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
   extraData: mixed | void;
   symbolicated:
-    | $ReadOnly<{|error: null, stack: null, status: 'NONE'|}>
-    | $ReadOnly<{|error: null, stack: null, status: 'PENDING'|}>
-    | $ReadOnly<{|error: null, stack: Stack, status: 'COMPLETE'|}>
-    | $ReadOnly<{|error: Error, stack: null, status: 'FAILED'|}> = {
+    | $ReadOnly<{error: null, stack: null, status: 'NONE'}>
+    | $ReadOnly<{error: null, stack: null, status: 'PENDING'}>
+    | $ReadOnly<{error: null, stack: Stack, status: 'COMPLETE'}>
+    | $ReadOnly<{error: Error, stack: null, status: 'FAILED'}> = {
     error: null,
     stack: null,
     status: 'NONE',
   };
   symbolicatedComponentStack:
-    | $ReadOnly<{|error: null, componentStack: null, status: 'NONE'|}>
-    | $ReadOnly<{|error: null, componentStack: null, status: 'PENDING'|}>
-    | $ReadOnly<{|
+    | $ReadOnly<{error: null, componentStack: null, status: 'NONE'}>
+    | $ReadOnly<{error: null, componentStack: null, status: 'PENDING'}>
+    | $ReadOnly<{
         error: null,
         componentStack: ComponentStack,
         status: 'COMPLETE',
-      |}>
-    | $ReadOnly<{|error: Error, componentStack: null, status: 'FAILED'|}> = {
+      }>
+    | $ReadOnly<{error: Error, componentStack: null, status: 'FAILED'}> = {
     error: null,
     componentStack: null,
     status: 'NONE',
@@ -140,8 +141,18 @@ class LogBoxLog {
   }
 
   retrySymbolicate(callback?: (status: SymbolicationStatus) => void): void {
+    let retry = false;
     if (this.symbolicated.status !== 'COMPLETE') {
       LogBoxSymbolication.deleteStack(this.stack);
+      retry = true;
+    }
+    if (this.symbolicatedComponentStack.status !== 'COMPLETE') {
+      LogBoxSymbolication.deleteStack(
+        convertComponentStateToStack(this.componentStack),
+      );
+      retry = true;
+    }
+    if (retry) {
       this.handleSymbolicate(callback);
     }
   }
@@ -153,7 +164,10 @@ class LogBoxLog {
   }
 
   handleSymbolicate(callback?: (status: SymbolicationStatus) => void): void {
-    if (this.symbolicated.status !== 'PENDING') {
+    if (
+      this.symbolicated.status !== 'PENDING' &&
+      this.symbolicated.status !== 'COMPLETE'
+    ) {
       this.updateStatus(null, null, null, callback);
       LogBoxSymbolication.symbolicate(this.stack, this.extraData).then(
         data => {
@@ -163,25 +177,30 @@ class LogBoxLog {
           this.updateStatus(error, null, null, callback);
         },
       );
-      if (this.componentStack != null && this.componentStackType === 'stack') {
-        this.updateComponentStackStatus(null, null, null, callback);
-        const componentStackFrames = convertComponentStateToStack(
-          this.componentStack,
-        );
-        LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
-          data => {
-            this.updateComponentStackStatus(
-              null,
-              convertStackToComponentStack(data.stack),
-              null,
-              callback,
-            );
-          },
-          error => {
-            this.updateComponentStackStatus(error, null, null, callback);
-          },
-        );
-      }
+    }
+    if (
+      this.componentStack != null &&
+      this.componentStackType === 'stack' &&
+      this.symbolicatedComponentStack.status !== 'PENDING' &&
+      this.symbolicatedComponentStack.status !== 'COMPLETE'
+    ) {
+      this.updateComponentStackStatus(null, null, null, callback);
+      const componentStackFrames = convertComponentStateToStack(
+        this.componentStack,
+      );
+      LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+        data => {
+          this.updateComponentStackStatus(
+            null,
+            convertStackToComponentStack(data.stack),
+            data?.codeFrame,
+            callback,
+          );
+        },
+        error => {
+          this.updateComponentStackStatus(error, null, null, callback);
+        },
+      );
     }
   }
 
@@ -235,6 +254,9 @@ class LogBoxLog {
         status: 'FAILED',
       };
     } else if (componentStack != null) {
+      if (codeFrame) {
+        this.componentCodeFrame = codeFrame;
+      }
       this.symbolicatedComponentStack = {
         error: null,
         componentStack,

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -107,7 +107,7 @@ export type ExtendedExceptionData = ExceptionData & {
   ...
 };
 export type Category = string;
-export type CodeFrame = $ReadOnly<{|
+export type CodeFrame = $ReadOnly<{
   content: string,
   location: ?{
     row: number,
@@ -120,26 +120,26 @@ export type CodeFrame = $ReadOnly<{|
   // we gained the ability to use the collapse flag, but
   // it is not integrated into the LogBox UI.
   collapse?: boolean,
-|}>;
-export type Message = $ReadOnly<{|
+}>;
+export type Message = $ReadOnly<{
   content: string,
   substitutions: $ReadOnlyArray<
-    $ReadOnly<{|
+    $ReadOnly<{
       length: number,
       offset: number,
-    |}>,
+    }>,
   >,
-|}>;
+}>;
 
 export type ComponentStack = $ReadOnlyArray<CodeFrame>;
 export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{|
+export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{
   category: Category,
   message: Message,
-|}> {
+}> {
   const categoryParts = [];
   const contentParts = [];
   const substitutionOffsets = [];
@@ -456,12 +456,12 @@ export function withoutANSIColorStyles(message: mixed): mixed {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
+export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
-|} {
+} {
   const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];

package/Libraries/LogBox/LogBox.js

@@ -14,6 +14,7 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
 import {hasComponentStack} from './Data/parseLogBoxLog';
+import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
@@ -24,7 +25,7 @@ interface ILogBox {
   uninstall(): void;
   isInstalled(): boolean;
   ignoreLogs($ReadOnlyArray<IgnorePattern>): void;
-  ignoreAllLogs(?boolean): void;
+  ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
   addException(error: ExtendedExceptionData): void;
@@ -115,10 +116,18 @@ if (__DEV__) {
       return isLogBoxInstalled;
     },
 
+    /**
+     * Silence any logs that match the given strings or regexes.
+     */
     ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
       LogBoxData.addIgnorePatterns(patterns);
     },
 
+    /**
+     * Toggle error and warning notifications
+     * Note: this only disables notifications, uncaught errors will still open a full screen LogBox.
+     * @param ignore whether to ignore logs or not
+     */
     ignoreAllLogs(value?: ?boolean): void {
       LogBoxData.setDisabled(value == null ? true : value);
     },
@@ -192,9 +201,20 @@ if (__DEV__) {
     }
 
     try {
+      let stack;
+      // $FlowFixMe[prop-missing] Not added to flow types yet.
+      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
+        stack = React.captureOwnerStack();
+        if (!hasComponentStack(args)) {
+          if (stack != null && stack !== '') {
+            args[0] = args[0] += '%s';
+            args.push(stack);
+          }
+        }
+      }
       if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
         // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.u
+        // component stacks, otherwise pass the error through.
         //
         // By passing through, this will get picked up by the React console override,
         // potentially adding the component stack. React then passes it back to the

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -16,11 +16,11 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
   render(): React.Node {
@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -16,11 +16,11 @@ import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export function _LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -70,7 +70,9 @@ export default function Ansi({
   /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
    * LTI update could not be added via codemod */
   const getText = (content, key) => {
-    if (key === 1) {
+    if (key === 0) {
+      return LRM + content;
+    } else if (key === 1) {
       // Remove the vertical bar after line numbers
       return content.replace(/\| $/, ' ');
     } else if (key === 2 && commonWhitespaceLength < Infinity) {
@@ -86,7 +88,6 @@ export default function Ansi({
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
           <Text>
-            {LRM}
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -98,7 +99,10 @@ export default function Ansi({
                       backgroundColor: bundle.bg && COLORS[bundle.bg],
                     };
               return (
-                <Text style={[style, textStyle]} key={key}>
+                <Text
+                  id="logbox_codeframe_contents_text"
+                  style={[style, textStyle]}
+                  key={key}>
                   {getText(bundle.content, key)}
                 </Text>
               );

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -10,7 +10,7 @@
 
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {PressEvent} from '../../Types/CoreEventTypes';
+import type {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 import TouchableWithoutFeedback from '../../Components/Touchable/TouchableWithoutFeedback';
 import View from '../../Components/View/View';
@@ -18,16 +18,17 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  backgroundColor: $ReadOnly<{|
+type Props = $ReadOnly<{
+  id?: string,
+  backgroundColor: $ReadOnly<{
     default: string,
     pressed: string,
-  |}>,
+  }>,
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
-  onPress?: ?(event: PressEvent) => void,
+  onPress?: ?(event: GestureResponderEvent) => void,
   style?: ViewStyleProp,
-|}>;
+}>;
 
 function LogBoxButton(props: Props): React.Node {
   const [pressed, setPressed] = React.useState(false);
@@ -42,6 +43,7 @@ function LogBoxButton(props: Props): React.Node {
 
   const content = (
     <View
+      id={props.id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -64,7 +64,7 @@ export default function LogBoxInspector(props: Props): React.Node {
   }
 
   return (
-    <View style={styles.root}>
+    <View id="logbox_inspector" style={styles.root}>
       <LogBoxInspectorHeader
         onSelectIndex={props.onChangeSelectedIndex}
         selectedIndex={selectedIndex}

package/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -52,7 +52,10 @@ export default function LogBoxInspectorBody(props: {
           title={headerTitle}
         />
         <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+          <LogBoxInspectorCodeFrame
+            codeFrame={props.log.codeFrame}
+            componentCodeFrame={props.log.componentCodeFrame}
+          />
           <LogBoxInspectorReactFrames log={props.log} />
           <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
         </ScrollView>
@@ -68,7 +71,10 @@ export default function LogBoxInspectorBody(props: {
         level={props.log.level}
         title={headerTitle}
       />
-      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+      <LogBoxInspectorCodeFrame
+        codeFrame={props.log.codeFrame}
+        componentCodeFrame={props.log.componentCodeFrame}
+      />
       <LogBoxInspectorReactFrames log={props.log} />
       <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
     </ScrollView>

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView
-            horizontal
-            contentContainerStyle={styles.contentContainer}>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.windows.js

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView
-            horizontal
-            contentContainerStyle={styles.contentContainer}>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -28,7 +28,7 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
     return (
       <View style={styles.root}>
         <View style={styles.button}>
-          <Text style={styles.syntaxErrorText}>
+          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
@@ -38,8 +38,16 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
-      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_dismiss"
+        text="Dismiss"
+        onPress={props.onDismiss}
+      />
+      <LogBoxInspectorFooterButton
+        id="logbox_footer_button_minimize"
+        text="Minimize"
+        onPress={props.onMinimize}
+      />
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -17,6 +17,7 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
 type ButtonProps = $ReadOnly<{
+  id: string,
   onPress: () => void,
   text: string,
 }>;
@@ -27,6 +28,7 @@ export default function LogBoxInspectorFooterButton(
   return (
     <SafeAreaView style={styles.button}>
       <LogBoxButton
+        id={props.id}
         backgroundColor={{
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundDarkColor(),

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -36,7 +36,9 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
       <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
-            <Text style={styles.titleText}>Failed to compile</Text>
+            <Text style={styles.titleText} id="logbox_header_title_text">
+              Failed to compile
+            </Text>
           </View>
         </View>
       </LogBoxInspectorHeaderSafeArea>
@@ -54,15 +56,19 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
     <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_prev"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-left.png')}
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
-          <Text style={styles.titleText}>{titleText}</Text>
+          <Text style={styles.titleText} id="logbox_header_title_text">
+            {titleText}
+          </Text>
         </View>
         <LogBoxInspectorHeaderButton
+          id="logbox_header_button_next"
           disabled={props.total <= 1}
           level={props.level}
           image={require('./LogBoxImages/chevron-right.png')}