Category: React

Sometimes, we want to add border radius only for 1 corner with React Native.

In this article, we’ll look at how to add border radius only for 1 corner with React Native.

How to add border radius only for 1 corner with React Native?

To add border radius only for 1 corner with React Native, we can set the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius individually.

For instance, we write:

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

const App = () => {
  return (
    <View>
      <View
        style={{
          borderBottomLeftRadius: 5,
          borderBottomRightRadius: 0,
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          border: '1px solid black',
        }}>
        <Text>hello world</Text>
      </View>
    </View>
  );
};
export default App;

to set borderBottomLeftRadius to 5 and the rest to 0 to add a border radius to the bottom left corner only.

Conclusion

To add border radius only for 1 corner with React Native, we can set the borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius individually.

Sometimes, we want to clear the React Native cache.

In this article, we’ll look at how to clear the React Native cache.

How to clear the React Native cache?

To clear the React Native cache, we can run various commands.

We can clear cache from the react-native command with.

react-native start --reset-cache

With npm, we run:

npm start -- --reset-cache

And we can run Expo to clear the cache by running

expo start -c

Conclusion

To clear the React Native cache, we can run various commands.

Sometimes, we want to hide the scrollbar in a FlatList with React Native in Android.

In this article, we’ll look at how to hide the scrollbar in a FlatList with React Native in Android.

How to hide the scrollbar in a FlatList with React Native in Android?

To hide the scrollbar in a FlatList with React Native in Android, we can set the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false.

For instance, we write:

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

const DATA = Array(100)
  .fill()
  .map((_, i) => ({ id: i, title: i }));

const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => <Item title={item.title} />;

  return (
    <View>
      <FlatList
        style={{ height: '200px' }}
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};
export default App;

to add a FlatList with the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props set to false to hide the vertical and horizontal scrollbar respectively.

Conclusion

To hide the scrollbar in a FlatList with React Native in Android, we can set the showsVerticalScrollIndicator and showsHorizontalScrollIndicator props to false.

Sometimes, we want to require image module using dynamic names with React Native.

In this article, we’ll look at how to require image module using dynamic names with React Native.

How to require image module using dynamic names with React Native?

To require image module using dynamic names with React Native, we can call require with different image path strings according to another value.

For instance, we write:

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

const App = () => {
  const [showFirstImg, setShowFirstImg] = React.useState(true);
  return (
    <View>
      <Button title="toggle" onPress={() => setShowFirstImg((s) => !s)} />
      {showFirstImg ? (
        <Image source={require('./test1.png')} />
      ) : (
        <Image source={require('./test2.jpg')} />
      )}
    </View>
  );
};
export default App;

to add 2 Images with different source values.

We call require to include the images in the component.

And we use the showFirstImg to control which image is shown.

We add a Button to toggles the showFirstImg value when pressed.

Conclusion

To require image module using dynamic names with React Native, we can call require with different image path strings according to another value.

Sometimes, we want to fix the issue where user cannot write first letter with noncapital with React Native

In this article, we’ll look at how to fix the issue where user cannot write first letter with noncapital with React Native.

How to fix the issue where user cannot write first letter with noncapital with React Native?

To fix the issue where user cannot write first letter with noncapital with React Native, we can set the autoCapitalize prop of the TextInput to 'none'.

For instance, we write:

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

const App = () => {
  return (
    <View>
      <TextInput placeholder="name" autoCapitalize="none" />
    </View>
  );
};
export default App;

to set the autoCapitalize prop to 'none' to disable auto-capitalizing the first word of the input value.

Conclusion

To fix the issue where user cannot write first letter with noncapital with React Native, we can set the autoCapitalize prop of the TextInput to 'none'.