@uiw/react-native/lib/Result/index.js

UIW for React Native

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '@shopify/restyle';
function MaybeTextOrView({
  children,
  ...otherProps
}) {
  if (typeof children === 'string' || children && children.type.displayName === 'Text') {
    return <Text {...otherProps}>{children}</Text>;
  }
  return <View {...otherProps}>{children}</View>;
}
export default function Result(props) {
  const {
    style,
    title,
    message,
    img,
    ...otherProps
  } = props;
  const theme = useTheme();
  const styles = createStyles({
    bgColor: theme.colors.mask,
    textColor: theme.colors.primary_text,
    messageColor: theme.colors.text
  });
  return <View style={[styles.defalut, style]} {...otherProps}>
      {img}
      {title && <MaybeTextOrView style={styles.title}>{title}</MaybeTextOrView>}
      {message && <MaybeTextOrView style={styles.message}>{message}</MaybeTextOrView>}
    </View>;
}
Result.defaultProps = {};
function createStyles({
  bgColor,
  textColor,
  messageColor
}) {
  return StyleSheet.create({
    defalut: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: bgColor,
      paddingTop: 30,
      paddingBottom: 21
    },
    title: {
      fontSize: 21,
      marginTop: 15,
      paddingHorizontal: 15,
      color: textColor
    },
    message: {
      fontSize: 16,
      marginTop: 9,
      paddingHorizontal: 15,
      lineHeight: 18,
      color: messageColor
    }
  });
}