Category: React

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.

To add a password input with React Native, we can set the secureTextEntry prop to true.

For instance, we write

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

to set secureTextEntry to true to make the TextInput a password input.

To add a password input with React Native, we can set the secureTextEntry prop to true.

For instance, we write

<TextInput secureTextEntry={true} style={styles.default} value="abc" />

to set secureTextEntry to true to make the TextInput a password input.