react-native-surfinn-alert
TypeScript icon, indicating that this package has built-in type declarations

0.0.24 • Public • Published

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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.0.240latest

Version History

VersionDownloads (Last 7 Days)Published
0.0.240
0.0.230
0.0.220
0.0.210
0.0.200
0.0.191
0.0.180
0.0.170
0.0.160
0.0.150
0.0.140
0.0.130
0.0.120
0.0.110
0.0.100
0.0.90
0.0.80
0.0.70
0.0.60
0.0.50
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i react-native-surfinn-alert

Weekly Downloads

1

Version

0.0.24

License

MIT

Unpacked Size

23.9 kB

Total Files

19

Last publish

Collaborators

  • hjyong