ReactNative, Autofocus Next TextInput

Mikayel Ohanjanyan — Mon, 03 Oct 2022 09:03:45 +0000

The Problem

By default ReactNative doesn't support focusing next <TextInput/> on submit.

Hack

Inspired by this StackOverflow answer

Use a Context named FormContext that will create a LinkedList out of mounted <TextInput/>.
Wrap a <TextInput/> in a component, which will find and focus next <TextInput/> from FormContext.

Here is how the FormContext and FormContextProvider will look like.

// form.context.js

export const FormContext = createContext({});

let inputsLL = null;
let lastInput = null;

const FormContextProvider = ({ children }) => {

  useEffect(() => {
    inputsLL = null;
    lastInput = null;
  }, []);

  return (
    <FormContext.Provider
      value={{
        actions: {
          addInput(name, ref) {
            ref.name = name;
            if (!inputsLL) {
              inputsLL = ref;
              lastInput = ref;
            } else if (lastInput) {
              lastInput.next = ref;
              lastInput = ref;
            }
          },
          removeInput(name) {
            if (inputsLL) {
              let node = inputsLL;
              let parent = null;
              do {
                if (node.name === name) {
                  if (parent && node.next) {
                    parent.next = node.next;
                  } else if (parent && !node.next) {
                    parent.next = null;
                  } else if (!parent && node.next) {
                    inputsLL = node.next;
                  } else if (!parent && !node.next) {
                    inputsLL = null;
                  }
                  break;
                }
                parent = node;
                node = node.next;
              } while (node);
            }
          },
          focusNext(name) {
            if (inputsLL) {
              let node = inputsLL;
              do {
                if (node.name === name) {
                  if (node.next) {
                    node.next.focus();
                  } else node.blur();
                }
                node = node.next;
              } while (node);
            }
          },
        },
        inputs: inputsLL,
      }}
    >
      {children}
    </FormContext.Provider>
  );
};

export default FormContextProvider;

Here is a <TextInput/> wrapper implementation

// wrapped-input.js

export default function WrappedInput(props) {
 let reference = useRef(null);

  const { actions } = useContext(FormContext);

  useEffect(() => {
    //label must be unique
    actions.addInput(props.label, reference);

    return () => {
      actions.removeInput(props.label);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [reference]);

  return (
    <TextInput
      ref={(r) => (reference = r)}
      blurOnSubmit={false}
      onSubmitEditing={() => {
        actions.focusNext(props.label);
      }}
    />
  )
}

React, Docker, Runtime Environment Variables

Mikayel Ohanjanyan — Fri, 23 Sep 2022 10:51:14 +0000

The Problem

Containerized react apps are most commonly using static serving nginx, hence, there is no way to directly pass environment variables to javascript at runtime.

Hack

Add <script> block to index.html that will be modified runtime, and loaded with environment variables.

So our index.html should look something like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>ReactApp</title>
    <base href="/" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script>
      window.env = {};
      /*ENV_BEGIN*/`
      `/*ENV_END*/
        .split('\n')
        .map((kv) => kv.split('='))
        .forEach(([key, value]) => {
          window.env[key] = value;
        });
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

this will load provided variables into window.env.

And here is an example Dockerfile that will provide environment variables prefixed with REACT_APP_

FROM nginx:alpine

WORKDIR /usr/share/nginx/html

COPY ./dist/apps/react-app .

RUN printf "server {\n\
        listen       80;\n\
        location / {\n\
                root   /usr/share/nginx/html;\n\
                try_files \$uri \$uri/ /index.html;\n\
                add_header Cache-Control \"no-store, no-cache, must-revalidate\";\n\
        }\n\
}\n" > /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD sed  -i '/\/\*ENV_BEGIN\*\/`/r '<(env | grep --color=never "^REACT_APP_") index.html; nginx '-g daemon off;'

Working Example

You can find full working example with nx here

DEV Community: Mikayel Ohanjanyan

ReactNative, Autofocus Next TextInput

The Problem

Hack

React, Docker, Runtime Environment Variables

The Problem

Hack

Working Example