diff --git a/apps/wallet-mobile/package.json b/apps/wallet-mobile/package.json
index b2f6b6b57c..c19605b760 100644
--- a/apps/wallet-mobile/package.json
+++ b/apps/wallet-mobile/package.json
@@ -172,7 +172,7 @@
"react-native-markdown-display": "^7.0.0-alpha.2",
"react-native-mmkv": "^2.11.0",
"react-native-pager-view": "^6.2.0",
- "react-native-paper": "^4.12.0",
+ "react-native-paper": "4.12.8",
"react-native-permissions": "^3.8.0",
"react-native-qrcode-svg": "6.0.6",
"react-native-quick-base64": "^2.0.6",
diff --git a/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx
index d969142c1d..4154d6732f 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/common/TextInput/TextInput.tsx
@@ -61,6 +61,8 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For
autoFocus,
selectTextOnAutoFocus,
isValidPhrase = false,
+ cursorColor,
+ selectionColor,
...restProps
} = props
@@ -148,7 +150,12 @@ export const TextInput = React.forwardRef((props: TextInputProps, ref: React.For
error={errorTextEnabled && !isEmptyString(errorText)}
render={({style, ...inputProps}) => (
-
+
)}
onBlur={(e) => {
diff --git a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
index fdb6b7cbcc..fc9c1d7fd3 100644
--- a/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
+++ b/apps/wallet-mobile/src/features/SetupWallet/useCases/RestoreWallet/MnemonicInput/MnemonicInput.tsx
@@ -220,7 +220,7 @@ const MnemonicWordInput = React.forwardRef {
const inputRef = React.useRef(null)
- const {styles} = useStyles()
+ const {styles, colors} = useStyles()
const [word, setWord] = React.useState(selectedWord)
React.useImperativeHandle(
@@ -300,6 +300,8 @@ const MnemonicWordInput = React.forwardRef setSuggestedWords([])}
+ cursorColor={colors.primary[600]} // only works for android
+ selectionColor={Platform.OS === 'android' ? colors.gray[100] : undefined} // on ios, selectionColor changes cursor and selection
keyboardType={Platform.OS === 'android' ? 'visible-password' : undefined} // to hide keyboard suggestions on android
/>
)
@@ -322,7 +324,10 @@ const useAutoFocus = (ref: React.RefObject) =>
}, [ref])
const useStyles = () => {
- const {theme} = useTheme()
+ const {
+ theme: {color, padding, typography},
+ } = useTheme()
+
const styles = StyleSheet.create({
mnemonicInputView: {
flexDirection: 'row',
@@ -334,8 +339,8 @@ const useStyles = () => {
alignItems: 'center',
justifyContent: 'space-evenly',
width: '50%',
- ...theme.padding['x-xs'],
- ...theme.padding['y-xxs'],
+ ...padding['x-xs'],
+ ...padding['y-xxs'],
},
textInput: {
minWidth: 143,
@@ -343,8 +348,8 @@ const useStyles = () => {
textAlign: 'center',
},
mnemonicIndex: {
- color: theme.color.primary[400],
- ...theme.typography['body-1-l-regular'],
+ color: color.primary[400],
+ ...typography['body-1-l-regular'],
},
textView: {
flexDirection: 'row',
@@ -352,19 +357,19 @@ const useStyles = () => {
alignItems: 'center',
},
errorText: {
- ...theme.typography['body-1-l-regular'],
- color: theme.color.magenta[500],
+ ...typography['body-1-l-regular'],
+ color: color.magenta[500],
},
successText: {
- ...theme.typography['body-1-l-medium'],
- color: theme.color.gray.max,
+ ...typography['body-1-l-medium'],
+ color: color.gray.max,
},
clearAll: {
- ...theme.typography['button-2-m'],
- ...theme.padding['l-s'],
- color: theme.color.primary[500],
+ ...typography['button-2-m'],
+ ...padding['l-s'],
+ color: color.primary[500],
textTransform: 'uppercase',
},
})
- return {styles} as const
+ return {styles, colors: color} as const
}
diff --git a/yarn.lock b/yarn.lock
index 2ff7ee7a97..9a003bca20 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2373,9 +2373,9 @@
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
"@callstack/react-theme-provider@^3.0.7":
- version "3.0.8"
- resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.8.tgz#d0d7ac71e422133c5f7b78f4c4aa1bc57f156f50"
- integrity sha512-5U231sYY2sqQOaELX0WBCn+iluV8bFaXIS7em03k4W5Xz0AhGvKlnpLIhDGFP8im/SvNW7/2XoR0BsClhn9t6Q==
+ version "3.0.9"
+ resolved "https://registry.yarnpkg.com/@callstack/react-theme-provider/-/react-theme-provider-3.0.9.tgz#01035fa1231f1fffc1a806be1b55eb82716e80c1"
+ integrity sha512-tTQ0uDSCL0ypeMa8T/E9wAZRGKWj8kXP7+6RYgPTfOPs9N07C9xM8P02GJ3feETap4Ux5S69D9nteq9mEj86NA==
dependencies:
deepmerge "^3.2.0"
hoist-non-react-statics "^3.3.0"
@@ -19868,10 +19868,10 @@ react-native-pager-view@^6.2.0:
resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.2.0.tgz#51380d93fbe47f6380dc71d613a787bf27a4ca37"
integrity sha512-pf9OnL/Tkr+5s4Gjmsn7xh91PtJLDa6qxYa/bmtUhd/+s4cQdWQ8DIFoOFghwZIHHHwVdWtoXkp6HtpjN+r20g==
-react-native-paper@^4.12.0:
- version "4.12.5"
- resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.5.tgz#5ea4bbe02d416d17802a199de748700358c11d3a"
- integrity sha512-gdUtJJf0bw/0xoCE1jR6qCQiQCQZ9ivZh0lbPghFFaGxX88WtTQpusnGON8WhLPeH5odEQ4dTBu99lnIQvSFow==
+react-native-paper@4.12.8:
+ version "4.12.8"
+ resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-4.12.8.tgz#54be07cf5ff71cd2a06374aeae29abf2ac354317"
+ integrity sha512-jYpiaHY6KxiYuKuznN1zn7OF69BH9aUrIxUsB9A0jsK+fXpL6Z5aia2CBeG8aRBZI+R/2FN3b7/EAEJC/Cm3Lw==
dependencies:
"@callstack/react-theme-provider" "^3.0.7"
color "^3.1.2"