react-native#TextInputProps TypeScript Examples

The following examples show how to use react-native#TextInputProps. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: MyTextInput.tsx    From vsinder with Apache License 2.0 7 votes vote down vote up 
MyTextInput: React.FC<TextInputProps> = ({
  style,
  onFocus,
  onBlur,
  ...props
}) => {
  const [showBorder, setShowBorder] = useState(false);
  const [
    { inputBackground, inputOptionActiveBorder, inputForeground },
  ] = useContext(ThemeContext);
  return (
    <TextInput
      {...props}
      onBlur={(e) => {
        setShowBorder(false);
        onBlur?.(e);
      }}
      underlineColorAndroid="transparent"
      onFocus={(e) => {
        setShowBorder(true);
        onFocus?.(e);
      }}
      style={[
        {
          paddingVertical: 8,
          paddingHorizontal: 6,
          fontSize: 16,
          color: inputForeground,
          backgroundColor: inputBackground,
          borderColor: showBorder ? inputOptionActiveBorder : "transparent",
          borderWidth: 1,
        },
        style,
      ]}
    />
  );
}
Example #2
Source File: TextField.test.tsx    From rn-clean-architecture-template with MIT License 5 votes vote down vote up 
describe('Test TextView', () => {
  it('render correctly', () => {
    const instance = renderer.create(<TextField />);
    expect(instance.toJSON()).toMatchSnapshot();
  });
  it('Test render prefix', () => {
    const instance = renderer.create(<TextField />);
    expect(instance.root.findAllByType(Image)).toHaveLength(0);

    // test render Prefix
    instance.update(<TextField prefix={<Text children="test" />} />);
    expect(instance.root.findByProps({children: 'test'})).toBeDefined();
    expect(instance.root.findAllByType(Image)).toHaveLength(0);

    // test render Prefix
    const prefixIcon = 1;
    instance.update(<TextField prefixIcon={prefixIcon} />);
    expect(instance.root.findByType(Image)?.props?.source).toEqual(prefixIcon);
  });

  it('Test render suffix', () => {
    const instance = renderer.create(<TextField />);
    expect(instance.root.findAllByType(Image)).toHaveLength(0);

    // test render Prefix
    instance.update(<TextField suffix={<Text children="test" />} />);
    expect(instance.root.findByProps({children: 'test'})).toBeDefined();
    expect(instance.root.findAllByType(Image)).toHaveLength(0);

    // test render Prefix
    const prefixIcon = 1;
    instance.update(<TextField suffixIcon={prefixIcon} />);
    expect(instance.root.findByType(Image)?.props?.source).toEqual(prefixIcon);
  });

  it('Test render TextInput with props', () => {
    const inputProps: TextInputProps = {value: 'test'};
    const instance = renderer.create(<TextField inputProps={inputProps} />);
    expect(instance.root.findByProps(inputProps)).toBeDefined();
  });
});
Example #3
Source File: Input.tsx    From kratos-selfservice-ui-react-native with Apache License 2.0 5 votes vote down vote up 
NodeInput = ({
  node,
  attributes,
  value,
  onChange,
  disabled,
  textInputOverride
}: Props) => {
  const variant = guessVariant(node)
  if (!variant) {
    return null
  }

  let extraProps: TextInputProps = {}
  switch (variant) {
    case 'email':
      extraProps.autoCompleteType = 'email'
      extraProps.keyboardType = 'email-address'
      extraProps.textContentType = 'emailAddress'
      extraProps.autoCapitalize = 'none'
      extraProps.autoCorrect = false
      break
    case 'password':
      extraProps.autoCompleteType = 'password'
      extraProps.textContentType = 'password'
      extraProps.autoCapitalize = 'none'
      extraProps.secureTextEntry = true
      extraProps.autoCorrect = false
      break
    case 'username':
      extraProps.autoCompleteType = 'username'
      extraProps.textContentType = 'username'
      extraProps.autoCapitalize = 'none'
      extraProps.autoCorrect = false
      break
  }

  if (textInputOverride) {
    extraProps = textInputOverride(node, extraProps)
  }

  const name = getNodeId(node)
  const title = getNodeTitle(node)

  return (
    <View testID={`field/${name}`}>
      <Title>{title}</Title>
      <StyledTextInput
        testID={name}
        onChange={onChange}
        value={value ? String(value) : ''}
        editable={!disabled}
        onChangeText={onChange}
        state={disabled ? 'disabled' : undefined}
        {...extraProps}
      />
      <>
        {node.messages?.map(({ text, id, type }, k) => (
          <Subtitle key={`${id}${k}`} state={typeToState({ type, disabled })}>
            {text}
          </Subtitle>
        ))}
      </>
    </View>
  )
}