diff --git a/docs/porting-embed.md b/docs/porting-embed.md
index 858e2cc..e71fb59 100644
--- a/docs/porting-embed.md
+++ b/docs/porting-embed.md
@@ -327,6 +327,16 @@ renderPortingProtectionDisabledConfirmation={(onConfirm) => (
)}
/>
```
+#### `defaultTextFont`
+
+The default font that the embed uses for all default components, i.e. all components that are not replaced by a corresponding render prop (for example all inputs will use the `defaultTextFont` if no `renderInput` component was passed to the embed).
+
+```jsx
+
+```
#### Porting Embed props
@@ -347,6 +357,7 @@ renderPortingProtectionDisabledConfirmation={(onConfirm) => (
| `renderAlertBanner` | function | ❌ | `(variant: 'error' | 'info', message: string) => React.ReactNode` |
| `renderDate` | function | ❌ | `(name: string, onChange: (value: string) => void) => React.ReactNode` |
| `renderPortingProtectionDisabledConfirmation` | function | ❌ | `(onConfirm: () => void) => React.ReactNode` |
+| `defaultTextFont` | string | ❌ | Custom font used in all default components. |
#### Text
diff --git a/example/app/porting/index.tsx b/example/app/porting/index.tsx
index 6e21549..a48ae98 100644
--- a/example/app/porting/index.tsx
+++ b/example/app/porting/index.tsx
@@ -121,6 +121,7 @@ export default function PortingEmbedScreen() {
onCompleted={() => setCompleted(true)}
onSupportRequested={() => setClickedCustomerSupport(true)}
onPortingStep={(step) => setPortingStep(step)}
+ defaultTextFont="Satoshi-Regular"
renderTitle={(step) =>
step != null && (
{titles[step]}
diff --git a/src/PortingEmbed/CustomOptionsProvider.tsx b/src/PortingEmbed/CustomOptionsProvider.tsx
index 6234385..b7b9489 100644
--- a/src/PortingEmbed/CustomOptionsProvider.tsx
+++ b/src/PortingEmbed/CustomOptionsProvider.tsx
@@ -29,6 +29,7 @@ type EmbedOptions = {
renderPortingProtectionDisabledConfirmation?: (
onConfirm: () => void
) => React.ReactNode
+ defaultTextFont?: string
}
export const CustomOptionsContext = createContext(null)
@@ -46,6 +47,7 @@ export function CustomOptionsProvider({
renderAlertBanner,
renderDate,
renderPortingProtectionDisabledConfirmation,
+ defaultTextFont,
children,
}: Props) {
return (
@@ -59,6 +61,7 @@ export function CustomOptionsProvider({
renderAlertBanner,
renderDate,
renderPortingProtectionDisabledConfirmation,
+ defaultTextFont,
}}
>
{children}
diff --git a/src/PortingEmbed/PortingEmbed.tsx b/src/PortingEmbed/PortingEmbed.tsx
index 996ab8d..9f7cab0 100644
--- a/src/PortingEmbed/PortingEmbed.tsx
+++ b/src/PortingEmbed/PortingEmbed.tsx
@@ -41,6 +41,7 @@ type Props = {
renderPortingProtectionDisabledConfirmation?: (
onConfirm: () => void
) => React.ReactNode
+ defaultTextFont?: string
}
export function PortingEmbed({
@@ -60,6 +61,7 @@ export function PortingEmbed({
renderAlertBanner,
renderDate,
renderPortingProtectionDisabledConfirmation,
+ defaultTextFont,
}: Props) {
return (
{
color: 'red',
})
})
+
+ it('uses the default font if present', async () => {
+ render(
+
+
+
+ )
+
+ const button = screen.getByText('Save')
+
+ expect(button).toHaveStyle({
+ fontFamily: 'Custom-font',
+ })
+ })
})
diff --git a/src/PortingEmbed/__tests__/AddressForm.test.tsx b/src/PortingEmbed/__tests__/AddressForm.test.tsx
index c0b63c7..874643e 100644
--- a/src/PortingEmbed/__tests__/AddressForm.test.tsx
+++ b/src/PortingEmbed/__tests__/AddressForm.test.tsx
@@ -295,4 +295,25 @@ describe('AddressForm', () => {
color: 'red',
})
})
+ it('uses the default font if present', async () => {
+ render(
+
+
+
+ )
+
+ const button = screen.getByText('Save')
+
+ expect(button).toHaveStyle({
+ fontFamily: 'Custom-font',
+ })
+ })
})
diff --git a/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx b/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx
index 97287ab..6e9731a 100644
--- a/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx
+++ b/src/PortingEmbed/__tests__/CarrierDetailsForm.test.tsx
@@ -227,4 +227,25 @@ describe('CarrierInfoForm', () => {
color: 'red',
})
})
+ it('uses the default font if present', async () => {
+ render(
+
+
+
+ )
+
+ const button = screen.getByText('Save')
+
+ expect(button).toHaveStyle({
+ fontFamily: 'Custom-font',
+ })
+ })
})
diff --git a/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx b/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx
index 5c051be..c7cc247 100644
--- a/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx
+++ b/src/PortingEmbed/__tests__/DonorApprovalForm.test.tsx
@@ -151,4 +151,24 @@ describe('DonorApprovalForm', () => {
donorProviderApproval: true,
})
})
+ it('uses the default font if present', async () => {
+ render(
+
+
+
+ )
+
+ const button = screen.getByText('Save')
+
+ expect(button).toHaveStyle({
+ fontFamily: 'Custom-font',
+ })
+ })
})
diff --git a/src/components/EmbedText.tsx b/src/components/EmbedText.tsx
index 92ccdf9..113e1f2 100644
--- a/src/components/EmbedText.tsx
+++ b/src/components/EmbedText.tsx
@@ -1,13 +1,23 @@
import { Text, TextProps } from 'react-native'
+import { useOptionsContext } from '../PortingEmbed/CustomOptionsProvider'
+
type Props = {
children: React.ReactNode
} & TextProps
export const EmbedText = (props: Props) => {
const { style, children } = props
+ const options = useOptionsContext()
return (
- {children}
+
+ {children}
+
)
}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index ea0f684..80dd309 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -8,6 +8,7 @@ import {
TextInputProps,
} from 'react-native'
+import { useOptionsContext } from '../PortingEmbed/CustomOptionsProvider'
import { EmbedText } from './EmbedText'
type Props = {
@@ -18,6 +19,7 @@ type Props = {
export function Input({ error, placeholder, ...rest }: Props) {
const [inputText, setInputText] = useState('')
const animatedValue = useRef(new Animated.Value(0))
+ const options = useOptionsContext()
const returnAnimatedLabelStyles = {
transform: [
@@ -65,7 +67,6 @@ export function Input({ error, placeholder, ...rest }: Props) {
borderRadius: 8,
fontWeight: '500',
borderWidth: 0,
- fontFamily: 'Satoshi-Regular',
},
})
@@ -81,8 +82,10 @@ export function Input({ error, placeholder, ...rest }: Props) {
pointerEvents: 'none',
color: '#6b7280',
height: 20,
- fontFamily: 'Satoshi-Regular',
},
+ options?.defaultTextFont
+ ? { fontFamily: options.defaultTextFont }
+ : {},
]}
>
{placeholder}
@@ -91,7 +94,12 @@ export function Input({ error, placeholder, ...rest }: Props) {
onChange={(e: NativeSyntheticEvent): void =>
setInputText(e.nativeEvent.text)
}
- style={styles.textStyle}
+ style={[
+ styles.textStyle,
+ options?.defaultTextFont
+ ? { fontFamily: options.defaultTextFont }
+ : {},
+ ]}
placeholderTextColor={error ? '#e11d48' : '#6b7280'}
{...rest}
/>