diff --git a/package.json b/package.json index 06a8504..28b9915 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@observation.org/react-native-components", - "version": "1.62.0", + "version": "1.63.0", "main": "src/index.ts", "repository": "git@github.com:observation/react-native-components.git", "author": "Observation.org", diff --git a/src/components/InputField.tsx b/src/components/InputField.tsx index 8195c55..4ef3b22 100644 --- a/src/components/InputField.tsx +++ b/src/components/InputField.tsx @@ -1,4 +1,4 @@ -import React, { RefAttributes, useState } from 'react' +import React, { RefAttributes, useRef, useState } from 'react' import { Platform, StyleProp, StyleSheet, Text, TextInput, TextInputProps, View, ViewStyle } from 'react-native' import { Icon } from './Icon' @@ -33,6 +33,8 @@ const InputField = ({ disabled = false, }: Props) => { const [isFocused, setIsFocused] = useState(false) + const inputRef = useRef(null) + const didAutoFocus = useRef(false) // Set lineHeight to 0 to fix vertical alignment of the input text on iOS // Do this only for iOS, as setting it to 0 on Android results in input text being invisible @@ -44,6 +46,19 @@ const InputField = ({ const inputContainerStyle = disabled ? { backgroundColor: theme.color.greyLight } : {} const placeholderTextColor = disabled ? theme.color.greySemi : theme.color.placeholder + const layoutHandler = inputProps?.autoFocus + ? () => { + if (didAutoFocus.current) { + return + } + + requestAnimationFrame(() => { + inputRef.current?.focus() + didAutoFocus.current = true + }) + } + : undefined + return ( {label && ( @@ -53,11 +68,13 @@ const InputField = ({ )} setIsFocused(true)} onBlur={() => setIsFocused(false)} + onLayout={layoutHandler} underlineColorAndroid="transparent" placeholderTextColor={placeholderTextColor} />