@nghinv/react-native-alert

A custom alert component

Usage no npm install needed!

<script type="module">
  import nghinvReactNativeAlert from 'https://cdn.skypack.dev/@nghinv/react-native-alert';
</script>

README

@nghinv/react-native-alert

A custom alert component with react-native-reanimated

Version MIT License All Contributors

Installation

Installing the package

  • Use yarn
yarn add @nghinv/react-native-alert
  • Use npm
npm install @nghinv/react-native-alert

yarn add react-native-gesture-handler react-native-reanimated

How to use

  1. Wrapper AlertService in the Root Component
  import { AlertService } from '@nghinv/react-native-alert';

  ...
  return (
    <AlertService>
      <RootComponent />
    </AlertService>
  );
  ...
  1. Use Alert.alert() and Alert.close()
import React from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { AlertService, Alert, AlertView, AlertTitle } from '@nghinv/react-native-alert';

export default function Example() {
  const onPress = () => {
    Alert.alert(
      title: 'Thông báo',
      message: 'Lỗi kết nối mạng vui lòng thử lại sau',
        actions: [
        { 
          text: 'Cancel', 
          titleColor: 'orange', 
          autoDismiss: false, 
          onPress: () => {} 
        },
        { text: 'Next', disabled: true },
        { text: 'OK', autoDismiss: false },
      ],
    );
  };

  return (
    <AlertService>
      <View style={styles.container}>
        <Button title='Show alert' onPress={onPress} />
      </View>
    </AlertService>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'skyblue'
  }
});

Credits