👉 스낵바는 토스트메세지와 유사한 기능입니다.

1.react-native-freelifemakers-ui NPM 모듈 설치하기

npm install react-native-freelifemakers-ui

2.Usage

1)Default SnackBar

import {
  FlmSnackBarProvider,
  useFlmSnackBar,
  FlmText,
  FlmButton,
} from 'react-native-freelifemakers-ui';

const FlmSnackBarApp = () => {
  const {showSnackBar} = useFlmSnackBar();
  return (
   <View style={styles.content}>
         <FlmButton
        title="기본 SnackBar/Default SnackBar"
        onPress={() => showSnackBar('기본 SnackBar 메시지입니다!')}
      />
    </View>
  );
}

export default function App() {
  return (
    <FlmSnackBarProvider>
      <View>
        <FlmSnackBarApp />
      </View>
    </FlmSnackBarProvider>
  );
}

2)Custom FlmSnackBar

import {FlmSnackBar, FlmButton} from 'react-native-freelifemakers-ui';

export default function App() {
  const [showCustomSnackBar, setShowCustomSnackBar] = useState(false);
  const [snackBarMessage, setSnackBarMessage] = useState('');
  const [snackBarType, setSnackBarType] = useState('info');

  const handleShowCustomSnackBar = (message, type) => {
    setSnackBarMessage(message);
    setSnackBarType(type);
    setShowCustomSnackBar(true);
  };

  return (
    <View>
      <FlmButton
        title="커스텀 SnackBar/Cusom SnackBar"
        onPress={() =>
          handleShowCustomSnackBar('사용자 정의 SnackBar', 'success')
        }
      />

      {showCustomSnackBar && (
        <FlmSnackBar
          message={snackBarMessage}
          type={snackBarType}
          duration={3000} // 직접 시간 설정(3s) / time Time setting(3s)
          onHide={() => setShowCustomSnackBar(false)}
          // 커스텀 스타일 추가 /.  adding custom style
          style={{
            backgroundColor: 'purple',
            bottom: 100,
            borderRadius: 20,
            borderWidth: 2,
            borderColor: 'white',
          }}
          textStyle={{
            color: 'lightgreen',
            fontWeight: 'bold',
          }}
        />
      )}
    </View>
  );
}

3.Full Code

1)Default SnackBar

// Default FlmSnackBar - Context API사용
import React from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import {
  FlmSnackBarProvider,
  useFlmSnackBar,
  FlmText,
  FlmButton,
} from "react-native-freelifemakers-ui";

const FlmSnackBarApp = () => {
  const { showSnackBar } = useFlmSnackBar();

  return (
    <View style={styles.content}>
      <FlmText style={styles.title}>SnackBar (Default)</FlmText>
      <FlmText>
        파라메터가 없으면 info가 기본 SnackBar타입으로 지정됩니다.
      </FlmText>
      <FlmText>
        If there is no parameter, the info is specified as the default snack bar
        type.
      </FlmText>
      <FlmButton
        title="기본 SnackBar/Default SnackBar"
        onPress={() => showSnackBar("기본 SnackBar 메시지입니다!")}
      />
      <View style={{ height: 10 }} />

      <FlmButton
        title="인포메이션 SnackBar/info SnackBar"
        onPress={() =>
          showSnackBar("인포메이션 SnackBar/info SnackBar", "info")
        }
      />
      <View style={{ height: 10 }} />

      <FlmButton
        title="오류 SnackBar / error SnackBar"
        onPress={() => showSnackBar("오류 SnackBar/error SnackBar", "error")}
      />
      <View style={{ height: 10 }} />

      <FlmButton
        title="성공 SnackBar (2초) / success SnackBar(2s)"
        onPress={() =>
          showSnackBar(
            "성공 SnackBar(2s) / success SnackBar(2s)",
            "success",
            2000,
          )
        }
      />
    </View>
  );
};

export default function App() {
  return (
    <FlmSnackBarProvider>
      <View style={styles.container}>
        <FlmSnackBarApp />
      </View>
    </FlmSnackBarProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  content: {
    alignItems: "center",
    justifyContent: "center",
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
  },
});

2)Custom FlmSnackBar

// Custom FlmSnackBar
import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
import {FlmSnackBar, FlmButton} from 'react-native-freelifemakers-ui';

export default function App() {
  const [showCustomSnackBar, setShowCustomSnackBar] = useState(false);
  const [snackBarMessage, setSnackBarMessage] = useState('');
  const [snackBarType, setSnackBarType] = useState('info');

  const handleShowCustomSnackBar = (message, type) => {
    setSnackBarMessage(message);
    setSnackBarType(type);
    setShowCustomSnackBar(true);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>사용자정의 SnackBar</Text>
      <Text style={styles.title}>Custom SnackBar</Text>
      <FlmButton
        title="커스텀 SnackBar/Cusom SnackBar"
        onPress={() =>
          handleShowCustomSnackBar('사용자 정의 SnackBar', 'success')
        }
      />

      {showCustomSnackBar && (
        <FlmSnackBar
          message={snackBarMessage}
          type={snackBarType}
          duration={3000} // 직접 시간 설정(3s) / Set time directly (3s)
          onHide={() => setShowCustomSnackBar(false)}
          // 여기에 원하는 스타일을 직접 주입할 수 있습니다!
          // You can add your own desired style here!
          style={{
            backgroundColor: 'purple',
            bottom: 100, // 더 위로 올림 / move higher
            borderRadius: 20,
            borderWidth: 2,
            borderColor: 'white',
          }}
          textStyle={{
            color: 'lightgreen',
            fontWeight: 'bold',
          }}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
});

4.ScreenShot