Author: John Au-Yeung

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.

To fix the parent opacity not affecting text issue with React Native, we should try changing the opacity using alpha-value of the background color instead of opacity props.

For example, we write

<View style={{ backgroundColor: "rgba(0,0,0,0.5)" }} />;

to set the backgroundColor style to "rgba(0,0,0,0.5)".

The last number is the opacity.

Then it should be possible applying different opacities for the children components.

To pass parameters to nested navigators with React Native, we call navigation.navigate with an object with the params property.

For instance, we write

navigation.navigate('Account', {
  screen: 'Settings',
  params: { user: 'jane' },
});

to set the params property to an object with the data that we want to pass to the destination component.