Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

use as function in app.js

See original GitHub issue

Hi ! Amazing lib. Is it possible to use this component as a function for all the app ?

In each compo, call alert like this alert('title', 'msq', () => ok(), () => cancel())

Issue Analytics

State:
Created 3 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

3reactions

lokomasscommented, Feb 7, 2021

Here is a functionnal code for what I want 😃

#Alert.js
import React from 'react'
import AwesomeAlert from 'react-native-awesome-alerts'

const initial = {
  title: '',
  message: '',
  show: false,
  cancelText: '',
  confirmText: '',
  onCancelPressed: () => {},
  onConfirmPressed: () => {}
}

export const context = React.createContext(initial)
const { Provider } = context

export default props => {
  const [state, setState] = React.useState(initial)
  const alert = (title, message, cancel, confirm, onCancel, onConfirm) => {
    setState({
      show: true,
      title: title,
      message: message,
      cancelText: cancel,
      confirmText: confirm,
      onCancelPressed: () => {
        onCancel()
        close()
      },
      onConfirmPressed: () => {
        onConfirm()
        close()
      }
    })
  }
  const close = () => {
    setState(initial)
  }
  return (
    <>
      <Provider value={alert}>
        {props.children}
      </Provider>
      <AwesomeAlert
        {...state}
        close={close}
        showCancelButton={true}
        showConfirmButton={true}
        cancelButtonColor="#d0d0d0"
        closeOnTouchOutside={false}
        confirmButtonColor="#dd6b55"
        closeOnHardwareBackPress={false}
      />
    </>
  )
}


#useAlert.js
import React from 'react'
import {
  context
} from './Alert'

function useAlert() {
  return React.useContext(context)
}

export default useAlert

#app.js
import React from 'react'
import Alert from './Alert'
import useAlert from './useAlert'
import Store from './Redux/Store/Store'
import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'
import {
  Provider
} from 'react-redux'

const App = () => {
  return (
    <Provider store={Store}>
      <Alert>
        <View style={styles.content}>
          <Child/>
        </View>
      </Alert>
    </Provider>
  )
}

const Child = () => {
  const alert = useAlert()
  return (
    <TouchableOpacity
      style={{
        width: 100,
        height: 50,
        alignItems: 'center',
        backgroundColor: 'green',
        justifyContent: 'center'
      }}
      onPress={() => {
        alert(
          'test',
          'message',
          'ko',
          'ok',
          () => {
            //
          },
          () => {
            //
          }
        )
      }}
    >
      <Text>GO</Text>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  content: {
    flex:1,
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App

Enjoy

0reactions

rishabhbhatiacommented, Feb 7, 2021

have a good one!