Category: JavaScript

Sometimes, we want to select the next TextInput after pressing the "next" keyboard button with React Native.

In this article, we’ll look at how to select the next TextInput after pressing the "next" keyboard button with React Native.

How to select the next TextInput after pressing the "next" keyboard button with React Native?

To select the next TextInput after pressing the "next" keyboard button with React Native, we can assign refs to the TextInputs we want to set focus on.

And then we call focus on the ref.current of the TextInput to set focus on the input.

For instance, we write:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native-paper';

const MyComponent = () => {
  const refInput2 = React.useRef();
  const refInput3 = React.useRef();

  return (
    <View>
      <TextInput
        placeholder="Input1"
        autoFocus={true}
        returnKeyType="next"
        onSubmitEditing={() => refInput2.current.focus()}
      />
      <TextInput
        placeholder="Input2"
        returnKeyType="next"
        onSubmitEditing={() => refInput3.current.focus()}
        ref={refInput2}
      />
      <TextInput placeholder="Input3" ref={refInput3} />
    </View>
  );
};

export default MyComponent;

to create 2 refs with useRef.

Then we set the ref prop of the 2nd and 3rd inputs.

Next, we set onSubmitEditing prop of the first 2 inputs to functions that calls focus on the inputs to put focus on them.

Therefore, when we press enter on the first input, focus is moved to the 2nd one.

And when we press enter on the 2nd input, focus is moved to the 3rd one.

Conclusion

To select the next TextInput after pressing the "next" keyboard button with React Native, we can assign refs to the TextInputs we want to set focus on.

And then we call focus on the ref.current of the TextInput to set focus on the input.

Sometimes, we want to add logging in React Native.

In this article, we’ll look at how to add logging in React Native.

How to add logging in React Native?

To add logging in React Native, we can use console.

For instance, we write:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';

export default class MyComponent extends React.Component {
  render() {
    console.log('hello');
    console.warn('warning');

    return <View></View>;
  }
}

to call console.log to log messages and console.warn to log warnings.

Conclusion

To add logging in React Native, we can use console.

Sometimes, we want to insert a line break into a Text component in React Native.

In this article, we’ll look at how to insert a line break into a Text component in React Native.

How to insert a line break into a Text component in React Native?

To insert a line break into a Text component in React Native, we can add the '\n' character string.

For instance, we write:

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text } from 'react-native-paper';

export default class MyComponent extends React.Component {
  render() {
    return (
      <View>
        <Text>
          Hi{'\n'}
          This is a test message.
        </Text>
      </View>
    );
  }
}

to add {'\n'} into the content of Text.

Then we see:

Hi
This is a test message.

rendered.

Conclusion

To insert a line break into a Text component in React Native, we can add the '\n' character string.