chore: update examples

sbycrosz · Jul 15, 2024 · 6d17474 · 6d17474
1 parent 552ab6a
commit 6d17474
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 70 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,12 @@
-/* eslint-disable react-native/no-inline-styles */
 import { useState } from 'react';
-import { ScrollView, Switch, Text, View } from 'react-native';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+} from 'react-native';
 import {
   CreditCardView,
   CreditCardInput,
@@ -10,6 +16,45 @@ import {
   type ValidationState,
 } from 'react-native-credit-card-input';
 
+const s = StyleSheet.create({
+  container: {
+    width: '100%',
+    maxWidth: 600,
+    marginHorizontal: 'auto',
+    backgroundColor: '#f0f0f0',
+    borderRadius: 10,
+    marginTop: 60,
+  },
+  switch: {
+    alignSelf: 'center',
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  cardView: {
+    alignSelf: 'center',
+    marginTop: 15,
+  },
+  cardInput: {
+    marginTop: 15,
+    borderColor: '#fff',
+    borderTopWidth: 1,
+    borderBottomWidth: 1,
+  },
+  infoContainer: {
+    margin: 20,
+    padding: 20,
+    backgroundColor: '#dfdfdf',
+    borderRadius: 5,
+  },
+  info: {
+    fontFamily: Platform.select({
+      ios: 'Courier',
+      android: 'monospace',
+      web: 'monospace',
+    }),
+  },
+});
+
 const toStatusIcon = (status?: ValidationState) =>
   status === 'valid' ? '✅' : status === 'invalid' ? '❌' : '❓';
 
@@ -21,111 +66,68 @@ export default function Example() {
   const [formData, setFormData] = useState<CreditCardFormData>();
 
   return (
-    <ScrollView
-      contentContainerStyle={{
-        width: '100%',
-        maxWidth: 600,
-        marginHorizontal: 'auto',
-        backgroundColor: '#f0f0f0',
-        borderRadius: 10,
-        marginTop: 60,
-      }}
-    >
-      <View
-        style={{
-          flexDirection: 'row',
-          justifyContent: 'center',
-          alignItems: 'center',
+    <ScrollView contentContainerStyle={s.container}>
+      <Switch
+        style={s.switch}
+        onValueChange={(v) => {
+          setUseLiteInput(v);
+          setFormData(undefined);
         }}
-      >
-        <Switch
-          style={{
-            alignSelf: 'center',
-            marginTop: 20,
-            marginBottom: 20,
-          }}
-          onValueChange={(v) => {
-            setUseLiteInput(v);
-            setFormData(undefined);
-          }}
-          value={useLiteInput}
-        />
-      </View>
+        value={useLiteInput}
+      />
 
       <CreditCardView
         focusedField={focusedField}
         type={formData?.values.type}
         number={formData?.values.number}
         expiry={formData?.values.expiry}
         cvc={formData?.values.cvc}
-        style={{
-          alignSelf: 'center',
-          marginTop: 15,
-        }}
+        style={s.cardView}
       />
 
       {useLiteInput ? (
         <LiteCreditCardInput
           autoFocus
-          style={{
-            marginTop: 15,
-            borderColor: '#fff',
-            borderTopWidth: 1,
-            borderBottomWidth: 1,
-          }}
-          inputStyle={{ color: 'black' }}
-          placeholderColor={'darkgray'}
+          style={s.cardInput}
           onChange={setFormData}
           onFocusField={setFocusedField}
         />
       ) : (
         <CreditCardInput
           autoFocus
-          style={{
-            marginTop: 15,
-          }}
-          labelStyle={{ color: 'black' }}
-          inputStyle={{ color: '#333' }}
-          placeholderColor={'darkgray'}
+          style={s.cardInput}
           onChange={setFormData}
           onFocusField={setFocusedField}
         />
       )}
 
-      <View
-        style={{
-          margin: 20,
-          padding: 20,
-          backgroundColor: '#dfdfdf',
-          borderRadius: 5,
-        }}
-      >
-        <Text style={{ fontFamily: 'courier' }}>
+      <View style={s.infoContainer}>
+        <Text style={s.info}>
           {formData?.valid
             ? '✅ Possibly valid card'
             : '❌ Invalid/Incomplete card'}
         </Text>
 
-        <Text style={{ fontFamily: 'courier' }}>
+        <Text style={s.info}>
           {toStatusIcon(formData?.status.number)}
           {' Number\t: '}
           {formData?.values.number}
         </Text>
 
-        <Text style={{ fontFamily: 'courier' }}>
+        <Text style={s.info}>
           {toStatusIcon(formData?.status.expiry)}
           {' Expiry\t: '}
           {formData?.values.expiry}
         </Text>
 
-        <Text style={{ fontFamily: 'courier' }}>
+        <Text style={s.info}>
           {toStatusIcon(formData?.status.cvc)}
           {' Cvc   \t: '}
           {formData?.values.cvc}
         </Text>
 
-        <Text style={{ fontFamily: 'courier' }}>
-          {'ℹ️ Type\t: '}
+        <Text style={s.info}>
+          {'ℹ️ Type  \t: '}
           {formData?.values.type}
         </Text>
       </View>

diff --git a/src/CreditCardInput.tsx b/src/CreditCardInput.tsx
@@ -18,7 +18,7 @@ interface Props {
   style?: ViewStyle;
   labelStyle?: TextStyle;
   inputStyle?: TextStyle;
-  placeholderColor: string;
+  placeholderColor?: string;
   labels?: {
     number: string;
     expiry: string;
@@ -59,7 +59,6 @@ const s = StyleSheet.create({
   input: {
     height: 40,
     fontSize: 16,
-    color: 'darkgray',
     borderBottomColor: 'darkgray',
     borderBottomWidth: 1,
     // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
@@ -68,7 +67,6 @@ const s = StyleSheet.create({
   inputLabel: {
     fontSize: 14,
     fontWeight: 600,
-    color: 'black',
   },
 });
 
@@ -78,7 +76,7 @@ const CreditCardInput = (props: Props) => {
     style,
     labelStyle,
     inputStyle,
-    placeholderColor,
+    placeholderColor = 'darkgray',
     labels = {
       number: 'CARD NUMBER',
       expiry: 'EXPIRY',

diff --git a/src/LiteCreditCardInput.tsx b/src/LiteCreditCardInput.tsx
@@ -20,7 +20,7 @@ interface Props {
   autoFocus?: boolean;
   style?: ViewStyle;
   inputStyle?: TextStyle;
-  placeholderColor: string;
+  placeholderColor?: string;
   placeholders?: {
     number: string;
     expiry: string;
@@ -76,7 +76,6 @@ const s = StyleSheet.create({
   input: {
     height: 40,
     fontSize: 16,
-    color: 'black',
     // @ts-expect-error outlineWidth is used to hide the text-input outline on react-native-web
     outlineWidth: 0,
   },
@@ -87,7 +86,7 @@ const LiteCreditCardInput = (props: Props) => {
     autoFocus = false,
     style,
     inputStyle,
-    placeholderColor,
+    placeholderColor = 'darkgray',
     placeholders = {
       number: '1234 5678 1234 5678',
       expiry: 'MM/YY',