Category: React Native Answers

Sometimes, we want to make text vertical (rotated 90 degrees) in React Native.

In this article, we’ll look at how to make text vertical (rotated 90 degrees) in React Native.

How to make text vertical (rotated 90 degrees) in React Native?

To make text vertical (rotated 90 degrees) in React Native, we can set the transform style.

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>
      <Text
        style={{
          transform: [{ rotate: '90deg' }],
          position: 'fixed',
          top: '30px',
        }}>
        hello world
      </Text>
    </View>
  );
};
export default App;

to set the transform style to [{ rotate: '90deg' }] to rotate the Text component by 90 degrees.

We also set the position to 'fixed' and top to '30px' to move the text.

Now we should see ‘hello world’ displayed vertically.

Conclusion

To make text vertical (rotated 90 degrees) in React Native, we can set the transform style.

Sometimes, we want to draw a horizontal rule in React Native.

In this article, we’ll look at how to draw a horizontal rule in React Native.

How to draw a horizontal rule in React Native?

To draw a horizontal rule in React Native, we can add a View with a border color and width.

For instance, we write:

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

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <Text>hello</Text>
      <View
        style={{
          borderBottomColor: 'black',
          borderBottomWidth: 1,
        }}
      />
      <Text>world</Text>
    </View>
  );
};
export default App;

to add the View between 2 Text components.

We set the borderBottomColor to 'black' to add a border color.

And then we set borderBottomWidth to 1 to add a border width in pixels.

Conclusion

To draw a horizontal rule in React Native, we can add a View with a border color and width.

Sometimes, we want to make dynamic styles in React Native.

In this article, we’ll look at how to make dynamic styles in React Native.

How to make dynamic styles in React Native?

To make dynamic styles in React Native, we can return style objects from functions.

For instance, we write:

import * as React from 'react';
import { Text, View } from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const createStyles = (background) => {
  return {
    borderRadius: 12,
    background,
  };
};

const App = () => {
  return (
    <View style={{ flex: 1, ...createStyles('yellow') }}>
      <Text>hello world</Text>
    </View>
  );
};
export default App;

to create the createStyles function that returns an object with some style properties.

Then we spread the returned style object into the object we set as the value of the style prop of the View.

Conclusion

To make dynamic styles in React Native, we can return style objects from functions.

Sometimes, we want to style a TextInput in React Native for password input

In this article, we’ll look at how to style a TextInput in React Native for password input.

How to style a TextInput in React Native for password input?

To style a TextInput in React Native for password input, we can set the secureTextEntry prop to true.

For instance, we write:

import * as React from 'react';
import { TextInput, View } from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <TextInput secureTextEntry />
    </View>
  );
};
export default App;

to add the secureTextEntry prop to the TextInput add a password input.

Conclusion

To style a TextInput in React Native for password input, we can set the secureTextEntry prop to true.

Sometimes, we want to add a fixed footer with React Native.

In this article, we’ll look at how to add a fixed footer with React Native.

How to add a fixed footer with React Native?

To add a fixed footer with React Native, we can add a ScrollView on top of the footer View.

For instance, we write:

import * as React from 'react';
import { Text, View, ScrollView } from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <ScrollView>main</ScrollView>
      <View>
        <Text>footer</Text>
      </View>
    </View>
  );
};
export default App;

to set the outer View to have the flex style set to 1 to make it fill the screen.

Then we add a ScrollView that fills the height of the outer View except for the height of the footer View.

Now we should see ‘footer’ stays at the bottom.

Conclusion

To add a fixed footer with React Native, we can add a ScrollView on top of the footer View.