Messages

Component to display messages that require attention with colored message blocks, to emphasize part of your page.

The FlexNative Messages is part of the FlexNative Framework and is available under the @flexnative/messages NPM package.

Dependencies

• @flexnative/theme-context

Installation

You can installing FlexNative Messages packages using npm:

npm i @flexnative/messages

API

import Message from '@flexnative/messages';

Component

Message

Type: React.PureComponent<MessageBoxProps>

This component uses the ThemeContext to apply theme-based styles. Component extending React.PureComponent, which is optimized for performance by implementing a shallow prop and state comparison.

Properties

info

MessageBoxProps extends ViewProps from React Native, so any prop of ViewProps it is applicable on Message component.

Name	Type	Required	Default Value	Description
radius	BorderRadius	false	medium	Message box border radius. Specifies the roundness of the message box corners.
borderWidth	BorderWidth	false	node	Optional message box borders width. Specifies the thickness of the message box borders.
borderColor	ColorValue	false	undefined	Specifies the color of the message box borders. Borders color according to react-native ColorValue.
fill	FillMode	false	ghost	Fill Mode of the message box. Determines the appearance of the message box. warning To have appearance for ghost with custom color you should use hex colors.
size	Sizes	false	normal	Message box size. Defines the overall size of the message box component.
color	Color	false	theme.color.default	Color by theme or a custom color according react-native ColorValue. Sets the primary color of the message box, either by theme or a specified color code.
text	string	false	undefined	String that contains the text or message to be displayed inside the message box. If the children property is used, this text property will be ignored.
children	React.ReactNode	false	undefined	Children to display inside the Message box. Can be any React elements that will be rendered within the message box.

FillMode

One of 'ghost' | 'solid'

Name	Type	Description
ghost	string	Message Box with a transparent background.
solid	string	Message Box with a solid background color.

Use case Examples

The following example demonstrates the Message component in action.

Color

Preview

default Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

primary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

secondary Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

info Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

success Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

warning Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

error Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

dark Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

light Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

crimson Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

#ed143d Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

rgb(237, 20, 61) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

rgba(237, 20, 61, 0.5) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-04 22:38:11
 * @ Description: Examples of Message component with different colors.
 */

import React from "react";

import Message from '@flexnative/messages';
import { Color } from "@flexnative/theme-context";
import { frameworkColors } from "../../constants";
import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        {
          frameworkColors.map((color, index) =>
            <Message key={index} text={messageTemplate(color as string)} color={color as Color} />
          )
        }

        <Message text={messageTemplate('crimson')} color={'crimson'} />
        <Message text={messageTemplate('#ed143d')} color={'#ed143d'} />
        <Message text={messageTemplate('rgb(237, 20, 61)')} color={'rgb(237, 20, 61)'} />
        <Message text={messageTemplate('rgba(237, 20, 61, 0.5)')} color={'rgba(237, 20, 61, 0.5)'} />
      </div>
    );
  }
}

BorderColors

borderColors will have effect effect only when borderWidth has a value.

Preview

`crimson` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

#ed143d Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

rgb(237, 20, 61) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

rgba(237, 20, 61, 0.5) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-04 22:56:37
 * @ Description: Examples of Message component with different borders colors.
 */

import React from "react";
import Message from "@flexnative/messages";
import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message borderColor='crimson' borderWidth='hairline' text={messageTemplate('`crimson`')}  />
        <Message borderColor='#ed143d' borderWidth='hairline' text={messageTemplate('#ed143d')} />
        <Message borderColor='rgb(237, 20, 61)' borderWidth='hairline' text={messageTemplate('rgb(237, 20, 61)')}/>
        <Message borderColor='rgba(237, 20, 61, 0.5)' borderWidth='hairline' text={messageTemplate('rgba(237, 20, 61, 0.5)')} />    
      </div>
    );
  }
}

BorderRadius

Preview

`none` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`small` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`medium` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`large` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`full` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-04 23:59:38
 * @ Description: Examples of Message component with different border radius.
 */

import React from "react";
import Message from "@flexnative/messages";
import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message color='primary' radius='none' text={messageTemplate('`none`')}/>
        <Message color='primary' radius='small' text={messageTemplate('`small`')} />
        <Message color='primary' radius='medium' text={messageTemplate('`medium`')}  />
        <Message color='primary' radius='large' text={messageTemplate('`large`')} />
        <Message color='primary' radius='full' text={messageTemplate('`full`')} />
        <Message color='primary' radius={12} text={messageTemplate('12')} />
      </div>
    );
  }
}

BorderWidth

Preview

`none` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`hairline` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`thin` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`base` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`thick` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 00:07:04
 * @ Description: Examples of Message component with different border width.
 */


import React from "react";
import Message from "@flexnative/messages";

import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message color='primary' borderWidth='none' text={messageTemplate('`none`')}/>
        <Message color='primary' borderWidth='hairline' text={messageTemplate('`hairline`')} />
        <Message color='primary' borderWidth='thin' text={messageTemplate('`thin`')}  />
        <Message color='primary' borderWidth='base' text={messageTemplate('`base`')} />
        <Message color='primary' borderWidth='thick' text={messageTemplate('`thick`')} />
        <Message color='primary' borderWidth={5} text={messageTemplate('5')} />
      </div>
    );
  }
}

BorderWidth

Preview

`none` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`hairline` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`thin` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`base` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`thick` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 00:07:04
 * @ Description: Examples of Message component with different border width.
 */


import React from "react";
import Message from "@flexnative/messages";

import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message color='primary' borderWidth='none' text={messageTemplate('`none`')}/>
        <Message color='primary' borderWidth='hairline' text={messageTemplate('`hairline`')} />
        <Message color='primary' borderWidth='thin' text={messageTemplate('`thin`')}  />
        <Message color='primary' borderWidth='base' text={messageTemplate('`base`')} />
        <Message color='primary' borderWidth='thick' text={messageTemplate('`thick`')} />
        <Message color='primary' borderWidth={5} text={messageTemplate('5')} />
      </div>
    );
  }
}

FillMode

Preview

`ghost` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

`ghost` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

`ghost` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

ghost To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

ghost To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

ghost To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

`solid` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

`solid` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

`solid` To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

solid To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

solid To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

solid To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 00:22:43
 * @ Description: Examples of Message component with fill mode.
 */

import React from "react";
import Message from "@flexnative/messages";
import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message fill='ghost' color='primary' text={messageTemplate('`ghost`', ghostMessage)}/>
        <Message fill='ghost' color='warning' text={messageTemplate('`ghost`', ghostMessage)} />
        <Message fill='ghost' color='crimson' text={messageTemplate('`ghost`', ghostMessage)}  />
        <Message fill='ghost' color={'#ed143d'} text={messageTemplate('ghost', ghostMessage)} />
        <Message fill='ghost' color={'rgb(237, 20, 61)'} text={messageTemplate('ghost', ghostMessage)}/>
        <Message fill='ghost' color={'rgba(237, 20, 61, 0.5)'} text={messageTemplate('ghost', ghostMessage)} />
        <Message fill='solid' color='primary' text={messageTemplate('`solid`', ghostMessage)} />
        <Message fill='solid' color='warning' text={messageTemplate('`solid`', ghostMessage)} />
        <Message fill='solid' color='crimson' text={messageTemplate('`solid`', ghostMessage)}  />
        <Message fill='solid' color={'#ed143d'} text={messageTemplate('solid', ghostMessage)} />
        <Message fill='solid' color={'rgb(237, 20, 61)'} text={messageTemplate('solid', ghostMessage)}/>
        <Message fill='solid' color={'rgba(237, 20, 61, 0.5)'} text={messageTemplate('solid', ghostMessage)} />
      </div>
    );
  }
}

const ghostMessage = "To have nice effect for fill='ghost' type using custom colors use hex color with a specific opacity.";

Size

Preview

`small` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`default` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`medium` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

`large` Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 00:27:08
 * @ Description: Examples of Message component with different sizes.
 */

import React from "react";
import Message from "@flexnative/messages";
import { messageTemplate } from "./utilities";


export default class extends React.PureComponent {
  public render() {
    return (
      <div className='example-block'>
        <Message color='info' size='small' text={messageTemplate('`small`')} />
        <Message color='info' text={messageTemplate('`default`')}/>
        <Message color='info' size='medium' text={messageTemplate('`medium`')}  />
        <Message color='info' size='large' text={messageTemplate('`large`')} />
        <Message color='info' size={5} text={messageTemplate('5')} />
      </div>
    );
  }
}

Children

Preview

Using prop children to render custom React Element in Message component.

Code

/**
 * @ Author: Redon Alla
 * @ Create Time: 2025-01-04 22:18:34
 * @ Modified by: Redon Alla
 * @ Modified time: 2025-01-05 00:43:44
 * @ Description: Example of Message component rendering custom component.
 */


import React from "react";
import { StyleSheet, Text } from "react-native";

import Message from "@flexnative/messages";
import { useThemeContext } from "@flexnative/theme-context";


export default function Children() {
  const theme = useThemeContext();

  const codeStyle = () => {
    return {
      color: theme.colors.text,
      backgroundColor: theme.colors.warning
    }
  }

  return (
    <div className='example-block'>
      <Message>
        <Text style={{color: theme.colors.warning}}>
          Using prop <Text style={[styles.code, codeStyle()]}>children</Text> to render
          custom <Text style={[styles.code, codeStyle()]}>
            React Element 
          </Text> in <Text style={[styles.code, codeStyle()]}>Message</Text> component.
        </Text>
      </Message>
    </div>
  );
}

const styles = StyleSheet.create({
  code: {
    paddingHorizontal: 5,
    lineHeight: 20,
    borderRadius: 3,
    fontFamily: 'Italic',
  }
});

Playground

Live Editor

render(<Message color='info' size='medium' text='Play with props to see live changes' />);

Result

Loading...