react-native-qa-menu

Helper menu for QAs to examine the apps during the development

Installation

npm install react-native-qa-menu

or yarn:

yarn add react-native-qa-menu

This library needs these dependencies to be installed in your project before you can use it:

yarn add @react-native-clipboard/clipboard react-native-device-info react-native-file-logger react-native-share

Example

import React, { useEffect, useRef } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { QaMenu, QaMenuRefMethods } from 'react-native-qa-menu'

export default function App() {
  const ref = useRef<QaMenuRefMethods>(null)

  useEffect(() => {
    console.log('This is a log message', {
      array: [1, 2, 3],
      bool: true,
      object: { foo: 'bar' },
    })
    console.log({
      array: [1, 2, 3],
      bool: true,
      object: { foo: 'bar' },
    })
    console.error(new Error('This is an error message'))
    console.warn('This is a warning message')
    console.info('This is an info message')
    console.debug('This is a debug message')
    console.log(`%c Log message with color`, 'color: rgb(118, 74, 188)', { foo: 'bar' })
  }, [])

  return (
    <QaMenu
      visible
      ref={ref}
      quickActions={[{ title: 'Logout', onPress: () => {}, closedOnPress: true }]}
      state={{
        array: [1, 2, 3],
        bool: true,
        object: { foo: 'bar' },
      }}
    >
      <View style={styles.customSection}>
        <Text>This is another section rendered as children prop</Text>
      </View>
    </QaMenu>
  )
}

const styles = StyleSheet.create({
  customSection: {
    marginTop: 24,
  },
})

Properties

Prop	Type	Required	Default	Description
visible	boolean	true		Whether to show the menu or not
isCircle	boolean	false	true	Display the draggable menu as circle
x	number	false	Screen width - 75	Position x of the draggable menu
y	number	false	Screen height - 100	Position y of the draggable menu
maxLogsCount	number	false	100	Maximum number of logs shown in app
logFilters	string[]	false	[]	Filter out unwanted logs
draggableDisplayText	string	false	<app_version>	Displaying text on the draggable menu
draggableSize	number	false	50	Draggable menu's size
quickActions	Array<{ title: string; onPress: () => void; closedOnPress?: boolean }>	false	[]	Quick actions added to the menu
extraAppInfo	Array<{ title: string; description: string }>	false	[]	Extra app info added to the menu
state	any	false	undefined	Any object that we'd like to display in the JSON tree Eg. redux store state, react navigation state, react-query's state
styles	object	false	{}	Custom styles applied to the elements inside the QA menu
styles.headerTitleStyle	TextStyle	false	undefined	Text style applied to the menu header's title
styles.sectionTitleStyle	TextStyle	false	undefined	Text style applied to the section's title
styles.infoTitleStyle	TextStyle	false	undefined	Text style applied to the app info's title
styles.infoDescriptionStyle	TextStyle	false	undefined	Text style applied to the app info's description
styles.quickActionButtonStyle	ViewStyle	false	undefined	View style applied to the quick action button
styles.quickActionButtonTitleStyle	TextStyle	false	undefined	Text style applied to the quick action button's title
styles.logTimestampStyle	TextStyle	false	undefined	Text style applied to the log's timestamp text
styles.logCopyButtonStyle	ViewStyle	false	undefined	View style applied to the log's copy button
styles.logMessageStyle	TextStyle	false	undefined	Text style applied to the log's message text
errorColor	ColorValue	false	"crimson"	Color applied when error state
successColor	ColorValue	false	"forestgreen"	Color applied for normal state
warningColor	ColorValue	false	"lightgoldenrodyellow"	Color applied when warning state

Methods

Func	Description
open	Open the menu's content modal
close	Close the menu's content modal

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---