Category: JavaScript

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.

Sometimes, we want to add base64 encoded images with React Native.

In this article, we’ll look at how to add base64 encoded images with React Native.

How to add base64 encoded images with React Native?

To add base64 encoded images with React Native, we can include the base64 image string as the value of the source prop value.

For instance, we write:

import * as React from 'react';
import { Text, View, Image } 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';

const base64Icon =
  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII=';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Image source={{ uri: base64Icon }} style={{ width: 20, height: 20 }} />
    </View>
  );
}

to add an Image into the View.

And we set the source prop to { uri: base64Icon } to use the base64Icon string as the image URL.

Conclusion

To add base64 encoded images with React Native, we can include the base64 image string as the value of the source prop value.

Sometimes, we want to make an item stick to the bottom using flex in React Native.

In this article, we’ll look at how to make an item stick to the bottom using flex in React Native.

How to make an item stick to the bottom using flex in React Native?

To make an item stick to the bottom using flex in React Native, we can set the flex style property.

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 }}>
      <View style={{ flex: 1 }}>
        <Text>hello</Text>
      </View>
      <View style={{ flex: 0 }}>
        <Text>world</Text>
      </View>
    </View>
  );
}

to set the style prop of the outer and the first inner div to an object with the flex property set to 1 to stretch the views.

The outer view is stretched to fit the screen.

And the first inner view is stretch to fit the space between the top of the screen and the footer view.

Therefore, we see ‘world’ displayed at the bottom of the screen.

Conclusion

To make an item stick to the bottom using flex in React Native, we can set the flex style property.

Sometimes, we want to put an icon inside a TextInput in React Native.

In this article, we’ll look at how to put an icon inside a TextInput in React Native.

How to put an icon inside a TextInput in React Native?

To put an icon inside a TextInput in React Native, we can put an Icon and a TextInput in the same View.

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={{ flexDirection: 'row', gap: 5, alignItems: 'center' }}>
      <Icon name="ios-search" size={20} color="#000" />
      <TextInput
        placeholder="User Nickname"
        onChangeText={(searchString) => console.log(searchString)}
        underlineColorAndroid="transparent"
      />
    </View>
  );
}

to add a View that has flexDirection set to 'row' to let us add the Icon and TextInput side by side.

Then we add the Icon to the left of the TextInput.

Conclusion

To put an icon inside a TextInput in React Native, we can put an Icon and a TextInput in the same View.