React Native Alert Component

A beautifully designed and responsive inline Alert component made with React Native for iOS and Android mobile and Tablet components.

Dark Theme

Light Theme

Why use react-native-alert-component?

Our research study on user experience found that small-screen devices, such as mobile phones, have a confusing layout that becomes even more uncomfortable when alert messages appear on top of an existing page. These alert messages are often not responsive on all screen sizes and types, which can hinder the user experience. For example, when a user enters an invalid email address while trying to log in, they may be repeatedly interrupted by error messages that obstruct the functionality of the app.

To address this issue, we have introduced in-line alert messages that are integrated with the app's layout. These messages can be dismissed by the user and do not interfere with the app's ongoing functionality. The purpose of these messages is to simply remind the user that they entered something incorrectly and provide a way to resolve it, without hindering their ability to use the app.

Getting Started

• Install the component in your react native app:

npm install react-native-alert-component --save

• Import:

import AlertComponent from 'react-native-alert-component';

• Use:

<AlertComponent message="This is a warning message." colorScheme="light" type="warning" />

Properties (Props)

• type ('message' | 'warning' | 'error'): This property indicates if the alert is a message, warning, or an error. Each type is identified with a different color and icon. By default, type = "message"

• message (JSX element | string): This property specifies the message to display in the alert.

• colorScheme ('light' | 'dark'): This property sets the color scheme of the progressbar to either light or dark. To get the device's default color scheme, you can use the useColorScheme hook (https://reactnative.dev/docs/usecolorscheme). By default, colorScheme = 'light'

Example usage:

import { StatusBar } from 'expo-status-bar';
import { SafeAreaView, StyleSheet, View, Text } from 'react-native';
import AlertComponent from "react-native-alert-component";


export default function App() {
  return (
    <SafeAreaView style={{ backgroundColor: '#fff', flex: 1, alignItems: 'center' }}>
      <View>
        <Text style={{ fontSize: 24, color: '#000', paddingVertical: 15, fontWeight: 'bold' }}>
          React Native Alert Component
        </Text>
      </View>
      <View style={styles.container}>
        <AlertComponent message="This is a simple message." colorScheme="light" type="message" />
        <AlertComponent message="This is a warning message." colorScheme="light" type="warning" />
        <AlertComponent message="This is an error message." colorScheme="light" type="error" />
      </View>
      <StatusBar style="light" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    marginVertical: 25,
    alignItems: 'center',
    borderRadius: 10
  },
});

Contributor Details

Our commitment at Continuity Browser is to foster collaboration with the open-source community and provide developers with the tools they need to succeed.

Continuity Browser provides you with a seamless, secure, and productive browsing experience.

You can download the app here: https://continuitybrowser.com/#download

With our app, you can easily sync all your tabs across all your devices in real-time.

Continuity Browser also prioritizes your privacy and security by providing better privacy reports and prevention measures than mainstream browsers like Google Chrome and Apple Safari.

Furthermore, our app features a built-in ChatGPT in the browser that allows you to get results with the click of a button from Google Search, making your browsing experience even more productive.

You can join our Discord Community at https://discord.gg/TwJ863WJsQ to connect with our open source community, users, developers, and provide feedback to the Continuity Browser Team.

Thank you 🎉

Continuity Browser Team ❤️