Operation of React-Native-Action-Button ;)

operation_of_actionbutton.md

React-Native-Action-Button

I will be tearing apart each and every important line in the React-Native-Action-Button npm packagem because it has got a lot of concepts that are important and a "must know".

altighty then, let's get started.

PropTypes (prop-types)

Runtime type checking for React props and similar objects. It will check props passed to your components agains those definitions, and warn in development if they don’t match.

A sample implementation:

ActionButton.propTypes = {
  resetToken: PropTypes.any,
  active: PropTypes.bool,
}

now if the active prop passed to the ActionButton Component is not a bool then it will show a warning.

This is a best practice to provide default props and Type checking for the elements to prevent future bugs and issues.

ActionButton.defaultProps = {
  resetToken: null,
  active: false,
}

Some of the styling properties (Must Know)

• elevation

• flex

• zindex

• shadow

• hitslop

• pointerevents

• transforms

• synthetic-touch-events

Shared.js (In react-native-action-button)

so shared.js is to differentiate certain features that are different in android and ios.

export const isAndroid = Platform.OS === "android";

this line checks if the current platform in android or not.

export function getTouchableComponent(useNativeFeedback) {
  if (useNativeFeedback === true && isAndroid === true) {
    return TouchableNativeFeedback;
  }
  return TouchableOpacity;
}

returns TouchableNativeFeedback if it's Android else TouchableOpacity for the touchable component. here's why

export function touchableBackground(color, fixRadius) {
  if (isAndroid) {
    if (Platform["Version"] >= 21) {
      return TouchableNativeFeedback.Ripple(
        color || "rgba(255,255,255,0.75)",
        fixRadius
      );
    } else {
      TouchableNativeFeedback.SelectableBackground();
    }
  }
  return undefined;
}

Here, it's how the background should be i.e touchablebackground

    if (Platform["Version"] >= 21) {
      return TouchableNativeFeedback.Ripple(
        color || "rgba(255,255,255,0.75)",
        fixRadius
      );

this line causes the touch event to behave like ripple effect (Android's default) ripple but since it is only available on android from version 21 or above. it returns TouchableNativeFeedback.SelectableBackground()

that's probably it for shared.js, styling elevation is 5, android specific.