react-native-flying-objects

DOCUMENTATION

https://react-native-flying-objects.com/

DESCRIPTION

• Preview

  

  preview "reaction button" code from my expo base project

flying objects package for react native

this library based on Animated.View and Easing

INSTALLATION

npm install --save react-native-flying-objects

HOW TO USE

import react-native-flying-objects.

import { FlyingView } from 'react-native-flying-objects';

add properties for modify FlyingView.

• manage state for flying objects

  const [object, setObject] = useState<ObjectConfig[]>([]);
  // manage every rendering objects

• when you want to add object just add more state

  setObject((prev) => [...prev, { object: <Text>hello</Text> }]);
  // the new object added
  // text "hello" will be the object that flying

• add FlyingView where you want to use.

  return (
    <FlyingView
      object={object}
      containerProps={{ style: { borderWidth: 2, borderColor: 'black' } }}
    />
  );

• result

  

  Demo code in my github

PROPERTIES

FlyIngView

| Property | required | Type | Description | DefaultValue | | -------------- | -------- | ----------------------------------------------------------------- | --------------------------------------------------- | ------------------------------------------------------- | | object | true | ObjectConfig | list of objects managed by container. | undefined | | containerProps | false | React-native.ViewProps | Props for the container in which the object floats. | {pointerEvents:"none",style={{width:50,height:120}}} |

ObjectConfig

| Property | required | Type | Description | DefaultValue | | -------- | -------- | -------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | | object | true | React.ReactNode | the object that flies on FlyingView | - | | right | false | AnimatedPosition | animated value for position right of object on container | {fromValue: 0,toValue: 0,duration: 1200, delay: 0,} | | top | false | AnimatedPosition | animated value for position top of object on container | {fromValue: 100,toValue: 35,duration: 1200,easing: Easing.bezier(0.5, 1.0, 0.5, 1.0),delay: 0,} | | show | false | AnimatedOpacity | animated opacity value when object appears | {duration: 500,delay: 0,} | | hide | false | AnimatedOpacity | animated opacity value when object disappears | {duration: 500,delay: 0,} |

TYPES

types for use FlyingView

interface AnimatedPosition {
  fromValue?: number;
  toValue?: number;
  duration?: number;
  easing?: ((value: number) => number) | undefined;
  delay?: number;
}

interface AnimatedOpacity {
  duration?: number;
  easing?: ((value: number) => number) | undefined;
  delay?: number;
}

interface ObjectConfig {
  object: React.ReactNode;
  right?: AnimatedPosition;
  top?: AnimatedPosition;
  show?: AnimatedOpacity;
  hide?: AnimatedOpacity;
}

// easing from react-native

REFERENCE DOCUMENTS

React Native

• Animated
• Easing