Is there a way to create textinput-like component?

[damsonFilipson]

Hi guys!
I need to create a floating textinput, do you have any ideas how to create such component?
Thanks!

[heitorrubira]

Hey @damsonFilipson,

That a lot work to do, but If you want to implement this in my opinion, you want to focus on the element/input behaviour, however to draw the actually result you just use Skia components, e.g. <Text /> and <RoundedRect />, let improvise an idea here of behaviour:

import React, { useState } from 'react';
import { Canvas, Text, RoundedRect, useFont } from '@shopify/react-native-skia';
import { GestureResponderEvent } from 'react-native';

enum EInputState {
  NONE = 0,
  FOCUS = 1,
  ACTIVE = 2,
  BLUR = 3
};

export type Props = {
  defaultValue?: number;
}
export default function FloatInput({ defaultValue = 0.0 }: Props) {
  const [state, setState] = useState(EInputState.NONE); // <--- the component state...you can change the style based on this.
  const [value, setValue] = useState(defaultValue); // <--- the input value

  const font = useFont(require("./my-font.ttf"), 32);
  if (font === null) {
    return null;
  }

  // This callback should handle the user input and must be attached
  // The React Native TextInput handles that automatically
  // Please take a look here to more: https://reactnative.dev/docs/keyboard
  const handleInput = (evt) => {
    // new input event
    setValue(evt.target.value);
  };

  const onTouchStart = (e: GestureResponderEvent) => {
    setState(EInputState.FOCUS);
    setTimeout(() => setState(EInputState.ACTIVE), 500);
    // Attach the handleInput function as a listener
  };

  const onTouchEnd = (e: GestureResponderEvent) => {
    setState(EInputState.BLUR);
    setTimeout(() => setState(EInputState.NONE), 500);
    // Remove the handleInput function as a listener
  };



  return (
    <Canvas style={{ flex: 1, backgroundColor: '#fff', width: 302, height: 50 }}
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
    >
      <RoundedRect
        x={0}
        y={0}
        width={300}
        height={48}
        r={8}
        color="#333"
      >
        <Text font={font} x={10} y={10} text={value.toFixed(2)}>{value}</Text>
      </RoundedRect>
    </Canvas>
  )
}

Note: This is just a basic example of how I would start something like this.

[damsonFilipson]

Hi @heitorrubira,
thanks for reply. That what my idea at first, i guess i'll try this way. :)

Thanks!

[luizv]

@damsonFilipson Hi, you got it working? I'm in need of an input component like that