Category: React Native Answers

To add a modal background with React Native, we add the Modal component.

For instance, we write

<Modal
   theme={{
     colors: {
       backdrop: 'transparent',
     },
   }}
  {...otherProps}
>
 {children}
</Modal>

to add the Modal component with the children prop as its content.

We set the backdrop color by setting the colors.backdrop property in theme.

To set status bar color with React Native, we call the StatusBar.setBarStyle and StatusBar.setBackgroundColor methods.

For instance, we write

import {StatusBar} from 'react-native';

class Comp extends Component {
  //...
  componentDidMount() {
    StatusBar.setBarStyle("light-content", true);
    StatusBar.setBackgroundColor("#0996AE");
  }
  //...
}

to call StatusBar.setBarStyle to set the light-content option to true to make the content color light.

And we call StatusBar.setBackgroundColor to set the background color.

To add a modal background with React Native, we add the Modal component.

For instance, we write

<Modal
   theme={{
     colors: {
       backdrop: 'transparent',
     },
   }}
  {...otherProps}
>
 {children}
</Modal>

to add the Modal component with the children prop as its content.

We set the backdrop color by setting the colors.backdrop property in theme.

To add a text input with React Native, we use the TextInput component.

For example, we write

<TextInput
  label={label}
  mode="outlined"
  theme={{
    colors: {
      primary: "#FFF",
    },
  }}
/>;

to add a TextInput with the label set to the label text.

The mode is outlined makes the text input show an outline.

And the colors.primary property set the main color of the text input.

To add a touchable ripple with React Native, we use the TouchableRipple component.

For instance, we write

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

const MyComponent = () => (
  <TouchableRipple
    onPress={() => console.log('Pressed')}
    rippleColor="rgba(0, 0, 0, .32)"
  >
    <Text>Press anywhere</Text>
  </TouchableRipple>
);

export default MyComponent;

to wrap TouchableRipple around our Text.

Now when we tap on the Text, we should see the ripple effect.

We set the ripple color by setting the rippleColor prop.

And onPress is run when the ripple is pressed.