Merge pull request #12 from alantoa/fix/imporve-notes

feat(new): supports custom and without icon
nandorojo · Mar 3, 2023 · d7ac140 · d7ac140
2 parents ce5434a + ed494bb
commit d7ac140
Show file tree

Hide file tree

Showing 5 changed files with 265 additions and 109 deletions.
diff --git a/README.md b/README.md
@@ -49,9 +49,9 @@ You can also `Burnt.alert()` and `Burnt.dismissAllAlerts()`.
 
 - [x] iOS support
 - [x] Android support
+- [x] Custom iOS icons
 - [ ] Web support (could be cool to use Radix UI...but maybe I'll leave that
       part up to Zeego)
-- [ ] Custom iOS icons
 
 Chances are, I'll keep this lib to iOS & Android only, and then another library
 can consume it to build a broader API out on the JS side with Web support, such
@@ -132,7 +132,7 @@ _The API changed since recording this video. It now uses object syntax._
 Burnt.toast({
   title: 'Congrats!', // required
 
-  preset: 'done',     // or "error"
+  preset: 'done',     // or "error", "none", "custom"
 
   message: '',        // optional
 
@@ -149,9 +149,14 @@ Burnt.toast({
     iconSize: {
       height: 24,
       width: 24,
+  },
+  icon: {
+    ios: {
+      // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
+      name: "checkmark.seal",
+      color: "#1D9BF0",
     },
-
-    // TODO: custom SF Symbols...
+  },
   },
 })
 ```
@@ -171,7 +176,7 @@ export const alert = () => {
   Burnt.alert({
     title: "Congrats!", // required
 
-    preset: "done", // or "error", "heart"
+    preset: "done", // or "error", "heart", "custom"
 
     message: "", // optional
 
@@ -183,7 +188,13 @@ export const alert = () => {
         height: 24,
         width: 24,
       },
-      // TODO: custom SF Symbols...
+    },
+    icon: {
+      ios: {
+        // SF Symbol. For a full list, see https://developer.apple.com/sf-symbols/.
+        name: "checkmark.seal",
+        color: "#1D9BF0",
+      },
     },
   });
 };

diff --git a/example/App.tsx b/example/App.tsx
@@ -57,6 +57,25 @@ export default function App() {
         Loading Alert
       </Text>
 
+      <View style={{ height: 16 }} />
+      <Text
+        style={[styles.text, styles.yellow]}
+        onPress={async () => {
+          Burnt.alert({
+            title: "Verified account",
+            preset: "custom",
+            icon: {
+              ios: {
+                name: "checkmark.seal",
+                color: "#1D9BF0",
+              },
+            },
+          });
+        }}
+      >
+        Custom Icon Alert
+      </Text>
+
       <View style={{ height: 16 }} />
 
       <Text
@@ -86,6 +105,36 @@ export default function App() {
       >
         Success Toast
       </Text>
+      <View style={{ height: 16 }} />
+      <Text
+        style={[styles.text, styles.blue]}
+        onPress={async () => {
+          Burnt.toast({
+            title: "This is a large text and without icon toast!!!",
+            preset: "none",
+          });
+        }}
+      >
+        Without Icon Toast
+      </Text>
+      <View style={{ height: 16 }} />
+      <Text
+        style={[styles.text, styles.blue]}
+        onPress={async () => {
+          Burnt.toast({
+            title: "This is a large text and custom icon toast!!!",
+            preset: "custom",
+            icon: {
+              ios: {
+                name: "sparkle",
+                color: "#F7A51D",
+              },
+            },
+          });
+        }}
+      >
+        Custom Icon Toast
+      </Text>
     </>
   );