Category: React Native Answers

To format a date string in React Native, we can use moment.js.

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';
import moment from 'moment';

export default function App() {
  return (
    <View>
      <Text>{moment(new Date(2022, 1, 1)).format('YYYY-MM-DD')}</Text>
    </View>
  );
}

to call moment with a JavaScript date object to create a moment object with the same date.

Then we call format with a format string to return a date string with the given date.

Therefore, we see 2022-02-01 displayed.

Sometimes, we want to fit Image in containing View with React Native.

In this article, we’ll look at how to fit Image in containing View with React Native.

How to fit Image in containing View with React Native?

To fit Image in containing View with React Native, we can set the width of the Image to '100%'.

For instance, we write:

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

export default function App() {
  const [text, setText] = React.useState();
  return (
    <View style={{ width: 200, height: 300 }}>
      <Image
        source="https://picsum.photos/200/300"
        style={{
          width: '100%',
          height: undefined,
          aspectRatio: 1,
        }}
      />
    </View>
  );
}

to set the style prop of the Image to

{
  width: '100%',
  height: undefined,
  aspectRatio: 1,
}

to make the width of the image fit to the View‘s width.

And we set the aspectRatio to 1 to make the height the same as the width.

Conclusion

To fit Image in containing View with React Native, we can set the width of the Image to '100%'.

Sometimes, we want to add a text area in React Native.

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

How to add a text area in React Native?

To add a text area in React Native, we can use a TextInput with the multiline and the numberOfLines props.

For instance, we write:

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

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

  return (
    <View style={{ flex: 1 }}>
      <TextInput
        multiline
        numberOfLines={4}
        onChangeText={(text) => setText(text)}
        value={text}
      />
      <Text>{text}</Text>
    </View>
  );
}

to add a TextInput with the multiline prop to add a text area.

Then we set numberOfLines to 4 to make the text input line 4 lines tall.

We set the onChangeText prop to a function that sets the text state to the input value.

And we set the value prop to text to show the input value.

Conclusion

To add a text area in React Native, we can use a TextInput with the multiline and the numberOfLines props.

Sometimes, we want to render HTML in React Native.

In this article, we’ll look at how to render HTML in React Native.

How to render HTML in React Native?

To render HTML in React Native, we can use a WebView.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <WebView
        originWhitelist={['*']}
        style={{ marginTop: 50, marginBottom: 50 }}
        source={{ html: '<h1><b>hello world</b></h1>' }}
      />
    </View>
  );
}

to set the source prop to { html: '<h1><b>hello world</b></h1>' } to display ‘hello world’ in bold on the screen.

Conclusion

To render HTML in React Native, we can use a WebView.

Sometimes, we want to change the styling of TextInput placeholder in React Native.

In this article, we’ll look at how to change the styling of TextInput placeholder in React Native.

How to change the styling of TextInput placeholder in React Native?

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <TextInput placeholderTextColor="red" placeholder="Name" />
    </View>
  );
}

to set the placeholderTextColor to 'red' to set the placeholder color of the input to red.

Conclusion

To change the styling of TextInput placeholder in React Native, we can set the placeholderTextColor prop.