CodingByJerez / react-native-alert-notification

Toast notification and dialog box notification for react native
MIT License
89 stars 22 forks source link

Call with onPress #1

Closed lewatt23 closed 3 years ago

lewatt23 commented 3 years ago

Hello, I will first thank the author for the package. I am trying to use the package in a project and i will to like to call the Dialog as i to for a normal alert without an Onpress, just rendering it. is that posttible and exmaple of what am saying

const errorHandler = (error: Error, isFatal: boolean) => {
  <Root>
    {Dialog.show({
      type: ALERT_TYPE.DANGER,
      title: error.name,
      textBody: error?.response?.data?.message
        ? I18n.translate(error.response.data.message)
        : I18n.translate('UNKNOWN_ERROR'),
      button: 'close',
    })}
  </Root>;
};
CodingByJerez commented 3 years ago

Hello, I don't understand exactly what you want to do, but from your example : you must only call once upstream, preferably at the root of your project: "Root": you should not put it each time you use it in your: Handler

I will try to give you some possible use cases, hope this will solve your problem :)

// /src/App.tsx

const App: FunctionComponent = () => {
  return (
    <ReduxProvider store={store}>
      <NavigationContainer>
        <Root>                               <------------
          <Stack.Navigator>
            <Stack.Screen name="Page1" component={Page1} />
            <Stack.Screen name="Page2" component={Page2} />
          </Stack.Navigator>
        </Root>
      </NavigationContainer>
    </ReduxProvider>
  );
};
// /src/Screen/Page1.tsx

const Page1: FunctionComponent = () => {

  const { hasError } = useSelector((state: IRootState) => state.status);

  const clickHandler = (): void => {
    Dialog.show({
      type: ALERT_TYPE.SUCCESS,
      title: 'success',
      button: 'ok',
      textBody: 'text',
    });
  };

  useEffect(() => {
    if (hasError) {
      Dialog.show({
        type: ALERT_TYPE.ERROR,
        title: 'error',
        button: 'ok',
        textBody:  'text',
      });
    }
  }, [hasError]);

  return (
    <View>
      <Button title={'ex'} onPress={clickHandler} />
      //....
    </View>
  );
};
// /src/Screen/Page2.tsx

const Page2: FunctionComponent = () => {

  useEffect(() => {
    Dialog.show({
      type: ALERT_TYPE.SUCCESS,
      title: 'success',
      button: 'ok',
      textBody:  'text',
    });
  }, []);

  return (
    <View>

      //....
    </View>
  );
};
lewatt23 commented 3 years ago

okay thanks i get it now :)