Category: React Native Answers

Sometimes, we want to change button style on press in React Native.

In this article, we’ll look at how to change button style on press in React Native.

How to change button style on press in React Native?

To change button style on press in React Native, we can wrap our button with the TouchableHighlight component.

For instance, we write:

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  btnNormal: {
    borderColor: 'blue',
    borderWidth: 1,
    borderRadius: 10,
    height: 30,
    width: 100,
  },
  btnPress: {
    borderColor: 'blue',
    borderWidth: 1,
    height: 30,
    width: 100,
  },
  btn: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    display: 'flex'
  }
});
export default function App() {
  const [isPress, setIsPress] = React.useState(false);

  const touchProps = {
    activeOpacity: 1,
    underlayColor: 'blue',
    style: isPress ? styles.btnPress : styles.btnNormal,
    onHideUnderlay: () => setIsPress(false),
    onShowUnderlay: () => setIsPress(true),
    onPress: () => console.log('hello'),
  };

  return (
    <View style={styles.container}>
      <TouchableHighlight {...touchProps}>
        <Text style={styles.btn}>Click here</Text>
      </TouchableHighlight>
    </View>
  );
}

to define the touchProps object that we use to set the props of TouchableHighlight.

We set onHideUnderlay to a function that runs when the underlay is hidden.

We set onShowUnderlay to a function that runs when the underlay is shown.

Both functions change the isPress state.

And we apply different styles for the TouchableHighlight according to the value of isPress.

Conclusion

To change button style on press in React Native, we can wrap our button with the TouchableHighlight component.

Sometimes, we want to change listening port with React Native.

In this article, we’ll look at how to change listening port with React Native.

How to change listening port with React Native?

To change listening port with React Native, we can set the port option.

For instance, we run:

react-native start --port 9988

to start the dev server and make it listen to port 9988.

Conclusion

To change listening port with React Native, we can set the port option.

Sometimes, we want to repeat animation with React Native.

In this article, we’ll look at how to repeat animation with React Native.

How to repeat animation with React Native?

To repeat animation with React Native, we can use the Animated.loop method.

For instance, we write:

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

const c = new Animated.Value(0);

export default function App() {
  React.useEffect(() => {
    Animated.loop(
      Animated.timing(c, {
        toValue: 300,
        duration: 3000,
      }),
      { iterations: 5 }
    ).start();
  }, []);

  const color = c.interpolate({
    inputRange: [0, 200, 300],
    outputRange: ['orange', 'lightgreen', 'yellow'],
  });

  return (
    <Animated.View style={{ backgroundColor: color }}>
      <Text>hello world</Text>
    </Animated.View>
  );
}

to call Animated.loop with the animation object we created from Animated.timing and an object to set the iterations to 5 to repeat the animation 5 times.

Then we call interpolate to interpolate the color for the animation.

And use color as the backgroundColor‘s value.

Conclusion

To repeat animation with React Native, we can use the Animated.loop method.

Sometimes, we want to have content break to next line with flex when content reaches edge with React Native.

In this article, we’ll look at how to have content break to next line with flex when content reaches edge with React Native.

How to have content break to next line with flex when content reaches edge with React Native?

To have content break to next line with flex when content reaches edge with React Native, we can set flexWrap to 'wrap'.

For instance, we write:

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

export default function App() {
  return (
    <View style={{ flexWrap: 'wrap', flexDirection: 'row' }}>
      {Array(20)
        .fill()
        .map((_, i) => {
          return (
            <Text key={i} style={{ width: 50 }}>
              {i}
            </Text>
          );
        })}
    </View>
  );
}

to set flexWrap to 'wrap' in the View so that the Text components inside will wrap to the next row when they reach the screen’s right edge.

Conclusion

To have content break to next line with flex when content reaches edge with React Native, we can set flexWrap to 'wrap'.

Sometimes, we want to format a number to currency when using React Native.

In this article, we’ll look at how to format a number to currency when using React Native.

How to format a number to currency when using React Native?

To format a number to currency when using React Native, we can use the react-number-format package.

To install it, we run npm i react-number-format.

Then we use it by writing:

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

export default function App() {
  return (
    <View>
      <NumberFormat
        value={7585945}
        displayType="text"
        thousandSeparator
        prefix="$"
        renderText={(value) => <Text>{value}</Text>}
      />
    </View>
  );
}

to add the NumberFormat component.

value is set to the number to format.

displayType sets how the formatted number should be rendered.

thousandSeparator adds thousand separators to the return number.

prefix sets the prefix to add to the number.

renderText is set a function that renders the value in the Text component.

Conclusion

To format a number to currency when using React Native, we can use the react-number-format package.

To install it, we run npm i react-number-format.