react-native-surfinn-alert

React Native Surfinn Alert

This is a custom component of React Native, a fully customized pop-up compatible with iOS and Android.

It just provides a pop-up container with a background, so you can implement your own view.

Install

Install reanimated v2 first. see https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

npm

npm install react-native-surfinn-alert

yarn

yarn add react-native-surfinn-alert

Usage

Add AlertProvider to top of your app

import {AlertProvider} from 'react-native-surfinn-alert';

<AlertProvider>
  
    ...
  
</AlertProvider>;

and add Alert to your screen or component

import {Alert} from 'react-native-surfinn-alert';

const alertRef = React.useRef(null);

const open = () => {
  alertRef.current?.open();
};

const close = () => {
  alertRef.current?.close();
};

return (
  <View>
    <Button onPress={open} title="Open Alert" />

    <Alert ref={alertRef} backdrop backdropOpacity={0.3}>
      <View style={styles.alert}>
        <Text>Alert Title</Text>
        <Text>Alert Messages</Text>
        <Button onPress={close} title="Close Alert" />
      </View>
    </Alert>
  </View>
);

const styles = StyleSheet.create({
  alert: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 10,
  }
})

See more https://github.com/hjyong/react-native-surfinn-alert.git