Category: React Native Answers

Sometimes, we want to add a rounded image with a border with React Native.

In this article, we’ll look at how to add a rounded image with a border with React Native.

How to add a rounded image with a border with React Native?

To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles.

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';

export default function App() {
  return (
    <View>
      <Image
        source={{ uri: 'https://picsum.photos/200/300' }}
        style={{
          width: 150,
          height: 150,
          borderRadius: '50%',
          overflow: 'hidden',
          borderWidth: 3,
          borderColor: 'red',
        }}
      />
    </View>
  );
}

to set borderRadius to '50%' to make the Image round.

And we set the width and height of the Image to set the dimensions.

We set overflow to 'hidden' so the Image stays in the circle.

Conclusion

To add a rounded image with a border with React Native, we can set the borderRadius and overflow styles.

Sometimes, we want to add a full width button with flexbox in React Native.

In this article, we’ll look at how to add a full width button with flexbox in React Native.

How to add a full width button with flexbox in React Native?

To add a full width button with flexbox in React Native, we can set the alignSelf style to 'stretch'.

For instance, we write:

import * as React from 'react';
import { View, Button } 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>
      <Button title="button" style={{ alignSelf: 'stretch' }} />
    </View>
  );
}

to add a Button with the alignSelf style set to 'stretch' to make the button fill the width of the screen.

Conclusion

To add a full width button with flexbox in React Native, we can set the alignSelf style to 'stretch'.

Sometimes, we want to use await keyword on React Native.

In this article, we’ll look at how to use await keyword on React Native.

How to use await keyword on React Native?

To use await keyword on React Native, we can use it in an async function.

For instance, we write:

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

export default function App() {
  const getAndSetData = async () => {
    const key = 'data';
    await AsyncStorage.setItem(key, 'value');
    const value = await AsyncStorage.getItem(key);
    console.log(value);
  };

  React.useEffect(() => {
    getAndSetData();
  }, []);

  return <View></View>;
}

to use await when calling AsyncStorage.getItem and AsyncStorage.setItem.

Using await will make sure the promises returned by both methods will be done before the next line is run.

We call getAndSetData in the useEffect callback that’s called with an empty array to run it when the component mounts.

Conclusion

To use await keyword on React Native, we can use it in an async function.

Sometimes, we want to disable options on React Native TextInput.

In this article, we’ll look at how to disable options on React Native TextInput.

How disable options on React Native TextInput?

To disable options on React Native TextInput, we can set the editable and selectTextOnFocus props to false.

For instance, we write:

import * as React from 'react';
import { View, TextInput } 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>
      <TextInput
        editable={false}
        selectTextOnFocus={false}
        style={{ padding: 30 }}
        placeholder="Name"
      />
    </View>
  );
}

to set them both to false.

Then we won’t see any popup options displayed when we focus on the text input.

editable set to false disables typing in the input.

selectTextOnFocus set to false means text won’t be selected when we focus on it.

Conclusion

To disable options on React Native TextInput, we can set the editable and selectTextOnFocus props to false.

Sometimes, we want to retrieve actual image sizes with React Native.

In this article, we’ll look at how to retrieve actual image sizes with React Native.

How to retrieve actual image sizes with React Native?

To retrieve actual image sizes with React Native, we can use the Image.getSize method.

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';

export default function App() {
  const uri = 'https://picsum.photos/200/300';
  const size = Image.getSize(uri, (width, height) =>
    console.log(width, height)    
  );
  console.log(size);

  return (
    <View>
      <Image source={{ uri }} style={{ width: 200, height: 300 }} />
    </View>
  );
}

to call Image.getSize with the image uri and callback that takes the image width and height as parameters.

As a result, we see the image at the given uri‘s width and height logged.

Conclusion

To retrieve actual image sizes with React Native, we can use the Image.getSize method.