mynode/packages/app-mobile/components/screens/ConfigScreen/SettingsButton.tsx

import * as React from 'react';
import { FunctionComponent, ReactNode } from 'react';
import { View, Text, Button } from 'react-native';
import { ConfigScreenStyles } from './configScreenStyles';

interface Props {
	title: string;
	description?: string;
	clickHandler: ()=> void;
	styles: ConfigScreenStyles;
	disabled?: boolean;
	statusComponent?: ReactNode;
}

const SettingsButton: FunctionComponent<Props> = props => {
	const styles = props.styles.styleSheet;

	let descriptionComp = null;
	if (props.description) {
		descriptionComp = (
			<View style={{ flex: 1, marginTop: 10 }}>
				<Text style={styles.descriptionText}>{props.description}</Text>
			</View>
		);
	}

	return (
		<View style={styles.settingContainer}>
			<View style={{ flex: 1, flexDirection: 'column' }}>
				<View style={{ flex: 1 }}>
					<Button
						title={props.title}
						onPress={props.clickHandler}
						disabled={!!props.disabled}
						// Workaround for https://github.com/facebook/react-native/issues/54293:
						// Force the button to reload when the enabled state changes.
						key={`button-${!!props.disabled}`}
					/>
				</View>
				{props.statusComponent}
				{descriptionComp}
			</View>
		</View>
	);
};
export default SettingsButton;