Use customLogoUrl prop

neynarxyz · Jan 18, 2024 · b0e6f41 · b0e6f41
1 parent 4a00968
commit b0e6f41
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/react-native-sign-in-with-neynar/package.json b/react-native-sign-in-with-neynar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@neynar/react-native-signin",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "keywords": [
     "react-native",
     "neynar",

diff --git a/react-native-sign-in-with-neynar/src/NeynarSigninButton.tsx b/react-native-sign-in-with-neynar/src/NeynarSigninButton.tsx
@@ -7,6 +7,7 @@ import {
   Linking,
   ViewStyle,
   TextStyle,
+  Image,
 } from "react-native";
 import NeynarLogo from "./components/NeynarLogo";
 import WebView, { WebViewMessageEvent } from "react-native-webview";
@@ -91,7 +92,7 @@ export const NeynarSigninButton = ({
   color,
   backgroundColor,
   customLogoUrl,
-  logoSize,
+  logoSize = "30",
   buttonStyles: customButtonStyle,
   textStyles: customTextStyle,
 }: IProps) => {
@@ -121,7 +122,7 @@ export const NeynarSigninButton = ({
     }
   };
 
-  const getLogo = (logoSize: string = "30") => {
+  const getLogo = () => {
     try {
       if (Number.isNaN(parseInt(logoSize)))
         throw new Error("logoSize must be a number");
@@ -154,6 +155,11 @@ export const NeynarSigninButton = ({
     }
   };
 
+  const getCustomLogo = () => {
+    if (!customLogoUrl) return <></>;
+    return <Image source={{ uri: customLogoUrl }} style={styles.customLogo} />;
+  };
+
   const defaultButtonStyle: ViewStyle = {
     flexDirection: "row",
     alignItems: "center",
@@ -189,7 +195,7 @@ export const NeynarSigninButton = ({
   return (
     <>
       <TouchableOpacity onPress={handleOnPress} style={combinedButtonStyle}>
-        {!text && getLogo(logoSize)}
+        {!text ? getLogo() : getCustomLogo()}
         <Text style={combinedTextStyle}>{text || getButtonText()}</Text>
       </TouchableOpacity>
       {modalVisible && (
@@ -224,3 +230,11 @@ export const NeynarSigninButton = ({
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  customLogo: {
+    width: 30,
+    height: 30,
+    resizeMode: "contain",
+  },
+});