react-native-qa-menu
v0.5.0
Published
Helper menu for QAs to examine the apps during the development
Downloads
415
Maintainers
Readme
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