Category: React Native Answers

Sometimes, we want to set max length of the TextInput with React Native.

In this article, we’ll look at how to set max length of the TextInput with React Native.

How to set max length of the TextInput with React Native?

To set max length of the TextInput with React Native, we can set the maxLength prop.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [text, setText] = React.useState();

  return (
    <View>
      <TextInput value={text} onChangeText={setText} maxLength={10} />
    </View>
  );
}

to set the maxLength prop to 10 to allow users to enter a max of 10 characters into the input.

Conclusion

To set max length of the TextInput with React Native, we can set the maxLength prop.

Sometimes, we want to bind onPress with an argument in React Native.

In this article, we’ll look at how to bind onPress with an argument in React Native.

How to bind onPress with an argument in React Native?

To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function.

For instance, we write:

import * as React from 'react';
import { Button, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const onPress = (arg) => () => {
    console.log(arg);
  };

  return (
    <View>
      <Button title="button" onPress={onPress('hello')} />
    </View>
  );
}

to add a Button with the onPress prop set to the function that we get after we call onPress with 'hello'.

We define onPress to return a function that logs the arg that we passed into the outer function.

Therefore, when we press the button, we see 'hello' logged.

Conclusion

To bind onPress with an argument in React Native, we can create a function that returns the onPress handler function.

Sometimes, we want to add styling with conditional with React Native.

In this article, we’ll look at how to add styling with conditional with React Native.

How to add styling with conditional with React Native?

To add styling with conditional with React Native, we can use a function.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [val, setVal] = React.useState();
  const getStyles = () => {
    return {
      border: !val ? '1px solid red' : 'none',
    };
  };

  return (
    <View>
      <TextInput
        value={val}
        onChangeText={setVal}
        style={getStyles()}
        placeholder="name"
      />
    </View>
  );
}

to define the getStyles function that returns an object with the border style according to the value of val.

We use the object getStyles return as the value of style.

And we call setVal when we type into the text input.

Therefore, when the input is empty, we see a red border and no border otherwise.

Conclusion

To add styling with conditional with React Native, we can use a function.

Sometimes, we want to have content break to next line with flex when content reaches edge with Flex React Native.

In this article, we’ll look at how to have content break to next line with flex when content reaches edge with Flex React Native.

How to have content break to next line with flex when content reaches edge with Flex React Native?

To have content break to next line with flex when content reaches edge with Flex React Native, we can set flexWrap to 'wrap'.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        flexDirection: 'row',
      }}>
      {Array(100)
        .fill()
        .map((_, i) => {
          return (
            <Text key={i} style={{ width: 50 }}>
              hello
            </Text>
          );
        })}
    </View>
  );
}

to set flexDirection to 'row' to set the flexbox direction to horizontal.

Then we set flexWrap to 'wrap' to make the child items wrap when it reaches the right edge of the screen.

And finally we add some Text components with width of 50 pixels as children of the View.

As a result, we see the ‘hello’ text displayed in rows.

Conclusion

To have content break to next line with flex when content reaches edge with Flex React Native, we can set flexWrap to 'wrap'.

Sometimes, we want to create a text border in React Native.

In this article, we’ll look at how to create a text border in React Native.

How to create a text border in React Native?

To create a text border in React Native, we can add a few styles.

For instance, we write:

import * as React from 'react';
import { View, Text } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default function App() {
  return (
    <View style={{ flex: 1, padding: 30 }}>
      <Text
        style={{
          borderWidth: 1,
          borderColor: 'thistle',
          borderRadius: 50,
        }}>
        hello
      </Text>
    </View>
  );
}

to add the borderWidth to 1 pixel.

borderColor sets the border color.

borderRadius sets the border corner radius.

Conclusion

To create a text border in React Native, we can add a few styles.