Category: React Native Answers

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

Sometimes, we want to change the width of the View by text inside with React Native.

In this article, we’ll look at how to change the width of the View by text inside with React Native.

How to change the width of the View by text inside with React Native?

To change the width of the View by text inside with React Native, we can set the alignSelf property.

For instance, we write:

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

const App = () => {
  return (
    <View style={{ backgroundColor: 'orange', alignSelf: 'flex-start' }}>
      <Text style={{ color: 'blue' }}>hello world</Text>
    </View>
  );
};
export default App;

to set alignSelf to 'flex-start' to make the View display like a block element in HTML.

Conclusion

To change the width of the View by text inside with React Native, we can set the alignSelf property.

Sometimes, we want to get the current scroll position of ScrollView in React Native.

In this article, we’ll look at how to get the current scroll position of ScrollView in React Native.

How to get the current scroll position of ScrollView in React Native?

To get the current scroll position of ScrollView in React Native, we can set the onScroll prop of the ScrollView to a function that takes the scroll event object as an argument.

For instance, we write:

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

const a = Array(50)
  .fill()
  .map((_, i) => i);

const App = () => {
  const scrollViewRef = React.useRef();
  const [pos, setPos] = React.useState(0);
  const [arr, setArr] = React.useState(a);

  return (
    <View style={{ flex: 1 }}>
      <Text>pos: {pos}</Text>
      <ScrollView
        style={{ height: '200px' }}
        onScroll={(e) => setPos(e.nativeEvent.contentOffset.y)}>
        {arr.map((i) => (
          <Text>{i}</Text>
        ))}
      </ScrollView>
    </View>
  );
};
export default App;

to get the scroll position of the scroll view with e.nativeEvent.contentOffset.y.

We call setPos to set that as the value of pos.

Now when we scroll, we see the pos value change.

Conclusion

To get the current scroll position of ScrollView in React Native, we can set the onScroll prop of the ScrollView to a function that takes the scroll event object as an argument.

Sometimes, we want to keep a ScrollView scrolled to the bottom with React Native.

In this article, we’ll look at how to keep a ScrollView scrolled to the bottom with React Native.

How to keep a ScrollView scrolled to the bottom with React Native?

To keep a ScrollView scrolled to the bottom with React Native, we can assign a ref to the ScrollView and call scrollToEnd on it.

For instance, we write:

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

const a = Array(50)
  .fill()
  .map((_, i) => i);

const App = () => {
  const scrollViewRef = React.useRef();
  const [arr, setArr] = React.useState(a);

  return (
    <View style={{ flex: 1 }}>
      <Button onPress={() => setArr([...arr, ...a])} title="add" />
      <ScrollView
        style={{ height: '200px' }}
        ref={scrollViewRef}
        onContentSizeChange={() =>
          scrollViewRef.current.scrollToEnd({ animated: true })
        }>
        {arr.map((i) => (
          <Text>{i}</Text>
        ))}
      </ScrollView>
    </View>
  );
};
export default App;

to assign a ref to the ScrollView.

Then we set onContentSizeChange to a function that calls scrollViewRef.current.scrollToEnd with { animated: true } to scroll to the bottom when the scroll height of the ScrollView changes.

We add the ScrollView content in between the ScrollView tags.

And we add a Button to add some content to the arr array which is rendered in the ScrollView.

Conclusion

To keep a ScrollView scrolled to the bottom with React Native, we can assign a ref to the ScrollView and call scrollToEnd on it.

Sometimes, we want to fetch data from local JSON file with React Native.

In this article, we’ll look at how to fetch data from local JSON file with React Native.

How to fetch data from local JSON file with React Native?

To fetch data from local JSON file with React Native, we can import the JSON file with import.

For instance, we write:

customData.json

{
  "foo": 1
}

App.js

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


const App = () => {
  return (
    <View>
      <Text>{JSON.stringify(customData)}</Text>
    </View>
  );
};
export default App;

to import the content of customData.json as a default import.

Then we can use customData in our components as an object.

Therefore, we call JSON.stringify with customData to convert it to a JSON string.

And {"foo":1} is displayed on the screen.

Conclusion

To fetch data from local JSON file with React Native, we can import the JSON file with import.